가상스크롤을 구현해보자.
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
프론트엔드 개발자
- 중급 이상의 React 경험자에게 유용
- 무한 스크롤 성능 최적화 필요성 이해자
- 가상 스크롤 구현 기법 학습자
핵심 요약
- 무한 스크롤은 초기 로딩 속도 개선에 유리하지만 DOM 요소 누적으로 인해 성능 저하 발생
- 가상 스크롤(Virtual Scroll)은 보이는 영역만 렌더링하여 DOM 노드 수 최소화 및 렌더링 성능 향상
useInfiniteQuery
+useVirtualizer
조합으로 가상 + 무한 스크롤 구현 가능
섹션별 세부 요약
###1. 무한 스크롤의 한계
- 무한 스크롤은 초기 로딩 속도 개선과 사용자 경험 향상에 유리
- 하지만 DOM 요소 누적으로 인해 브라우저 성능 저하 및 렌더링 에러 발생 가능성
- 수백 개 이상의 데이터 처리 시 성능 문제 발생
###2. 가상 스크롤의 원리
- 보이는 영역의 데이터만 렌더링하고, 보이지 않는 요소는 DOM에서 제거
scrollTop
과 아이템 높이를 기준으로 현재 화면에 보여줄 데이터의 시작/끝 인덱스 계산- DOM 노드 수 최소화로 수천 개 데이터 처리 시 성능 유지
###3. 무한 스크롤 구현 방식
- Intersection Observer API 사용: 마지막 요소가 뷰포트에 진입 시 다음 데이터 요청
useInfiniteQuery
훅 사용: API 요청, 데이터 병합, 로딩 상태 자동 관리bottomRef
로 스크롤 하단 감지 후fetchNextPage()
호출
###4. 가상 스크롤 구현 방식
useVirtualizer
로 전체 유저 수 기준으로 렌더링해야 할 줄 수 계산absolute
위치로 화면에 보이는 줄만 렌더링getVirtualItems()
의 마지막 index가 전체 데이터 끝에 도달 시fetchNextPage()
호출data.pages.flat()
로 기존 데이터와 새 데이터 합쳐 렌더링
###5. 성능 개선 결과
- DOM 요소 누적 없음으로 렌더링 속도 유지
- 성능 점수 87 → 92점 향상
- 사용자 경험(UX) 개선
결론
- 가상 스크롤 + 무한 스크롤 조합으로 대규모 데이터 렌더링 성능 최적화 가능
useVirtualizer
와useInfiniteQuery
활용 필수- 다음 단계: 스크롤 위치 복원 기능 구현 고려 (로컬스토리지 사용 추천)