Rechart Data 동적으로 추가

처음에는 그려주는거니깐 useEffect그런거 사용해야하나 싶었는데 그런건 서버나 다른 API에서 가져올때만 그렇게 하고

내부에서는 setData로 집어넣어주는걸로 충분하더라..

아무것도 없을 때

클릭 3번 했을 때

function App() {
    const [data, setData] = useState(OriginData);
    const [cnt, setCnt] = useState(0);
    return (
        <div>
            <button
                onClick={(e) => {
                    e.preventDefault();
                    setCnt(cnt + 1);
                    setData(
                        data.concat({
                            name: 'Page ' + cnt,
                            uv: 500 + 200 * cnt,
                            pv: 700 + 400 * cnt,
                        })
                    );
                }}
            >
                Click
            </button>
            <div>
                <p>기본 차트</p>
                <ChartTest data={data} />
            </div>
            <div>
                <p>상호작용 추가</p>
                <ChartInteractions data={data} />
            </div>
        </div>
    );
}

외부에서 이렇게 데이터를 추가해줘도 잘 작동한다. 

메모리나 뭐 얼마나 잡아먹는지는 모르겠음.. 그림만 봐서는 옆에 추가되는거라

 

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


const ChartTest = ({ data }) => {

    return (
        <div>
            <LineChart width={600} height={300} data={data}>
                <Line type="monotone" dataKey="uv" stroke="#8884d8" />
                <CartesianGrid stroke="#ccc" />
                <XAxis dataKey="name" />
                <YAxis />
            </LineChart>
        </div>
    );
};

export default ChartTest;

그려주는 component는 따로 신경써주지 않아도 된다. 상황에 따라서 type이나 내부에 크기 그런것도 변경시킬수 있는지 확인해 봐야겠다.