리액트로 대시보드 만들기, 데이터 시각화 및 차트 구성

현대의 웹 애플리케이션에서 데이터 시각화는 필수적인 요소가 되었습니다. 특히 대시보드 애플리케이션은 사용자가
데이터를 손쉽게 이해하고, 분석할 수 있도록 도와주는 도구입니다. 리액트는 컴포넌트 기반의 구조를 통해
복잡한 사용자 인터페이스를 효율적으로 만들 수 있게 해줍니다. 이번 강좌에서는 리액트를 이용해 대시보드를
만드는 방법과 데이터 시각화를 위한 차트 라이브러리를 사용하는 방법을 알아보겠습니다.

1. 리액트 환경 구축

리액트로 대시보드를 만들기 위해서는 먼저 개발 환경을 설정해야 합니다. create-react-app을 사용하여
새로운 리액트 애플리케이션을 생성할 수 있습니다. 이를 통해 기본적인 파일 구조와 필요한 라이브러리를 자동으로
설치할 수 있습니다.

npx create-react-app dashboard-example

위 명령어를 실행한 후, 생성된 프로젝트 디렉토리로 이동합니다:

cd dashboard-example

2. 주요 차트 라이브러리 설치

대시보드에서 데이터를 시각화하기 위해서 우리는 Chart.js와 react-chartjs-2 라이브러리를 사용할 것입니다.
이 라이브러리들은 다양한 차트를 간편하게 구현할 수 있게 도와줍니다. 아래 명령어를 통해 이 라이브러리들을 설치합니다:

npm install chart.js react-chartjs-2

3. 대시보드 레이아웃 구성

대시보드 애플리케이션의 기본 레이아웃을 구성하기 위해, App.js 파일을 수정하여
기본적인 구조를 설정합니다:


import React from 'react';
import './App.css';

function App() {
    return (
        
            
                대시보드
            
            
                
                    {/* 차트를 여기에 추가할 것입니다. */}
                
            
        
    );
}

export default App;

4. 데이터 시각화: 차트 추가하기

대시보드에 차트를 추가하기 위해 먼저, 차트를 표시할 새로운 컴포넌트를 생성합니다.
src 디렉터리 내에 ChartComponent.js 파일을 생성하고, 다음과 같이 작성합니다:


import React from 'react';
import { Bar } from 'react-chartjs-2';

const ChartComponent = () => {
    const data = {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [
            {
                label: '# of Votes',
                data: [12, 19, 3, 5, 2, 3],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)',
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)',
                ],
                borderWidth: 1,
            },
        ],
    };

    const options = {
        scales: {
            y: {
                beginAtZero: true,
            },
        },
    };

    return ;
};

export default ChartComponent;

생성한 ChartComponent를 App.js에서 사용하도록 수정합니다:


import React from 'react';
import './App.css';
import ChartComponent from './ChartComponent';

function App() {
    return (
        
            
                대시보드
            
            
                
                    
                
            
        
    );
}

export default App;

5. 다양한 차트 유형 구현

대시보드에서 다양한 차트 유형을 보여주고 싶다면, react-chartjs-2 라이브러리를
활용하여 여러 종류의 차트를 추가할 수 있습니다. 예를 들어, 선 차트, 원형 차트 등 다양한
차트 컴포넌트를 생성해보겠습니다.

선 차트


import React from 'react';
import { Line } from 'react-chartjs-2';

const LineChartComponent = () => {
    const data = {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
        datasets: [
            {
                label: 'Monthly Sales',
                data: [65, 59, 80, 81, 56, 55, 40],
                fill: false,
                backgroundColor: 'rgba(75,192,192,1)',
                borderColor: 'rgba(75,192,192,1)',
            },
        ],
    };

    const options = {
        responsive: true,
        title: {
            display: true,
            text: '월별 판매량',
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true,
                },
            }],
        },
    };

    return ;
};

export default LineChartComponent;

원형 차트


import React from 'react';
import { Pie } from 'react-chartjs-2';

const PieChartComponent = () => {
    const data = {
        labels: ['Red', 'Blue', 'Yellow'],
        datasets: [
            {
                data: [300, 50, 100],
                backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
                hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
            },
        ],
    };

    return ;
};

export default PieChartComponent;

6. 다양한 데이터를 위한 API 연결

대시보드에서 실제 데이터를 시각화하려면, API를 통해 데이터를 가져와야 합니다.
리액트에서는 useEffect 훅을 사용하여 컴포넌트가 마운트될 때 데이터를 비동기적으로
가져올 수 있습니다. 아래는 예시 코드입니다:


import React, { useEffect, useState } from 'react';
import { Bar } from 'react-chartjs-2';

const DynamicChartComponent = () => {
    const [data, setData] = useState({});

    useEffect(() => {
        fetch('https://api.example.com/data')
            .then(response => response.json())
            .then(data => {
                setData({
                    labels: data.labels,
                    datasets: [{
                        label: 'API Data',
                        data: data.values,
                        backgroundColor: 'rgba(75,192,192,1)',
                    }],
                });
            });
    }, []);

    return ;
};

export default DynamicChartComponent;

7. 대시보드 완성하기

대시보드에 여러 차트 컴포넌트를 추가한 후, 자리 배치를 조정하고 스타일을 추가하여
보다 매력적인 대시보드를 완성할 수 있습니다. 간단한 CSS 스타일링으로 대시보드를
구성하는 것이 좋습니다.


.App {
    text-align: center;
}

.App-header {
    background-color: #282c34;
    padding: 20px;
    color: white;
}

main {
    padding: 20px;
}

section {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

8. 마무리

이번 포스트에서는 리액트를 사용하여 대시보드를 만들고, 다양한 차트를 시각화하는 방법에 대해 알아보았습니다.
HTML과 CSS를 활용하여 기본적인 레이아웃을 가지는 대시보드를 구현하고, react-chartjs-2
라이브러리를 이용해 간편하게 차트를 추가하는 방법도 배웠습니다. API를 통해 동적으로 데이터를 가져와
차트를 업데이트하는 방법도 예시로 보여드렸습니다.

리액트의 풍부한 생태계 덕분에 다양한 형태의 데이터 시각화를 손쉽게 구현할 수 있습니다.
자신의 필요에 맞는 데이터 시각화를 위해 여러 차트 라이브러리를 실험해보고, 더 나아가
대시보드 애플리케이션을 발전시켜 나가기를 바랍니다.

추가적인 질문이나 피드백이 있다면 댓글로 남겨주세요.
여러분의 대시보드 애플리케이션 개발에 많은 도움이 되길 바랍니다!