가상스크롤 + 무한스크롤 구현: React Query 사용법

가상스크롤을 구현해보자.

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

프론트엔드 개발자

  • 중급 이상의 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) 개선

결론

  • 가상 스크롤 + 무한 스크롤 조합으로 대규모 데이터 렌더링 성능 최적화 가능
  • useVirtualizeruseInfiniteQuery 활용 필수
  • 다음 단계: 스크롤 위치 복원 기능 구현 고려 (로컬스토리지 사용 추천)