# React 차트 라이브러리 – 82chart로 차트 만들기

> React 컴포넌트 <Chart82> 로 막대·선·파이 차트 만들기. Next.js에서도 동작하고 만·억 단위가 기본.

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

`@82chart/react` 는 82chart를 React 컴포넌트 `<Chart82>` 로 감싼 패키지입니다. React 18 이상에서 동작하고, `data` 객체를 넘기면 그리며 새 객체가 오면 다시 그립니다. 차트는 마운트된 뒤에 만들어지므로 Next.js 같은 서버 렌더링에서도 안전합니다.

## React 차트 라이브러리 고르기

React에서 많이 쓰는 차트는 JSX로 축·선을 조립하는 Re●●arts(SVG, MIT), Chart.●s를 감싼 react-chart●s-2(canvas, MIT), EC●●rts를 감싼 래퍼(canvas·SVG, Apache-2.0)입니다. 82chart는 옵션 객체 하나로 그리는 방식이고, 확대·크로스헤어·주석·PNG/SVG/CSV 내보내기·만·억 단위·키보드 접근성이 플러그인 없이 들어 있습니다(MIT). 수만 개가 넘는 점이나 지도가 필요하면 canvas 계열이 낫습니다. 자세한 표는 [차트 라이브러리 비교](https://82chart.com/compare/)에 있습니다.

```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>
    </>
  );
}
```

## 자주 묻는 질문

### React 차트 라이브러리는 무엇을 추천하나요?

JSX로 차트를 조립하는 방식이 익숙하고 기본 차트면 충분하다면 Re●●arts, canvas로 아주 많은 점을 그려야 하면 Chart.●s나 EC●●rts 래퍼가 무난합니다. 한국어 관리자 화면·보고서에서 만·억 단위, 확대, 내보내기, 접근성을 추가 비용 없이 쓰려면 82chart가 맞습니다. 넷 모두 회사 서비스에 무료로 쓸 수 있는 오픈소스입니다([라이선스 정리](https://82chart.com/docs/chart-license-guide/)).

### Next.js에서 "window is not defined" 오류가 나요.

`@82chart/core` 는 import 할 때 `window` 나 `document` 를 건드리지 않고, `<Chart82>` 는 마운트된 뒤에 차트를 만듭니다. App Router에서는 `<Chart82>` 를 쓰는 파일 맨 위에 `'use client'` 를 넣으세요(훅을 쓰는 컴포넌트라 서버 컴포넌트에서는 쓸 수 없습니다). 그래도 오류가 나면 `createChart` 를 컴포넌트 밖(모듈 최상단)에서 부르고 있지 않은지 확인하세요. 서버에서 그림으로 미리 그리는 방법은 [Next.js·SSR에서 차트 그리기](https://82chart.com/docs/ssr/)에 있습니다.

### 실시간으로 바뀌는 차트는 어떻게 만드나요?

`realtime` 옵션을 켜고, `ref` 로 받은 차트 인스턴스에 `chart.append(points)` 를 부르면 새 점이 이어 붙고 오래된 점은 창 밖으로 빠집니다. 매번 배열 전체를 새로 만들어 상태로 넘기는 것보다 가볍습니다. 값 전체를 바꿀 때는 새 `data` 객체를 넘기면 이전 값에서 부드럽게 바뀝니다([실시간 차트](https://82chart.com/docs/realtime/)).