1. Recharts 패키지를 설치합니다. 다음 명령어를 사용하여 설치할 수 있습니다:

npm install recharts

1. React 컴포넌트에서 Recharts를 임포트합니다:

import { Treemap, ResponsiveContainer } from 'recharts';

1. 데이터를 준비합니다. 트리맵에는 계층 구조를 가진 데이터가 필요합니다. 예를 들어, 다음과 같은 JSON 형식의 데이터를 사용할 수 있습니다:

const data = [
  {
    name: 'A',
    children: [
      { name: 'A1', value: 100 },
      { name: 'A2', value: 200 },
      { name: 'A3', value: 300 },
    ],
  },
  {
    name: 'B',
    children: [
      { name: 'B1', value: 150 },
      { name: 'B2', value: 250 },
    ],
  },
];

1. Recharts 컴포넌트를 사용하여 트리맵을 그립니다. 아래 예시 코드는 트리맵을 ResponsiveContainer 안에 배치하고, data prop에 데이터를 전달하는 방법을 보여줍니다:

const TreeMapExample = () => {
  return (
    <ResponsiveContainer width="100%" height={400}>
      <Treemap data={data} dataKey="value" ratio={4 / 3} stroke="#fff" fill="#8884d8" />
    </ResponsiveContainer>
  );
};

1. 마지막으로, 트리맵을 렌더링하는 컴포넌트를 애플리케이션에 포함시킵니다.

ReactDOM.render(
  <div>
    <h1>트리맵 예시</h1>
    <TreeMapExample />
  </div>,
  document.getElementById('root')
);

이제 Recharts를 사용하여 트리맵을 그릴 수 있습니다. 위의 코드를 사용하여 트리맵을 시각화해보세요. Recharts에는 다양한 옵션이 있으며, 원하는 스타일링과 상호작용성을 적용할 수 있습니다. 더 자세한 내용은 Recharts 문서를 참조하세요.