[Recharts] Nextjs에서 Recharts 맛보기

📊 이번에 새롭게 시작하는 프로젝트에 차트 라이브러리가 필요했다. 차트 라이브러리를 선택하기에 앞서 고려해야 했던 점은 디자인팀 시안을 최대한 반영할 수 있도록 어느 정도 커스텀이 가능해야 했고, nextjs를 고려하여 svg로 제공이 돼야 했다. 팀원들과 여러 차트 라이브러리를 찾아보고, 논의한 끝에 Recharts를 사용하기로 결정했다.

 

오늘의 결과물

🤔 Recharts란?

공식문서  https://recharts.org/en-US

 
리액트 컴포넌트를 기반으로 데이터를 차트로 시각화해 주는 라이브러리이다.
 

⚙️ 설치하기

npm install recharts

 

📂 연습하기

어떤 식으로 데이터를 전달해서 쓰는지 간단하게 확인하고 싶어서 유튜브 강의인 [ Build Charts in React With Recharts in 7 Minutes ] 을 따라서 진행해 봤다. 
 

1. Area Chart(영역차트)

 
1) components 폴더에 AreaChart.tsx 파일을 생성해 준다.
2) app - page.tsx에 AreaChart.tsx 파일을 import 해준다.
3) 사진과 같은 결과물이 나오려면 recharts에서 필요한 컴포넌트들을 가져와 prop을 넘겨 사용할 수 있다. 

'use client';

import {
  AreaChart,
  Area,
  ResponsiveContainer,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  TooltipProps,
} from 'recharts';

const AreaChartComponent = () => {
  return (
  	// 컴포넌트
  )
}

export default AreaChartComponent;

 
이번 연습에서는 강의에서 제공한 Mock Data를 사용했다.

const productSales = [
 {
   name: 'Jan',
   product1: 4000,
   product2: 2400,
 },
 {
   name: 'Feb',
   product1: 3000,
   product2: 2210,
 },
 {
   name: 'Mar',
   product1: 2000,
   product2: 2290,
  },
 {
   name: 'Apr',
   product1: 2780,
   product2: 2000,
 },
 {
   name: 'May',
   product1: 1890,
   product2: 2181,
 },
 {
   name: 'Jun',
   product1: 2390,
   product2: 2500,
 },
];

return문 안에서 import해온 컴포넌트들을 사용할 수 있다. 
기본 구성은 아래와 같다.

const productSales = [{name: 'Jan', product1: 4000, product2: 2400}, ...];

const AreaChartComponent = () => {
  return (
  <ResponsiveContainer>
    <AreaChart width={400} height={400} data={productSales}>
      <Area type="monotone" dataKey="product1" stroke="#8884d8" fill="#3b82f6" stackId="1" />
      <Area type="monotone" dataKey="product2" stroke="#7c3aed" fill="#8b5cf6" stackId="1" />
    </AreaChart>
  </ResponsiveContainer>
  );
};

• ResponsiveContainer : 차트를 반응형으로 만들어주는 컨테이너
• AreaChart : 영역 차트를 그리기 위한 컴포넌트로 차트의 너비, 높이 등을 조절 가능
  • data : 시각화하고자 하는 데이터 값을 전달
• Area : 영역 차트를 그리기 위한 핵심 요소로 영역 차트가 사용할 데이터의 키를 지정 가능
  • type : 데이터를 곡선으로 표시
  • stroke : 데이터 점들을 연결하는 선의 색상을 지정
  • fill : 연결된 선 아래의 영역을 채우는 색상을 지정
  • stackId : 동일한 stackId를 가진 Area 컴포넌트들은 함께 누적되어 표시

 
또한 추가적으로 차트를 커스텀할 수 있는 기능들이 더 존재하는데, 이번 파트에서는 Grid 추가와 툴팁까지 다뤄보았다.

 

✏️ Grid 추가 및 X, Y축 데이터 표시

<YAxis />
<XAxis dataKey="name" />
<CartesianGrid strokeDasharray="5 5" />

• YAxis : 차트의 Y축 정의
• XAxis : 차트의 X축 정의
• CartesianGrid : 차트에 Grid 추가
  • strokeDasharray : 선 스타일 설정

 

✏️  툴팁 추가

기본으로 제공하는 툴팁 스타일이 현재 커스텀한 차트 스타일과 전혀 어울리지 않는 것을 볼 수 있는데, 이 툴팁 또한 커스텀을 해줄 수 있다는 사실! 이런 점에서 굉장히 자유도가 높은 라이브러리라는 것을 알 수 있다.

(좌) 기본 툴팁 스타일 / (우) 커스텀 된 툴팁 스타일

 

<Tooltip content={<CustomTooltip />} />
<Legend />

• Tooltip : 마우스를 올렸을 때 데이터에 대한 정보를 표시
  • content : 커스텀 툴팁 컴포넌트를 전달
• Legend : 차트의 범례를 추가하여 각 데이터를 쉽게 식별할 수 있도록 도움을 줌

 
CustomTooltip에서 원하는 스타일을 지정해 줄 수 있다.

😇 이때 타입스크립트를 이용하면 payload 타입 지정을 어떻게 해야 할지 모르는 상황이 발생할 수 있다. 다행히 prop의 타입까지도 recharts에서 제공해 준다. -> import { TooltipProps } from 'recharts';

const CustomTooltip = ({
  active,
  payload,
}: TooltipProps<number, string>): JSX.Element | null => {
  if (active && payload && payload.length) {
    const item = payload[0].payload;
    const { name, product1, product2 } = item;
    return (
      <div className="p-4 bg-slate-900 flex flex-col gap-4 rounded-md">
        <p className="text-medium text-lg">{name}</p>
        <p className="text-sm text-blue-400">
          Product 1:
          <span className="ml-2">{product1}</span>
        </p>
        <p className="text-sm text-blue-400">
          Product 2:
          <span className="ml-2">{product2}</span>
        </p>
      </div>
    );
  }
  return null;
};

 

• payload 데이터 안에 객체로 넘겨준  key: value 데이터 값들이 들어가 있다.

 

2.  Bar Chart, Line Chart

Area Chart와 동일하게 Bar Chart와 Line Chart도 각 차트에 해당하는 컴포넌트만 변경해서 불러와주면 된다.(Chart 컴포넌트를 제외하고는 코드가 동일하기 때문에 코드를 따로 첨부하지 않았다.)

 

📚 느낀 점

오늘 강의를 따라 해 본 건 정말 찍먹 수준인 느낌이라 Recharts의 기본 사용법은 이렇구나 정도만 체험한 느낌이었다. 다만, 자유도가 높아서 디자인적으로 퀄리티를 높일 수 있다는 점이 너무 만족스러웠다. 앞으로 실제 데이터를 받아와서 원하는 결과를 얻기 위해 가공하는 과정에서 굉장히 많은 고난을 만날 것으로 예상되긴 하지만🥹 지금 경험 안 해보면 또 언제 해볼까 싶어서 이 상황을 겸허히 받아들이기로 마음을 먹어본다. 다음 포스팅 때는 좀 더 친해져있길,,

---

참고

[유튜브] Build Charts in React With Recharts in 7 Minutes - CodeSnaps(링크)
 

💬 본 포스팅은 공부 기록용으로 정확하지 않은 정보가 존재할 수 있습니다. 발견하신다면 알려주세요!