Recharts

이번 프로젝트에 이 라이브러리를 쓰기로 했는데, 결국 실제로 써봐야 할 것 같다.

Recharts

Recharts는 React에서 차트를 쉽게 만들 수 있게 해주는 컴포넌트 기반 차트 라이브러리다. SVG 위에서 동작하며, 필요한 차트와 축, 툴팁, 범례 등을 조합해서 사용하는 방식이 특징이다. 공식 문서 기준으로 Recharts는 “composable charting library built on React components”로 소개되며, 현재 공식 사이트에서는 설치 가이드와 다양한 차트 API를 제공한다. 최신 공식 문서 메인 페이지에는 설치 버전이 v3.8.0으로 표시되어 있다.

1. Recharts가 무엇인지

Recharts는 React 컴포넌트를 조립하듯 차트를 만드는 라이브러리다.

예를 들어 선 그래프를 만들고 싶다면 LineChart를 쓰고, 그 안에 XAxis, YAxis, Tooltip, Legend, Line 같은 구성 요소를 넣어서 완성한다. 공식 가이드도 “단순한 자바스크립트 배열 데이터로 차트를 만들고, 이후 축, 범례, 툴팁 같은 컴포넌트를 추가하는 방식”으로 설명한다.

즉, Recharts의 핵심은 다음과 같다.

  • 데이터는 보통 객체 배열로 준비한다.
  • 차트 종류에 맞는 부모 컴포넌트를 선택한다.
  • 축, 격자, 툴팁, 범례 같은 자식 컴포넌트를 추가한다.
  • dataKey로 어떤 값을 화면에 그릴지 지정한다.

2. 왜 많이 쓰는지

Recharts는 React 프로젝트에 자연스럽게 들어간다는 점이 크다.

DOM을 직접 조작하는 느낌보다 “컴포넌트 조합”에 가깝기 때문에 React에 익숙하면 사용 진입장벽이 낮다. 또한 공식 문서에서 LineChart, BarChart, PieChart, AreaChart, ComposedChart 등 여러 차트를 제공하고, ResponsiveContainer, Tooltip, Legend, CartesianGrid 같은 공통 컴포넌트도 함께 제공한다.

특히 화면 크기에 따라 자동으로 크기를 맞추고 싶을 때 ResponsiveContainer를 같이 쓰는 경우가 많다. 공식 API에서도 이를 일반 컴포넌트로 제공한다.

3. 설치 방법

Recharts 공식 메인 페이지에서 설치를 안내하고 있으며, 시작 전 프로젝트에 라이브러리를 추가해야 한다. 공식 사이트의 Getting Started와 메인 페이지를 기준으로 Recharts를 설치한 뒤 차트 컴포넌트를 import해서 사용하면 된다.

보통은 아래처럼 설치한다.

npm install recharts

또는

yarn add recharts

4. 기본 사용 흐름

Recharts의 기본 흐름은 아주 단순하다.

4-1. 데이터 준비

차트 데이터는 보통 객체 배열 형태로 만든다.

constdata= [
  { name:'1월', users:400 },
  { name:'2월', users:620 },
  { name:'3월', users:540 },
  { name:'4월', users:800 },
];

공식 API 문서도 차트의 data는 객체 배열이며, dataKey를 통해 어떤 속성을 사용할지 지정한다고 설명한다.

4-2. 차트 컴포넌트 import

import {
LineChart,
Line,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
Legend,
ResponsiveContainer,
}from'recharts';

4-3. 차트 렌더링

가장 많이 쓰는 예시 중 하나가 선 그래프다.

export default function UserChart() {
  const data = [
    { name: '1월', users: 400 },
    { name: '2월', users: 620 },
    { name: '3월', users: 540 },
    { name: '4월', users: 800 },
  ];

  return (
    <div style=>
      <ResponsiveContainer width="100%" height="100%">
        <LineChart data={data}>
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="name" />
          <YAxis />
          <Tooltip />
          <Legend />
          <Line type="monotone" dataKey="users" stroke="#2b7f59" />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
}

이 코드에서 중요한 점은 다음이다.

  • LineChart가 전체 차트의 부모 역할을 한다.
  • data={data}로 실제 데이터를 넘긴다.
  • XAxis dataKey="name"은 x축에 어떤 값을 보여줄지 지정한다.
  • Line dataKey="users"는 선 그래프가 어떤 값을 기준으로 그려질지 지정한다.
  • Tooltip, Legend, CartesianGrid는 부가적인 시각 요소다.

5. 자주 쓰는 구성 요소

LineChart

선 그래프를 만들 때 사용하는 부모 컴포넌트다. 공식 API에서 LineChart는 XAxis, YAxis, Tooltip, Legend, CartesianGrid 같은 자식 컴포넌트를 함께 사용할 수 있다.

ResponsiveContainer

부모 영역 크기에 맞게 차트 크기를 반응형으로 맞추는 데 사용한다. 레이아웃이 가변적인 웹 페이지에서는 거의 같이 쓴다. 공식 API 문서에서 일반 컴포넌트로 제공된다.

XAxis / YAxis

축을 그리는 컴포넌트다.

보통 XAxis에는 카테고리 이름, YAxis에는 숫자 범위를 표시한다.

Tooltip

마우스를 올렸을 때 데이터를 보여주는 인터랙션 요소다. 공식 Getting Started에서도 툴팁 추가를 대표적인 상호작용 예시로 설명한다.

Legend

차트에 표시된 데이터 시리즈 이름을 보여준다. 여러 선이나 막대를 같이 그릴 때 유용하다.

CartesianGrid

배경 격자를 표시해서 값을 더 읽기 쉽게 만든다.

6. 사용 시 알아둘 점

Recharts를 쓸 때 가장 중요한 것은 데이터 구조와 dataKey의 연결이다.

예를 들어 데이터가 아래처럼 생겼다면,

constdata= [
  { month:'1월', sales:120 },
  { month:'2월', sales:200 },
];

축과 선도 이에 맞춰 써야 한다.

<XAxisdataKey="month"/>
<Line dataKey="sales"/>

즉, dataKey 이름이 실제 데이터 객체의 key와 정확히 일치해야 한다. 공식 API에서도 data의 각 객체 속성을 dataKey로 지정해 사용한다고 설명한다.

또한 차트 높이가 지정되지 않으면 화면에 안 보이는 경우가 많다. 그래서 ResponsiveContainer를 사용할 때는 감싸는 부모 요소에 높이를 반드시 주는 습관이 중요하다. 공식 API에서 차트 컨테이너의 width, height는 수치 또는 퍼센트 문자열로 지정할 수 있다고 안내한다.

7. Recharts가 잘 맞는 경우

Recharts는 대시보드, 관리자 페이지, 통계 페이지처럼 React 기반 서비스에서 빠르게 시각화를 붙여야 할 때 잘 맞는다.

특히 “복잡한 시각화 엔진”보다는 “React스럽게 유지보수 가능한 차트 UI”가 필요할 때 장점이 크다. 공식 문서도 Recharts를 재사용 가능한 React 컴포넌트 조합 방식으로 강조한다.

8. 간단 정리

오늘 정리한 내용을 한 문장으로 정리하면 이렇다.

Recharts는 React에서 차트를 만들기 위한 컴포넌트 기반 라이브러리이며, 객체 배열 데이터를 준비한 뒤 LineChart, BarChart 같은 부모 컴포넌트와 XAxis, YAxis, Tooltip, Legend 같은 자식 컴포넌트를 조합해서 사용한다. 반응형 처리를 위해서는 ResponsiveContainer를 함께 사용하는 경우가 많다.

results matching ""

    No results matching ""