React의 windowing?
React 공식 문서는 windowing에 대해 다음과 같이 설명하고 있다.
애플리케이션에서 긴 목록(수백 또는 수천행)을 렌더링하는 경우 ‘windowing’이라는 기법을 사용하는 것을 추천합니다. 이 기법은 주어진 시간에 목록의 부분 목록만 렌더링하며 컴포넌트를 다시 렌더링하는 데 걸리는 시간과 생성된 DOM 노드의 수를 크게 줄일 수 있습니다.
windowing 기법을 사용하면 사용자가 마운트 시 전체 목록이 로드될때 까지 기다리지 않아도 되어서 성능을 향상시킬 수 있지만, 스크롤 시 개별 목록이 로드될 때 까지 기다려야하기 때문에 목록의 로드되는 타이밍을 뒤로 미루는 것으로도 볼 수도 있다.
그렇기 때문에 무조건적으로 windowing기법을 사용하는 것보다는 프로젝트의 목적과 로드해야할 전체 목록의 크기에 따라 windowing을 적용할 지는 결정해야한다고 생각한다.
windowing 기능을 제공하는 React 라이브러리로 잘 알려진 것들로는raect-window, react-virtualized가 있다.
react-window
react-window는 react-virtualized보다 경량화된 라이브러리이고, 목록 속 아이템의 크기를 사전에 알 수 있는 경우에 사용한다.
물론 react-window를 사용해 리스트를 가상화해 아이템의 크기를 구할 수 있지만, 이는 react-virtualized에서도 제공하고 있기때문에 react-window에 추가기능을 구성하는 것보다는 react-virtaulized를 사용하는게 더 좋을 것 같다.
react-virtualized
만약 목록 속 아이템의 크기를 렌더링되기 전에 알 수 없는 경우라면 react-virtualized를 사용할 수 있다.
🖱️react-virtuazlide 사용법,예제 보러가기
notion프로젝트에서 페이지의 내용을 보여주는 부분에서 react-virtualized의 CellMeasurer를 사용해 windowing을 시도해봤다.
windowing은 잘 작동했지만 스크롤이 마지막에 다다랐을 때나 스크롤 속도가 빠르면 가끔 스크롤바나 아이템의 위치들이 화면에서 빠르게 깜빡?이는 오류가 있었다.
아마도 해당 상황들에서는 아이템의 크기를 가상화에서 계산해야 하는데 요규하는 계산 속도가 빨라서 오류가 생기지 않았나 싶다.
이러한 문제는 UX측면에서 좋지 못하기 때문에 배포 버전에서는 react-virtualized를 사용하지 않기로 했다.
