핵심 요약
올리브영의 검색 결과 페이지에서 useInfiniteQuery 기반 무한 스크롤을 구현하고, 뒤로가기 시 이전 목록과 스크롤 위치를 유지하도록 설계했습니다.
구현 방법
- 페이지당 40개 아이템으로 데이터 페이징하기 위해 useInfiniteQuery와 getNextPageParam/getPreviousPageParam를 구성
- react-intersection-observer의 useInView으로 뷰포트 진입 시 fetchNextPage를 트리거
- 로딩 중에는 Skeleton을 보여주고, 로딩이 끝나면 상품 카드를 렌더링
주요 결과
- 무한 스크롤 도입으로 추가 데이터 로드 흐름이 원활해짐
- 뒤로가기로 검색 결과 페이지에 재진입할 때 이전 목록과 스크롤 위치를 복원하는 UX 개선
