목록 보기
useInfiniteQuery로 무한스크롤 구현하기
프론트엔드

useInfiniteQuery로 무한스크롤 구현하기

올리브영
올리브영
2023년 10월 4일

두줄요약

무한스크롤은 `useInfiniteQuery`와 `useInView`로 구현했습니다. 뒤로가기는 세션 스토리지와 QueryClient 캐시로 상품 목록과 스크롤을 복원했습니다.

핵심 내용

  • useInfiniteQuery와 useInView로 검색 결과 페이지의 무한스크롤 구현
  • 레거시 API의 pagination 부재로 getNextPageParam에서 마지막 페이지 직접 판별
  • 세션 스토리지와 useQueryClient로 뒤로가기 시 이전 상품 목록과 스크롤 위치 유지
  • prefetchInfiniteQuery, getQueryData, setQueryData로 클릭한 상품 인덱스까지 선로딩 후 복원

다음 읽기

#React 주제를 이어서 읽기

프론트엔드 개발자를 위한 5가지 스크롤 복구 시나리오와 실전 코드 팁

SPA 환경에서 스크롤 복구가 어려운 이유와 상황별 해결 방법을 정리했습니다. React Query, 무한 스크롤, 가상화 리스트에서의 실전 팁도 함께 소개했습니다.

올리브영
올리브영
프론트엔드

댓글 0개

댓글을 작성하려면 로그인이 필요합니다.

댓글을 불러오는 중...