React 리스트 가상화 판단

목록 규모 측정

렌더되는 항목 수, DOM 노드 수, 스크롤 중 commit 시간을 확인합니다.

measure

화면 주변 항목만 렌더링해 DOM과 layout 비용을 줄입니다.

virtualize

고정 높이인지 동적 높이인지에 따라 측정과 캐시 전략이 달라집니다.

height

스크롤 깜빡임과 렌더 비용 사이에서 여분 렌더 범위를 조절합니다.

overscan

key, focus, selection, scroll restore가 재렌더링 중에도 유지되는지 확인합니다.

state

Pagination

데이터 양 자체를 나눔 검색 결과와 서버 조회에 맞지만 연속 스크롤 경험은 약해질 수 있습니다.

URL 상태와 연결

Virtualization

렌더링 범위 축소 수천 개 항목을 보여야 할 때 DOM 비용을 크게 줄입니다.

접근성 확인

Memoization

항목 렌더 반복 감소 row props가 안정적이고 row 컴포넌트가 비쌀 때 효과가 있습니다.

key 안정성 필수

스크롤 감각 빠른 스크롤에서 빈 영역이나 점프가 보이지 않아야 합니다.

포커스 보존 키보드 탐색과 선택 상태가 가상화로 사라지지 않게 합니다.

동적 높이 이미지 로드 뒤 높이가 바뀌면 측정 캐시를 갱신해야 합니다.