📚 Reference

📜 Chapter

react-window

react-virtualized

react-virtuoso

FlatList

‣

‣

List virtualization

• List virtualization
• 리스트 가상화
• 스크롤 가능한 대규모 리스트(UI)를 효율적으로 렌더링하기 위한 핵심 성능 최적화 기법이다.
• 수천 개의 리스트 아이템 중 화면에 보이는 영역(뷰포트)만 렌더링하고, 보이지 않는 항목들은 실제 DOM에 렌더링하지 않는 방식이다.
• 전체 리스트를 실제로 전부 렌더링하지 않고, 사용자에게 보이는 일부만 가짜로 보여주는 개념이다.
• 리스트나 테이블처럼 항목이 아주 많을 때, 화면에 보이는 부분만 렌더링하고 보이지 않는 항목은 DOM에 만들지 않아서 성능과 메모리를 절약하는 기법이다.

동작 방식

1. 뷰포트 계산
   • 스크롤 위치를 기준으로 현재 화면에 보여야 할 아이템의 인덱스 범위를 계산.
2. 윈도우(Window) 렌더링
   • 해당 인덱스 범위의 아이템만 실제 DOM에 렌더링.
3. Placeholder 영역 유지
   • 가상으로 전체 리스트의 높이를 계산해서, 스크롤바는 전체 길이 그대로 유지.
4. 스크롤 이동 시 업데이트
   • 스크롤할 때마다 보여야 할 인덱스 범위를 재계산하고, 기존 DOM을 재활용.

필요한 이유