# React

> React 컴포넌트로 82chart 쓰기.

Source: https://82chart.com/docs/react/

```sh
npm i @82chart/core @82chart/react
```

```js
import { Chart82 } from '@82chart/react';
import '@82chart/core/styles.css';

const data = {
  labels: ['1월', '2월', '3월', '4월', '5월', '6월'],
  series: [{ name: '매출', data: [32000000, 41000000, 38500000, 52000000, 61000000, 58000000] }],
};

export function SalesChart() {
  return (
    <Chart82
      type="bar"
      data={data}
      options={{ title: '월별 매출', unit: '원' }}
      onClick={(point) => console.log(point)}
    />
  );
}
```

- `<Chart82 type data options theme onClick onReady />`. `options` 는 `type`·`data` 를 뺀 나머지 [옵션](https://82chart.com/docs/options/)입니다.
- `data` 는 객체가 바뀌었을 때(새 객체) 다시 그립니다. 같은 배열을 고쳐 쓰지 말고 새로 만들어 넘기세요.
- `options` 는 키 하나하나를 비교해서 바뀐 것만 `setOptions` 로 반영합니다.
- `ref` 로 차트 인스턴스를 받습니다. 마운트된 뒤에 만들어지므로 Next.js 같은 SSR에서도 안전합니다.

## ref 로 내보내기

```js
import { useRef } from 'react';
import { Chart82, type Chart } from '@82chart/react';

function Report({ data }) {
  const ref = useRef<Chart>(null);
  return (
    <>
      <Chart82 ref={ref} type="line" data={data} />
      <button onClick={() => ref.current?.download('png', 'report')}>PNG</button>
    </>
  );
}
```