[인사이트아웃] React-Query 무한스크롤 적용기

자기소개서 작성이 막막할 땐? https://www.insightout.kr/

TL;DR

- 무한스크롤
- Intersection Observer API
- React-Query와 Intersection Observer API를 사용해 무한스크롤 구현하기
- 실제 서비스에 적용하기

 

배경

인사이트아웃에서는 내가 가진 경험을 정리하고 이를 '경험 카드'로 저장할 수 있다.

이 경험카드는 본격적으로 자기소개서를 작성할 때 참고하여 작성할 수 있다.

발표 장표 스을쩍

이 때, 한 페이지에서 내가 가진 경험카드의 내용을 확인하고 이를 토대로 자기소개서를 작성을 빠르게 할 수 있도록 기획하였다.

 

무한스크롤

무한스크롤은 사용자가 스크롤을 아래로 내리면 새로운 콘텐츠가 자동으로 로드되어 보여주는 방식이다.

사용자가 페이지를 이동하지 않아도 계속해서 새로운 콘텐츠를 볼 수 있어 편리한 사용자 경험을 제공할 수 있다.

 

무한스크롤을 구현하고, 경험카드 조회에 무한스크롤을 적용하여 사용자 경험을 개선한 내용을 소개하고자 한다.

 

무한스크롤 적용 미리보기

 

 

 

 

1. 서버와 데이터 정하기

무한스크롤을 위해서는 서버와 클라이언트 둘 다 구현이 필요하다.

클라이언트와 서버가 데이터를 어떻게 주고 받을지 결정해야한다.

 

특정 페이지 하단에 도달했을 때, API를 호출하기 위해서는 아래와 같은 데이터가 필요하다.

• 데이터를 몇개씩 보내줄건지
• 페이지 번호
• 현재 보내는 데이터가 마지막인지 아닌지
  • 클라이언트 측에서 더이상 요청할지 말지를 결정하기 위해서 필요하다
• 현재 보내는 페이지 번호

 

이를 바탕으로 다음과 같은 메타 데이터를 주고 받게 되었다.

응답 중 meta 부분만 캡쳐

page: 현재 페이지 번호
take: 데이터를 몇개씩 받을 것인지
pageCount: 총 페이지의 개수
hasPreviousPage: 이전 페이지가 존재하는지
hasNextPage: 다음 페이지가 존재하는지

 

2. React-Query의 useInfiniteQuery

무한스크롤 구현을 위한 훅을 리액트 쿼리에서 제공해주고 있다.

 

https://tanstack.com/query/v4/docs/react/reference/useInfiniteQuery

useInfiniteQuery | TanStack Query Docs

 

아래 코드를 살펴보자

const {
  fetchNextPage,
  fetchPreviousPage,
  hasNextPage,
  hasPreviousPage,
  isFetchingNextPage,
  isFetchingPreviousPage,
  ...result
} = useInfiniteQuery({
  queryKey,
  queryFn: ({ pageParam = 1 }) => fetchPage(pageParam),
  ...options,
  getNextPageParam: (lastPage, allPages) => lastPage.nextCursor,
  getPreviousPageParam: (firstPage, allPages) => firstPage.prevCursor,
})

 

useQuery랑 다른 점은 getNextPageParam과 getPreviousPageParam이다.

유사하기 때문에 getNextPageParam만 보도록 하겠다.

 

getNextPageParam

getNextPageParam가 falsy한 값을 반환하면, 추가로 fetchPage를 실행하지 않는다.

truthy한 값을 반환할 경우, 하나의 값을 반환해야하고 이 값은 fetchPage의 pageParam으로 전달된다.

 

인자로는 lastPage와 allPages를 받을 수 있다.

• lastPage는 fetchPage에서 리턴한 값
• allPages는 지금까지 받은 전체 페이지의 배열

 

간단한 예제

위에서 말한 내용을 바탕으로 getNextPageParam을 간단하게 작성해볼 수 있다.

