[javascript] Recharts란 무엇인가요?

01 Dec 2023

javascript

Recharts를 사용하면 다양한 종류의 차트를 손쉽게 생성할 수 있습니다. 막대 그래프, 선 그래프, 원 그래프, 히트맵 등 다양한 유형의 차트를 커스터마이징할 수 있습니다. 또한, 데이터를 동적으로 업데이트하거나 애니메이션 효과를 추가하는 기능도 지원합니다.

Recharts는 사용하기 쉽고 직관적인 API를 제공합니다. 데이터를 입력하고 원하는 속성을 설정하기만 하면, 차트가 자동으로 생성됩니다. 또한, React와의 통합을 통해 React 생태계의 다른 라이브러리와도 잘 동작합니다.

Recharts는 많은 개발자들에게 사랑받고 있는 인기 있는 데이터 시각화 도구입니다. 이 라이브러리는 종속성이 적고 활발한 커뮤니티 지원을 받고 있으므로, 문제가 발생했을 때 도움을 받을 수 있습니다.

아래는 Recharts를 사용하는 간단한 예제 코드입니다.

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

const data = [
  { name: '일', uv: 4000, pv: 2400, amt: 2400 },
  { name: '월', uv: 3000, pv: 1398, amt: 2210 },
  { name: '화', uv: 2000, pv: 9800, amt: 2290 },
  { name: '수', uv: 2780, pv: 3908, amt: 2000 },
  { name: '목', uv: 1890, pv: 4800, amt: 2181 },
  { name: '금', uv: 2390, pv: 3800, amt: 2500 },
  { name: '토', uv: 3490, pv: 4300, amt: 2100 },
];

const App = () => {
  return (
    <LineChart
      width={500}
      height={300}
      data={data}
      margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
    >
      <XAxis dataKey="name" />
      <YAxis />
      <CartesianGrid strokeDasharray="3 3" />
      <Tooltip />
      <Legend />
      <Line type="monotone" dataKey="pv" stroke="#8884d8" />
      <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
    </LineChart>
  );
};

export default App;

Recharts는 공식 문서와 예제 코드가 풍부하게 제공되어 있으며, 아래의 링크를 통해 확인할 수 있습니다.