react-chartjs-2 레이더 차트 구현

구현 목표

• 사용자 유형(예: 열정형, 인싸형, 먹방형 등)의 점수를 기반으로 한눈에 시각화

• 불필요한 정보는 제거하고 중요한 정보에만 집중된 형태

사용 스택

• React: UI 프레임워크

• react-chartjs-2: Chart.js의 React 래퍼 라이브러리

• Chart.js: 시각화 라이브러리

구현 구조

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

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;

코드 해설

1. Chart.js 구성 요소 등록

ChartJS.register(...);

2. 데이터 구성 방식

labels: ["열정형", "집중형", ...]
data: [4, 3, 1, 5, 2, 4]

• labels는 각 축의 명칭이며, 사용자 성향 카테고리입니다.

• data는 props로 전달받수 배열입니다. 사용자마다 동적으로 변하도록 처리합니다.

3. 시각적 최적화

pointRadius: 0, pointHoverRadius: 0
ticks: { display: false }

• 레이더 점을 최소화하여 데이터 시인성만 유지

• 점수 눈금(ticks)은 제거하여 디자인 간결화

4. UX 최적화 포인트

• 범례 숨김 처리로 군더더기 제거

• 모바일 환경에서도 쉽게 읽히는 중심 레이아웃 유지

• 사용자 성향 데이터는 API 호출을 통해 전달되고, 해당 컴포넌트에서만 재사용 가능하게 구조화

실제 적용 결과 및 실제 이미지

• 사용자 성향 분포를 처음 본 사람도 쉽게 해석할 수 있다는 피드백

• 타입별 통계 확인 시 차트 형태만으로도 개인의 특성이 드러나 시각적 만족도 증가

• 전체 UI 내에서도 부담 없는 시각화 요소로 자리잡음

 

회고

• 스타일 세부 조정

• 축 단위 계산 제어

• 반응형 처리 시 문제점 등은 직접 해결해야 했습니다.

마무리