[Virtualized List] #3. 가상리스트 라이브러리 비교

 💡 2022/11/27 기준으로 작성한 글이며, 이후 라이브러리 업데이트로 특정 기능이 추가되었을 수 있습니다.

Virtualized List 라이브러리 비교

npm trends라는 사이트를 이용하여, 4개의 Virtualized List 라이브러리를 비교해보겠습니다.

• react-window와 react-virtualized의 관계
  • 둘다 같은 개발자가 만든 라이브러리이며 react-virtualized에서 필요한 부분만 빼내어 만든 라이브러리가 react-window입니다. 자세한 내용은 여기를 참조하면 됩니다.

점유율로 따지면 현재 기준으로 @tanstack/virtual-core 를 사용하는 것은 early stage 인 듯합니다. react-virtualized와 react-window는 워낙 유명한 라이브러리라 점유율이 높고, 요즘 부상하고 있는 라이브러리가 react-virtuoso입니다.

이름	마지막 버전 업데이트	github repo	용량	위클리 다운로드
react-window	@2022/11/01	https://github.com/bvaughn/react-window	21.3	1489000
react-virtualized	@2022/04/23	https://github.com/bvaughn/react-virtualized	121.3	1526500
🔥 react-virtuoso	@2022/11/23	https://github.com/petyosi/react-virtuoso	61.9	418000
tanstack/virtual-core	@2022/11/25	https://github.com/TanStack/virtual	9.8	57000

react-virtualized의 경우 이슈가 많지만, 마지막 버전 업데이트가 7개월 전으로 관리가 되고 있다고 생각하기 어렵습니다. react-window는 한달 전, react-virtuoso는 4일 전으로 최근에 업데이트 되었음 을 확인할 수 있습니다.

압축된 라이브러리 용량을 기준으로 보면 react-virtualized는 다른 라이브러리에 비해 확연히 용량이 큽니다. react-window와 react-virtuoso를 비교하면 3배 가량 차이가 나지만, react-window의 경우 필요한 기능을 다른 3rd party 라이브러리와 함께 사용해야 하는 경우가 많기 때문에 합치면 용량이 더 증가합니다.

 

정리하자면, 세부적인 기능까지 필요한 경우 react-virtualized와 react-virtuoso를 비교하여 원하는 라이브러리를 선택하면 되고, 간단한 기능 구현은 react-window를 활용하면 좋을 듯 합니다.

세부적인 기능까지 필요하다고 가정하고 react-virtualized와 react-virtuoso를 저번 챕터에서 리스팅한 기능 구현에 초점을 맞춰 비교해보겠습니다.

 

react-virtualized vs react-virtuoso

기능	react-virtualized	react-virtuoso
화면에 보이는 아이템만 렌더링	O	O
페이지 재방문 시 스크롤 위치 유지 🔥	별도 구현 필요	별도 구현 필요
리스트 스크롤 과 페이지 스크롤 연동 🔥	https://github.com/bvaughn/react-virtualized/blob/master/docs/WindowScroller.md component	https://virtuoso.dev/virtuoso-api-reference/#virtuoso-properties props
열의 수를 반응형 으로 조정	https://github.com/bvaughn/react-virtualized/blob/master/docs/MultiGrid.md 이용	https://virtuoso.dev/grid-responsive-columns/ 이용 but, useWindowScroll 사용 시에는 직접 구현 (현재 버그)
아이템 높이가 달라도 됨 🔥	https://github.com/bvaughn/react-virtualized/blob/master/docs/CellMeasurer.md component	자동 지원
빠르게 스크롤 중일 때 다른 UI 표시	https://github.com/bvaughn/react-virtualized/blob/master/docs/ScrollSync.md component	https://virtuoso.dev/scroll-seek-placeholders/ props

🔥 표시된 기능들이 구현이 어렵다고 판단한 기능들입니다. 저는 react-virtuoso 가 보다 구현이 쉽고 다양한 기능을 제공하는 것으로 판단하여 react-virtuoso를 사용하고 있지만, 필요한 기능이 맞추어 적합한 라이브러리를 선택하시길 바랍니다.