1. Recharts 설치하기

   npm install recharts
   

2. React 컴포넌트에 Recharts 임포트하기

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

3. 데이터 설정하기

   const data = [
     { name: '1월', series1: 4000, series2: 2400, series3: 2400 },
     { name: '2월', series1: 3000, series2: 1398, series3: 2210 },
     { name: '3월', series1: 2000, series2: 9800, series3: 2290 },
     // 다른 데이터 추가...
   ];
   

4. 차트 그리기

   const MultiSeriesChart = () => {
     return (
       <LineChart width={600} height={300} data={data}>
         <CartesianGrid strokeDasharray="3 3" />
         <XAxis dataKey="name" />
         <YAxis />
         <Legend />
         <Line type="monotone" dataKey="series1" stroke="#8884d8" />
         <Line type="monotone" dataKey="series2" stroke="#82ca9d" />
         <Line type="monotone" dataKey="series3" stroke="#ffc658" />
         {/* 다른 시리즈 추가... */}
       </LineChart>
     );
   };
   

5. 컴포넌트 사용하기

   import React from 'react';
   import MultiSeriesChart from './MultiSeriesChart';
   
   const App = () => {
     return (
       <div>
         <h1>다중 시리즈 차트</h1>
         <MultiSeriesChart />
       </div>
     );
   };
   

위의 예시 코드에서는 LineChart 컴포넌트를 사용하여 다중 시리즈 차트를 그렸습니다. Line 컴포넌트를 사용하여 각 시리즈의 선 스타일과 데이터를 지정하고 XAxis, YAxis, CartesianGrid, Legend 컴포넌트를 사용하여 차트에 추가 요소를 설정할 수 있습니다.

추가로, BarChart 컴포넌트를 사용하면 막대 그래프와 같은 다른 종류의 차트도 그릴 수 있습니다.

Recharts에 대한 더 자세한 정보는 공식 문서를 참조하시기 바랍니다.