차트를 하나하나 디자인할 수 있겠지만, 귀찮을 때!!! 그냥 chart.js로 그래프를 넣어버리자!!! 0. 코드 파일 생성하기 오늘 만들 친구는 코드 컴포넌트입니다. Code component 파일을 만들어줍니다. 저는 파일 이름을 Chart라고 지었습니다. 그리고 오늘 저는 도넛 차트를 그릴 겁니다! 1. chart.js 사용 세팅 chart.js를 사용하기 위해서는 아래의 것들을 import 해야 합니다. import { Chart as ChartJS, LinearScale, ArcElement, CategoryScale, PointElement, LineElement, Tooltip, Legend, } from "chart.js" ChartJS.register( ArcElement, Tooltip..

들어가기 앞서… React 경험자들에게: React를 써보신 분들은 알겠지만, React에서는 그냥 변수를 화면에 띄웠을 때 그 변수의 값이 바뀌어도 재렌더링이 안되기 때문에 useState를 씁니다. Framer에서도 마찬가지로 var로 선언된 변수는 화면에 바로바로 반영되지 않기 때문에, createStore를 써야 합니다. React 비경험자에게: React는 딱 1개의 페이지가 렌더링 되어 브라우저에서 보이게 됩니다. 그리고 필요할 때마다 재렌더링됩니다. 만약 특정 값이 변화하고 이를 화면에도 보여줘야 하는 상황일 때, React에서는 useState라는 훅을 사용합니다. 왜냐하면 var로 선언된 변수는 값이 변경되어도 다시 렌더링 되지 않기 때문이에요. var로 선언된 것과 같이 변수지만, 이 ..