무한 스크롤 구현하기

올리브영의 검색 결과 페이지에서 무한 스크롤을 구현하는 방법을 소개합니다. 이 페이지는 Next.js, react-query, Typescript를 사용하여 구성되었습니다. 무한 스크롤은 useInfiniteQuery를 통해 구현하며, 새로운 상품 목록은 스크롤이 끝에 도달했을 때 불러옵니다.

useInfiniteQuery 사용법

• fetchNextPage: 다음 페이지 요청
• hasNextPage: 다음 페이지 존재 여부 확인
• isFetchingNextPage: 페이지를 불러오는 중인지 여부 확인

react-intersection-observer의 useInView 훅을 활용하여 뷰포트에 마지막 요소가 보일 때 fetchNextPage를 실행합니다.

이전 스크롤 위치 유지

상품 상세페이지에서 돌아올 때 스크롤 위치를 유지하기 위해 세션 스토리지를 사용하여 클릭한 상품의 인덱스와 스크롤 Y값을 저장합니다. 이를 통해 사용자가 이전에 보던 위치로 돌아갈 수 있도록 합니다.