React Query로 infinite scroll(무한 스크롤) 구현하기

🚩 페이지 하단에 도달했는지 확인하는 방법

• Intersection Observer API
  • 타겟 요소(element)와 브라우저 viewport의 교차점을 관찰합니다.
    • 타겟 요소가 사용자 화면에 보이는지 안보이는지 판단
    • 화면에 보이면 지정한 콜백 함수 실행
  • scroll 이벤트와 달리 비동기적으로 실행되며, reflow를 발생시키지 않아 성능 이점이 있습니다.
  • https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

 

🚩 useIntersectionObserver hook

• useIntersectionObserver() 구현

export default function useIntersectionObserver({
  target, // target 요소(element)
  onIntersect, // 교차 시점에 실행될 콜백 함수
  threshold = 1.0, // 콜백 함수가 실행되는 target의 가시성
  enabled = true, // 관찰여부
}: UseIntersectionObserver) {
  useEffect(() => {
    // 관찰하지 않음
    if (!enabled) { 
      return;
    }

    const observer = new IntersectionObserver(
      // (boolean) entry.isIntersecting === true (교차 상태, target이 viewport에 들어옴)
      // 지정한 콜백 함수 실행
      (entries) =>
        entries.forEach((entry) => entry.isIntersecting && onIntersect()),
      {
        threshold,
      },
    );

    const element = target && target.current;

    // IntersectionObserver Target이 없을 경우, 종료
    if (!element) {
      return;
    }

    observer.observe(element); // IntersectionObserver 실행
    return () => observer.unobserve(element);
  }, [enabled, threshold, target, onIntersect]);
}

 

• useIntersectionObserver() 적용

export default function TabMenu({ isMine, memberId }: TabMenuProps) {
  const targetRef = useRef(null); // target element
  const {
    data: reviews,
    isLoading: isLoadingReview,
    fetchNextPage: fetchNextPageReview,
    hasNextPage: hasNextPageReview,
  } = useInfiniteQuery(
    ["profile", memberId, "review", selectedSort.id, selectedSort.isDESC],
    ({ pageParam }) => profile.getReview(memberId, pageParam, selectedSort),
    {
      getNextPageParam: (lastPage) => lastPage.cursor || undefined,
      select: (data) => ({
        pages: data.pages.flatMap((page) => page.items),
        pageParams: data.pageParams,
      }),
    },
  );
  
  useIntersectionObserver({
    target: targetRef,
    onIntersect: fetchNextPageReview ,
    enabled: hasNextPageReview,
  });
  
  return (
   <>
     ...
     <ReviewList isMine={isMine} list={reviews?.pages ?? []} />
     <Target ref={targetRef} /> // 페이지 하단 target element
   </>
  )
}

 

🚩 useInfiniteQuery()

• react-query는 무한 스크롤 구현을 도와주는 useInfiniteQuery 훅을 제공합니다.

  const {
    data: reviews,
    isLoading: isLoadingReview,
    fetchNextPage: fetchNextPageReview,
    hasNextPage: hasNextPageReview,
  } = useInfiniteQuery(
    ["profile", memberId, "review", selectedSort.id, selectedSort.isDESC],
    ({ pageParam }) => profile.getReview(memberId, pageParam, selectedSort),
    {
      getNextPageParam: (lastPage) => lastPage.cursor || undefined,
      select: (data) => ({
        pages: data.pages.flatMap((page) => page.items),
        pageParams: data.pageParams,
      }),
    },
  );

• returns
  • fetchNextPage: 다음 페이지의 데이터를 가져옵니다. (useIntersectionObserver의 onIntersect 콜백 함수)
  • hasNextPage: 다음 페이지의 여부 (useIntersectionObserver의 enabled)  
    • getNextPageParam이 undefined이 아닌 다른 값을 반환하면 hasNextPage는 true

 

• options
  • getNextPageParam: 이 함수의 반환값이 queryFn의 pageParam으로 전달됩니다. 다음 페이지가 없음을 나타내려면 undefined를 반환하면 됩니다.

 

 

Oduck 프로젝트에서 infinite scroll의 json 응답 데이터는 다음과 같습니다.

// 최신순 정렬
{
  "items": [
    {
      "reviewId": 30,
       ...
    },
    {
      "reviewId": 21,
       ...
    }
  ],
  "size": 10,
  "hasNext": true,
  "cursor": "2023-10-03T21:05:31.859"
}

1. getNextPageParam 옵션을 이용하여 마지막으로 받아온 페이지의 cursor 반환

2. cursor값이 queryFn의 pageParam으로 전달되어 서버에 다음 페이지 요청

3. 더 이상 불러올 페이지가 없으면 getNextPageParam은 undefined 반환

4. hasNextPage는 false

 

• select option
  • queryFn을 통해 받아온 데이터를 가공할 수 있는 옵션

select 가공 전

데이터 가공 전에는 pages 배열 → items 배열 두 번 접근해야 리뷰 데이터를 얻을 수 있습니다.

select 가공 후

react-query select 옵션과 flatMap 메서드를 적용하면, pages 배열에 한 번만 접근하여 리뷰 데이터를 얻을 수 있습니다.

• flatMap: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap

🚩 프로젝트 적용

 

🚩 참고

• https://tanstack.com/query/v4/docs/react/reference/useInfiniteQuery
• https://velog.io/@cnsrn1874/react-query-useInfiniteQuery
• https://s0ojin.tistory.com/58
• https://velog.io/@leemember/React-query-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0-useInfiniteQuery-%EB%A1%9C-%EB%AC%B4%ED%95%9C-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0-react-infinite-scroller