tutorial
가상화 리스트 구현: 대용량 데이터 렌더링 최적화 가이드
10만 개 이상의 아이템도 60FPS로 렌더링하는 가상화 리스트 구현 방법. react-window, react-virtuoso, TanStack Virtual을 활용한 최적화 전략.
럿지 AI 팀2025-01-1515min read
+
아이템 렌더링
FPS
스크롤 성능
%
메모리 절감
ms
초기 렌더
가상화가 필요한 이유
문제점
- • 10,000개 DOM 노드 생성
- • 메모리 사용량 폭증
- • 스크롤 렉 발생
- • 초기 로딩 지연
해결책
- • 화면에 보이는 것만 렌더링
- • 일정한 메모리 사용
- • 60FPS 스크롤
- • 즉각적인 로딩
인기 라이브러리
인기 라이브러리
react-window가볍고 빠른 가상화 (~6KB)
고정 높이react-virtuoso동적 높이 지원
자동 크기@tanstack/virtual프레임워크 무관
헤드리스react-virtualized풀 기능 (무거움)
테이블, 그리드구현 단계
1
컨테이너 높이 설정
height: 100vh 또는 고정값
2
아이템 높이 계산
고정 또는 동적 높이 결정
3
가시 영역 계산
scrollTop + containerHeight
4
오버스캔 적용
버퍼 아이템 추가 렌더링
5
위치 변환 적용
translateY로 위치 조정
최적화 체크리스트
☑memo로 아이템 컴포넌트 래핑
☑불변 데이터 구조 사용
☑오버스캔 값 조정 (5-10)
☑키 속성에 고유 ID 사용
☑무한 스크롤 구현
☑스켈레톤 로딩 추가
대용량 리스트 최적화 마스터
TanStack Virtual 문서#Virtualization
#Performance
#React
#Frontend
#Optimization