React와 Chart.js로 구현하는 레이더 차트: RadarChart 컴포넌트 분석[FC]

---

React와 Chart.js로 구현하는 레이더 차트: RadarChart 컴포넌트 분석

안녕하세요! 오늘은 React 프로젝트에서 Chart.js를 활용해 사용자 데이터를 시각화하는 레이더 차트를 구현한 예제를 공유하려고 합니다. 특히, react-chartjs-2 라이브러리를 사용하여 간단하면서도 직관적인 레이더 차트를 만드는 방법을 살펴보겠습니다.

1. RadarChart 컴포넌트 소개

RadarChart 컴포넌트는 사용자의 다양한 성향(예: 열정형, 집중형, 축알못형, 축잘알형, 먹방형, 인싸형)을 한눈에 파악할 수 있도록 시각화합니다. 이 컴포넌트는 다음과 같은 기술 스택을 활용하여 구현되었습니다.

• React: UI 컴포넌트 구축
• Chart.js: 차트 라이브러리
• react-chartjs-2: React에서 Chart.js를 쉽게 사용할 수 있도록 도와주는 래퍼 라이브러리

2. 코드 분석

아래 코드는 RadarChart 컴포넌트의 전체 구현 코드입니다.

import { Radar } from "react-chartjs-2";
import {
  Chart as ChartJS,
  RadialLinearScale,
  PointElement,
  LineElement,
  Filler,
  Tooltip,
  Legend,
} from "chart.js";

// Register the components
ChartJS.register(
  RadialLinearScale,
  PointElement,
  LineElement,
  Filler,
  Tooltip,
  Legend
);

const RadarChart = ({ data }) => {
  const chartData = {
    labels: ["열정형", "집중형", "축알못형", "축잘알형", "먹방형", "인싸형"],
    datasets: [
      {
        label: "User Stats",
        data: data,
        backgroundColor: "rgba(204, 0, 0, 1)",
        borderColor: "rgba(0, 0, 0, 1)",
        borderWidth: 1,
        pointRadius: 0,
        pointHoverRadius: 0,
        z: 1,
      },
    ],
  };

  const options = {
    scales: {
      r: {
        beginAtZero: true,
        ticks: {
          display: false, // 점수 라벨 숨기기
        },
        grid: {
          color: "rgba(0, 0, 0, 0.1)",
          z: 2,
        },
        angleLines: {
          color: "rgba(0, 0, 0, 0.1)",
          z: 2,
        },
      },
    },
    plugins: {
      legend: {
        display: false, // 범례 숨기기
      },
    },
  };

  return <Radar data={chartData} options={options} />;
};

export default RadarChart;

2.1 Chart.js 컴포넌트 등록

먼저, Chart.js의 기본 컴포넌트들을 가져와서 등록합니다.

• RadialLinearScale: 레이더 차트의 방사형 스케일
• PointElement, LineElement: 데이터 포인트와 선
• Filler: 차트 내부 채우기
• Tooltip, Legend: 툴팁과 범례 기능

이렇게 등록함으로써, React에서 Chart.js를 사용할 준비를 마칩니다.

2.2 데이터 및 옵션 설정

• chartData
  레이더 차트에 표시할 데이터와 라벨을 정의합니다.
  • labels: 각 축의 이름을 나타내며, 여기서는 사용자 성향을 의미합니다.
  • datasets: 실제 데이터셋으로, data prop을 통해 외부에서 전달받은 값을 사용합니다.
  • 스타일 관련 속성(backgroundColor, borderColor, 등)을 통해 차트의 디자인을 지정합니다.
• options
  차트의 옵션을 설정합니다.
  • scales: 방사형 스케일 옵션으로, beginAtZero를 true로 설정하여 0부터 시작하도록 하고, 불필요한 tick 라벨을 숨겼습니다.
  • plugins: 범례(legend)를 숨기도록 설정해 깔끔한 디자인을 유지합니다.

2.3 최종 렌더링

마지막으로, Radar 컴포넌트를 사용하여 chartData와 options를 전달하고 렌더링합니다. 이렇게 하면, 사용자 정의 데이터에 기반한 레이더 차트가 생성됩니다.