bvaughn/react-window

개요 대용량 리스트와 테이블 데이터를 효율적으로 렌더링하는 React 컴포넌트 라이브러리다. 17,100+ stars를 보유한 react-virtualized의 경량 후계자로, 화면에 보이는 항목만 렌더링하는 윈도잉 기법을 사용한다.

핵심 내용 FixedSizeList, VariableSizeList, FixedSizeGrid, VariableSizeGrid 네 가지 컴포넌트를 제공한다. 뷰포트에 보이는 아이템만 DOM에 마운트하고 스크롤 위치에 따라 동적으로 교체해 수만 개의 아이템도 부드럽게 처리한다.

기존 대비 차별점 전임 라이브러리인 react-virtualized보다 번들 크기가 훨씬 작고 API가 단순하다. React Hooks와 잘 호환되며 트리 쉐이킹이 가능해 필요한 컴포넌트만 번들에 포함할 수 있다.

활용 가능성 데이터 테이블, 무한 스크롤 피드, 대용량 로그 뷰어, 가상화된 드롭다운 등 수천~수만 건의 데이터를 렌더링하는 웹 앱에서 성능 병목을 해결하는 데 활용할 수 있다.

참고 자료 - 원본