개요
InfiniteScrollPage는 대용량 데이터를 효율적으로 처리하기 위한 가상화(Virtualization) 기법을 시연하는 React 컴포넌트입니다. 10만 개의 mock 데이터를 사용하여 무한 스크롤과 성능 최적화를 실습할 수 있으며, 멀티 리스트 관리와 아이템 선택/이동 기능을 포함한 고급 기능을 제공하는 교육용 페이지입니다.
주요 기능
1. 가상화 구현
- 라이브러리:
@tanstack/react-virtual 사용
- 데이터 규모: 100,000개의 mock 아이템
- 렌더링 최적화: 화면에 보이는 영역의 아이템만 DOM에 렌더링
- 성능 향상: 메모리 사용량 최소화 및 렌더링 성능 개선
2. 실시간 성능 모니터링
- PerformanceMonitor 컴포넌트: 토글 가능한 성능 모니터
- 성능 지표 표시: 렌더링된 아이템 수, 전체 아이템 수, 가상 높이, 렌더링 비율
- 개발자 도구 연동: Performance 탭을 통한 실시간 성능 분석 가이드
3. 멀티 리스트 가상화
- 4개의 독립적인 가상화 리스트: 각각 별도의 virtualizer 인스턴스 관리
- 대용량 데이터 분산: 첫 번째 리스트에 10만개 아이템 초기화
- 독립적인 스크롤: 각 리스트별 개별 스크롤 및 가상화 처리
4. 아이템 선택 및 이동
- 개별 선택: 클릭으로 아이템 선택/해제 토글
- 전체 선택/해제: 리스트별 전체 선택 및 해제 기능
- 선택 상태 유지: 가상화로 DOM에서 제거되어도 선택 상태 보존