자바스크립트 생태계에는 많은 차트 라이브러리가 포함되어 있지만, 실제 사용에서 잘 작동하는 완전한 기능을 갖춘 차트 API를 만드는 것은 어렵습니다. 이 글에서는 이 중 좋은 것 중 하나인 Recharts에 대한 실질적인 소개를 합니다. Recharts는 잘 알려진 프레임워크인 D3의 React 전용 버전입니다. 이를 테스트하기 위해 우리는 암호화폐의 가격과 거래량 데이터를 사용할 것입니다.

프로젝트를 설정하기 위해 Node/NPM이 이미 설치되어 있어야 합니다. 설치가 완료되면, 필요한 의존성을 추가할 수 있습니다. 다음으로, CoinGecko API에서 데이터를 불러와서 표시하는 데 사용됩니다. 데이터를 불러오고 표시하기 위해, 프로젝트의 파일에 다음 코드를 넣고 애플리케이션을 실행하면 됩니다.

이제 응답에서 가격 데이터를 간단한 선 차트에 연결해봅시다. 주요 업데이트는 Recharts 컴포넌트를 가져오는 것, 상태 변수 훅을 만드는 것, 마크업을 정의하는 것, 그리고 상태를 그것에 연결하는 것입니다. 마크업의 단지 일곱 줄로, 우리는 꽤 멋진 모양과 기능을 갖춘 차트를 얻었습니다. 차트 레이아웃을 정의하는데 도움이 되는 여러 중첩된 자식들이 있습니다. 이제 시간 프레임을 조정하는 기능을 추가해봅시다. Recharts는 이를 매우 쉽게 만들어줍니다. 이를 위해 필요한 변경 사항을 볼 수 있습니다.