이번에는 간단하게 내가 사용해본 React에서 사용할 수 있는 그래프/차트 라이브러리 중 2 종류를 간단하게 비교해볼려고 한다.
React에서 사용할 수 있는 그래프/차트 라이브러리는 많지만 그 중에서도 자주 사용하는 종류를 사용해보았다.
1. React-chartjs
처음으로 사용해본 라이브러리는 React-chartjs-2 였다.
유명하기도 하고, 다른 라이브러리에 비하여 가볍다고 해서 사용을 했었다.
설치는 아래의 방식으로 설치할수 있다.
npm install --save chart.js react-chartjs-2
아래의 페이지에서 예시를 확인할 수 있다.
https://react-chartjs-2.js.org/examples/
Examples | react-chartjs-2
List of react-chartjs-2 usage examples.
react-chartjs-2.js.org
- 장점
사용해본 결과 확실히 다음에 설명할 nivo보다 가볍고, 어느정도 커스텀이 가능하며, 예시가 잘 나와있어서 사용하기에 편하다.
그래프와 차트에 입력되는 label이나 값들이 배열 형태로 들어가는 경우가 많아서, 함수를 사용해서 형태를 만들기에는 편하고, 색상의 커스텀도 마음대로 할 수 있어 좋았다.
- 단점
가벼운만큼 색상을 직접 다 구성해야되서 색상 배치를 생각하는게 어려웠고, 배열형태이다보니, 실시간으로 값이 변화하며, 입력값의 유무도 바뀌는 종류의 데이터의 경우에는 형태를 만들기가 좀 더 어려웠다.
2. Nivo
2번쨰로 사용해본 라이브러리는 Nivo 였다. 데이터가 계속 변화하고, 특정 경우에는 일부 항목에만 데이터가 비어있는 경우도 있다보니, 배열형태로 구성하는 react-chartjs의 경우, 데이터 형태를 만들기에 좀 더 복잡하여 Nivo를 사용해보게 되었다.
npm install @nivo/core // 기본 설치
//사용할 테이블 종류에 따라 추가 설치
npm install @nivo/bar
npm install @nivo/pie
아래의 페이지에서 예시를 확인할 수 있다.
https://nivo.rocks/components/
Components | nivo
nivo.rocks
- 장점
nivo의 가장 큰 장점은 편리성이라고 생각한다. 위의 nivo 페이지에 들어가면 nivo에서 제공하는 그래프 및 차트들을 확인할 수 있고, 종류마다 들어가면 사용법부터 데이터 형태를 확인할 수 있고, 직접 예시를 확인하면서 단순한 클릭을 통하여 쉽게 커스텀을 할 수 있는 것이 장점이다.
- 단점
그래프를 한 페이지에 여러개를 사용해야되서 여러 그래프 및 차트를 출력하니, 많은 데이터를 그리기때문에 지연이 발생하기 시작했다.
여러 조건에 따라 실시간으로 데이터가 변경이 되어서 데이터가 변경될때마다 출력하는데 시간도 오래걸리고, 페이지에서 그래프를 그리는 동안 정지하는 문제가 있었다.
이러한 문제들은 그래프별로 Components를 나누고 그래프 갯수를 줄이면 어느정도는 해결할 수 있다.
각 라이브러리마다 장점과 단점이 있기때문에 현재 만들고 싶은 페이지에 따라서 라이브러리를 선택하여 사용할 수 있다고 생각한다.