{
  getNextPageParam: (lastPage: AxiosResponse<TestResponseType>) =>
     lastPage.data.isLast ? undefined : lastPage.data.currentPage + 1,
}

 

이제 useInfiniteQuery의 반환 값들을 이용해서 데이터를 요청하면 된다.

• data: 모든 페이지의 데이터를 포함한다
• fetchNextPage: 다음 페이지 데이터를 불러오는 함수
• hasNextPage: 다음 페이지가 있는지 확인해서 fetch를 호출할지 결정한다
• isFetchingNextPage: fetch를 하고 있는 중인지 확인해서 중복 호출을 막는다

 

3. Intersection Observer

scrollEvent로 무한스크롤을 구현하게 된다면

scrollEvent가 동기적으로 실행되기 때문에 메인 스레드에 영향을 준다

특정 시점을 관찰하기 위해 getBoundingClientRect() 를 사용해야하는데 리플로우가 발생한다.

 

Intersection Observer

Intersection Observer API는 target 요소와 root 요소 사이의 교차 발생을 비동기적으로 관찰한다.

IntersectionObserverEntry 속성을 사용하면 getBoundingClientRect()를 사용하지 않아도 된다. 즉, 리플로우를 방지할 수 있다.

viewport, target

 

Intersection Observer를 이용한 커스텀 훅 구현

import { useCallback, useEffect, useRef } from 'react';

/**
 * Intersection Observer API를 사용하는 훅입니다.
 * - target으로 설정한 요소와 뷰포트와 교차하는지 구별합니다.
 * - 무한스크롤에 사용할 수 있습니다.
 *
 * @param onIntersect
 * @param options root, rootMargin, threshold
 *
 * @returns target 요소에 전달할 ref
 */
const useIntersection = (
  onIntersect: (entry: IntersectionObserverEntry, observer: IntersectionObserver) => void,
  options?: IntersectionObserverInit
) => {
  const ref = useRef<HTMLDivElement>(null);

  /**
   * target 요소가 교차되었을 때 실행할 함수
   *
   * @param entries IntersectionObserverEntry 객체의 리스트
   * @param observer 콜백함수가 호출되는 IntersectionObserver
   */
  const callback = useCallback(
    (entries: IntersectionObserverEntry[], observer: IntersectionObserver) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) onIntersect(entry, observer);
      });
    },
    [onIntersect]
  );

  useEffect(() => {
    if (!ref.current) return;

    const observer = new IntersectionObserver(callback, options);
    observer.observe(ref.current);

    return () => observer.disconnect();
  }, [ref, options, callback]);

  return ref;
};

export default useIntersection;

 

4. 실제 서비스에 적용하기

react-query와 구현한 useIntersection 훅을 이용해서 실제 컴포넌트에서 데이터를 가져와보자.

 

const ExperienceCardList = () => {
    const { data, fetchNextPage, hasNextPage, isFetching } = useGetInfiniteExperiences(
      { take: CARD_COUNT_PER_LOAD } // 가져올 카드 개수 설정
    );
	
    // 각 page에서 응답 받은 데이터를 일차원 배열로 저장
    const experiences = useMemo(() => (data ? data.pages.flatMap(({ data }) => data) : []), [data]);
	
    // viewport와 ref를 전달한 요소가 교차할 경우 콜백이 호출
    const ref = useIntersection((entry, observer) => {
      observer.unobserve(entry.target);

      if (hasNextPage && !isFetching) fetchNextPage();
    });
    
    return (
      <Container>
        <ul>
          {experiences?.map((experience) => (
            <li key={id}>
              <ExperienceCard {...experience} />
            </li>
          ))}
          {/*  전체 리스트의 맨 아래가 viewport 내로 들어올 경우 fetch */}
          <div ref={ref}></div>
        </ul>
      </Container>
  );
}

경험카드 리스트의 최하단과 교차하면 다음 카드 데이터들을 바로바로 가져온다.