회사에서 진행 중인 프로젝트에서 데이터 시각화를 위해 차트와 그리드 라이브러리에 대해 조사해야하는 일이 있었다.
당장 구글에만 쳐봐도 라이브러리를 비교해놓은 자료들은 많이 있었지만, 그래서 이게 좋다! 라는 결론까지 정리해놓은 글은 잘 보이지 않아서 내가 직접 정리하기로 했다 ..
고려할 점
차트 라이브러리를 선정할 때는 많은 고민이 필요하다. 그 이유는 각 라이브러리마다 작업 방식과 스타일 커스텀의 자유도 여부 등을 고려해야하기 때문이다. 또한 리액트 기반의 프로젝트인 만큼 컴포넌트 친화적인 라이브러리를 사용하는 것이 좋은데, Grid, Axis, Legend와 같은 각각의 요소들을 컴포넌트로 제공해주어 독립적으로 운영할 수 있게 해주기 때문이다.
Chart
1. Visx
- 왠만한 것은 다 됨
- 완전한 React 기반 (샘플 코드 타입스크립트로 제공)
- 초기 설정과 사용이 다른 라이브러리보다 어려움
- 문서 부족
- 그림판에 그리듯이 상자와 선을 하나하나 그려주어야 해서 코드가 지저분하다고 느낄 수 있음
2. Antv
- 꾸준한 업데이트
- 실제로 많은 기업에서 사용 중
- 더 다양한 차트 유형과 시각화 옵션 제공
3. Apexcharts
- 간결하고 사용이 비교적 편리함 -> 빠른 차트 구현에 적합
- React 뿐만이 아닌 다양한 프로젝트 유형에 적합
4. Bizcharts
- 기본적인 작업을 쉽게 수행할 수 있음
- 다양한 차트 유형을 지원
- 다른 라이브러리에 비해 스타일링 및 옵션이 제한적일 수 있음
Grid
1. React-data-grid
- 가장 기초적인 데이터 그리드
- 다른 라이브러리에 비해 가벼움
- 상호작용성 부족 (데이터 편집, 필터링과 같은 기능은 개발자가 별도 추가 해야함)
2. React-spreadsheet-grid
- Excel 스타일의 기능을 제공
- Excel과 유사한 표 형태의 작업이 가능
- 다른 라이브러리에 비해 무거움
3. Ag-grid
- 다른 라이브러리보다 더 다양한 기능을 제공
- 일부 고급 기능은 비용이 발생
- 초기 구성 및 사용이 어려울 수 있음
결론
Chart
- React 타입스크립트 기반 프로젝트에서 커스텀 차트 개발, 다양한 상황에 활용 -> Visx
- 데이터 시각화를 강조하고 상호 작용성이 필요, 다양한 상황에 활용 -> Antv
- 간단하고 빠른 차트 구현 -> Apexcharts, bizcharts
개인적인 순위
- Antv > Visx > bizcharts > apexcharts
Grid
- 다양한 기능 필요 -> Ag-grid
- 간단한 테이블 제공 -> React-data-grid
개인적인 순위
- Ag-grid > React-data-grid
삽질 전문가