[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를 사용했다.
{
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(링크)
💬 본 포스팅은 공부 기록용으로 정확하지 않은 정보가 존재할 수 있습니다. 발견하신다면 알려주세요!