리액트에서 Chart.js'만' 사용하기 (useRef)

물론 리액트용 라이브러리인 react-chartjs-2가 있다!

있는데 모르고 있었으니까. 알았으면 그냥 react-chartjs-2 썼을 거다.

---

이럴 때 쓰라고 useRef가 있다.

import { ElementRef, useEffect, useRef } from "react";
import Chart from "chart.js/auto";

const PieChart = () => {
    const chartRef = useRef<ElementRef<"canvas">>(null);
    useEffect(() => {
    	const ctx = chartRef.current;
        if (ctx === null) return;
        
        const chart = new Chart(ctx, {
        	...
        });
        
        return () => {
        	chart.destroy();
        }
    }, [chartRef]);
    
    return <canvas ref={chartRef} />
}

(타입스크립트)

 

리액트에서 Element에 대한 직접 참조를 할 때는 꼭 ref를 쓰자.

코드가 작동이 이상하게 돼서 어떻게 짜놨나 봤더니 document.querySelector 써서 이렇게 저렇게..