[javascript] Recharts에서 실시간으로 업데이트되는 차트를 그리는 방법은 무엇인가요?

01 Dec 2023

javascript

필요한 종속성 설치: 먼저 Recharts를 프로젝트에 추가해야 합니다. npm을 사용하여 다음 명령을 실행하여 설치합니다.

npm install recharts

데이터를 업데이트할 컴포넌트 작성: 실시간으로 데이터를 업데이트할 컴포넌트를 작성합니다. Recharts의 차트 컴포넌트에 전달할 데이터를 관리할 수 있도록 상태 변수를 설정해야 합니다.

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

const RealTimeChart = () => {
  const [data, setData] = useState([]); // 데이터를 관리할 상태 변수

  useEffect(() => {
    // 데이터 업데이트를 시뮬레이션하는 코드
    const interval = setInterval(updateData, 1000);

    return () => clearInterval(interval);
  }, []);

  const updateData = () => {
    // 데이터 업데이트 로직을 작성합니다.
    // 실제로 서버에서 데이터를 가져와서 업데이트하는 코드를 작성해야 합니다.
    // 여기서는 랜덤한 값을 생성하여 데이터를 업데이트합니다.
    const newData = [
      { time: new Date().toLocaleTimeString(), value: Math.random() * 100 },
      ...data.slice(0, 9), // 최근 10개의 데이터만 유지하기 위해 슬라이스합니다.
    ];
    setData(newData);
  };

  return (
    <LineChart width={500} height={300} data={data}>
      <XAxis dataKey="time" />
      <YAxis />
      <CartesianGrid stroke="#eee" />
      <Line type="monotone" dataKey="value" stroke="#8884d8" />
      <Tooltip />
    </LineChart>
  );
};

export default RealTimeChart;

컴포넌트 사용: 생성한 RealTimeChart 컴포넌트를 다른 컴포넌트에서 사용할 수 있습니다. 실시간으로 업데이트되는 차트를 확인할 수 있습니다.

import React from 'react';
import RealTimeChart from './RealTimeChart';

const App = () => {
  return (
    <div>
      <h1>실시간 차트</h1>
      <RealTimeChart />
    </div>
  );
};

export default App;

위의 코드는 실시간으로 업데이트되는 선 그래프(LineChart)를 그리는 예제입니다. useEffect 훅을 사용하여 setInterval을 설정하여 일정한 간격으로 데이터를 업데이트하고, setData를 사용하여 데이터를 업데이트합니다. 실제로는 서버에서 데이터를 가져와서 업데이트하는 비동기 로직을 작성해야 하지만, 여기서는 랜덤한 값을 생성하여 데이터를 업데이트합니다.