
2
AI 요약
이 글은 AI가 원문을 분석하여 핵심 내용을 요약한 것입니다.
무한 스크롤 구현하기
올리브영의 검색 결과 페이지에서 무한 스크롤을 구현하는 방법을 소개합니다. 이 페이지는 Next.js, react-query, Typescript를 사용하여 구성되었습니다. 무한 스크롤은 useInfiniteQuery
를 통해 구현하며, 새로운 상품 목록은 스크롤이 끝에 도달했을 때 불러옵니다.
useInfiniteQuery 사용법
fetchNextPage
: 다음 페이지 요청hasNextPage
: 다음 페이지 존재 여부 확인isFetchingNextPage
: 페이지를 불러오는 중인지 여부 확인
react-intersection-observer의 useInView
훅을 활용하여 뷰포트에 마지막 요소가 보일 때 fetchNextPage
를 실행합니다.
이전 스크롤 위치 유지
상품 상세페이지에서 돌아올 때 스크롤 위치를 유지하기 위해 세션 스토리지를 사용하여 클릭한 상품의 인덱스와 스크롤 Y값을 저장합니다. 이를 통해 사용자가 이전에 보던 위치로 돌아갈 수 있도록 합니다.