[javascript] 리액트 프레임워크에서 데이터 시각화를 어떻게 처리하나요?

05 Dec 2023

javascript

리액트 프레임워크에서 데이터 시각화를 처리하는 방법은 다양합니다. 여러 가지 방법 중에는 차트 라이브러리를 사용하거나, 커스텀 컴포넌트를 만들어 그래프를 그리는 것 등이 있습니다.

차트 라이브러리 사용하기 가장 일반적인 방법 중 하나는 차트 라이브러리를 사용하는 것입니다. 리액트에서는 React-Chartjs, Recharts, Victory 등 다양한 차트 라이브러리가 있습니다. 이러한 라이브러리를 사용하면 다양한 유형의 차트(막대, 원, 선 등)를 손쉽게 그릴 수 있습니다.

예를 들어, React-Chartjs를 사용해 막대 차트를 그리는 방법은 다음과 같습니다:

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

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 BarChartComponent = () => {
  return (
    <div>
      <h2>Bar Chart</h2>
      <Bar data={data} />
    </div>
  );
};

export default BarChartComponent;

커스텀 컴포넌트로 그래프 그리기 때로는 차트 라이브러리를 사용하기보다, 직접 그래프를 그릴 수 있는 커스텀 컴포넌트를 만드는 것이 필요할 수도 있습니다. 이 경우, react-vis와 같은 라이브러리를 사용하여 그래프를 그릴 수 있습니다. react-vis는 다양한 유형의 그래프를 그리기 위한 강력한 도구입니다.

예를 들어, react-vis를 사용해 선 그래프를 그리는 방법은 다음과 같습니다:

import React from 'react';
import { XYPlot, LineSeries, XAxis, YAxis, ChartLabel } from 'react-vis';

const LineChartComponent = () => {
  const data = [
    { x: 0, y: 8 },
    { x: 1, y: 5 },
    { x: 2, y: 4 },
    { x: 3, y: 9 },
    { x: 4, y: 1 },
    { x: 5, y: 7 },
    { x: 6, y: 6 },
    { x: 7, y: 3 },
    { x: 8, y: 2 },
    { x: 9, y: 0 },
  ];

  return (
    <div>
      <h2>Line Chart</h2>
      <XYPlot width={300} height={300}>
        <XAxis />
        <YAxis />
        <LineSeries data={data} />
        <ChartLabel
          text="X Axis"
          className="alt-x-label"
          includeMargin={false}
          xPercent={0.025}
          yPercent={1.01}
        />
        <ChartLabel
          text="Y Axis"
          className="alt-y-label"
          includeMargin={false}
          xPercent={0.06}
          yPercent={0.06}
          style={{
            transform: 'rotate(-90)',
            textAnchor: 'end',
          }}
        />
      </XYPlot>
    </div>
  );
};

export default LineChartComponent;

위의 예시 코드는 리액트에서 차트를 그리는 방법 중 일부만을 보여주었습니다. 더 많은 형식의 차트와 라이브러리를 사용해 다양한 데이터 시각화를 구현할 수 있습니다. API 문서와 라이브러리의 예제를 참고하여 자신의 요구에 맞는 데이터 시각화를 처리할 수 있습니다.