Recharts에서는 데이터를 그래프로 표현하기 위해 data prop으로 전달되어야 합니다. 이 데이터를 변경하고 포맷하는 방법은 두 가지로 나눌 수 있습니다.

1. 데이터 변환 함수를 사용하는 방법

Recharts는 데이터를 변환하는 함수를 제공합니다. 이 함수를 사용하여 데이터를 변경한 후, 변경된 데이터를 data prop으로 전달하여 그래프를 그릴 수 있습니다.

예를 들어, 다음과 같은 데이터가 있다고 가정해봅시다.

const data = [
  { name: 'A', value: 10 },
  { name: 'B', value: 20 },
  { name: 'C', value: 30 },
];

만약 value를 100으로 나누어 퍼센트로 표현하고 싶다면, 데이터를 변환하는 함수를 다음과 같이 작성할 수 있습니다.

const formatData = (data) => {
  return data.map((item) => {
    return {
      name: item.name,
      value: Math.round((item.value / 100) * 100),
    };
  });
};

이제 formatData 함수를 사용하여 데이터를 변환한 후, Recharts의 BarChart 컴포넌트의 data prop으로 전달합니다.

<BarChart data={formatData(data)}>
  ...
</BarChart>

이렇게 함으로써 데이터 포맷을 변경하여 그래프를 표현할 수 있습니다.

2. 데이터 변환 컴포넌트를 사용하는 방법

Recharts는 데이터를 변환하는 컴포넌트를 제공합니다. 이 컴포넌트를 사용하여 데이터를 변경한 후, 변경된 데이터를 data prop으로 전달하여 그래프를 그릴 수 있습니다.

예를 들어, BarChart를 사용하여 데이터를 표현할때 BarChart의 dataKey prop으로 value를 사용한다면, 데이터를 변경하는 컴포넌트를 다음과 같이 작성할 수 있습니다.

const CustomBarChart = ({ data }) => {
  const formatData = data.map((item) => {
    return {
      ...item,
      value: Math.round((item.value / 100) * 100),
    };
  });

  return (
    <BarChart data={formatData}>
      ...
    </BarChart>
  );
};

이제 CustomBarChart 컴포넌트를 사용하여 데이터를 변환한 후, 그래프를 표현할 수 있습니다.

<CustomBarChart data={data} />

이렇게 함으로써 데이터 포맷을 변경하여 그래프를 표현할 수 있습니다.

Recharts에서 데이터 포맷을 변경하는 방법에 대해서 알아보았습니다. 데이터를 변환하는 함수를 사용하거나 데이터를 변환하는 컴포넌트를 작성하여, 데이터를 원하는 형태로 변환한 후 그래프를 표현할 수 있습니다.