실전프로젝트 피드 로직

 

리액트와 Next.js를 사용한 인피니티 스크롤 구현하기

const {
  data,
  isLoading,
  isSuccess,
  isFetchingNextPage,
  fetchNextPage,
  hasNextPage,
} = useInfiniteQuery('feeds', ({ pageParam = 1 }) => getFeed({ pageParam }), {
  getNextPageParam: (lastPage, allPages) => {
    const morePagesExist = allPages.length < lastPage.totalPages;
    return morePagesExist ? allPages.length + 1 : false;
  },
});

첫 번째 매개변수로 쿼리 키, 두 번째 매개변수로 데이터 패치 함수를 받기.

세 번째 매개변수에는 옵션 객체.

getNextPageParam 함수를 사용해서 다음 페이지의 파라미터 값을 결정.

 

Intersection Observer API를 활용하면 웹 페이지의 특정 요소가 화면에 보이거나

보이지 않게 될 때 알수 있음.

이 기능은 인피니트 스크롤 구현에 필요한 핵심.!

 <InView /> 컴포넌트가 화면에 보일 때마다 handleFetchMore() 함수가 호출되어 다음 페이지의 데이터를 불러옴.

 {hasNextPage && (
        <InView
          as="div"
          onChange={(inView, entry) => {
            if (inView) handleFetchMore();
          }}
          style={{ height: '200px', opacity: 0 }}
        />
      )}

사용자가 다른 페이지로 이동한 후에 다시 원래의 페이지로 돌아올 때,

이전에 보던 위치를 유지하기 위해 스크롤 위치를 저장하고 복원하는 기능을 구현.

세션스토리지와 window.scrollTo() 함수를 사용하여 구현.

페이지가 언마운트되기 전에 세션 저장소에서 scrollPos 값을 삭제.

이렇게 하면 새로고침할 때마다 스크롤이 맨 위로 간다구~

useEffect(() => {
  const scrollPos = sessionStorage.getItem('scrollPos');
  if (scrollPos) {
    window.scrollTo(0, parseInt(scrollPos));
  }
  window.addEventListener('beforeunload', () => {
    sessionStorage.removeItem('scrollPos');
  });
}, [data]);