pile·
프론트엔드·oliveyoung올리브영 테크블로그·

useInfiniteQuery로 무한스크롤 구현하기

문제검색 결과 페이지에 무한 스크롤을 적용하면서, 상세 페이지를 다녀와도 이전 상품 목록과 스크롤 위치가 그대로 유지되어야 했다. 게다가 레거시 상세 페이지와 새 아키텍처의 검색 페이지가 별개 프로젝트여서 상태 복원이 더 까다로웠다.
접근Next.js 12·React Query 3.39 환경에서 `useInfiniteQuery`로 페이지네이션을 관리하고, `react-intersection-observer`의 `useInView`로 마지막 카드가 뷰포트에 들어오면 `fetchNextPage`를 호출했다. 뒤로가기 복원은 세션 스토리지에 클릭한 상품 인덱스와 scrollY를 저장한 뒤, `QueryClient.prefetchInfiniteQuery`로 해당 지점까지 데이터를 미리 채우고 `setQueryData`로 캐시에 주입한 다음 타임아웃으로 스크롤을 복원했다.
결과검색→상세→뒤로가기 시 목록과 스크롤 위치가 자연스럽게 유지되는 무한 스크롤이 완성됐고, 검색창 첫 진입 시 세션 스토리지를 비워 검색어 간 상태 누수도 막았다.
oliveyoung
올리브영 테크블로그 블로그
원문은 여기서 이어서 읽을 수 있어요
원문 읽기
읽음 (0)

이 글과 비슷한

  1. 프론트엔드·LINE EngineeringLINE Engineering·

    AI로 웹 엔지니어 없이 LINE 앱 안에서 그룹 영상 통화 서비스 만들기

    LINE Planet 팀의 PM과 Android 엔지니어 두 명이 웹 전문 엔지니어 없이 LINE 앱 내에서 그룹 영상 통화 서비스를 개발한 과정을 다룬다. LIFF(LINE Front-end Framework)와 LINE Planet SDK를 활용해 React/Vite 기반 웹 앱을 구성했고, Firebase Cloud Functions로 별도 서버 인프라 없이 구현을 완료했다.

    #react#webrtc#firebase+2