Skip to content

useInfiniteScrollQuery 사용법

JuhyunLim edited this page Apr 19, 2023 · 1 revision

0. 개요

커스텀 훅 생성 이유

  • 두 군데에서 사용되는 기능
  • 컴포넌트에서 진행할 시 컴포넌트 역할이 로직까지 너무 크게 확대된다고 생각해서.

이용하기 좋은 조건

  • infiniteScroll을 이용해야 할 때
  • 추가로 intersection observer을 이용해야 할 때.(useIntersectionObserver 이용)

구조 보기

infiniteScroll

고민한 부분

  • 구조 인지를 빠르게 하기 위해 Query를 불러오는(infiniteQuery더라도) 함수는 api/파일명 과 대칭이 되는 hooks/queries/파일명 내에서 호출하고 싶었음.
  • infiniteScrollQuery를 사용하는 기능과 intersectionObserver을 사용하는 기능을 재사용이 가능하게 완전히 분리하고 싶었음
  • infiniteScrollQuery를 통해 완성된 데이터를 가공하는 작업을 컴포넌트가 아닌 함수로 분리해 컴포넌트의 역할을 최소화하고 싶었음
  • 컴포넌트에서 수행하는 일
    1. hooks/queries/파일명/함수를 호출해서 다음 데이터를 받아오는 함수(fetchNextPage)를 가져옴.
    2. intersectionObserver에 관찰 대상과 1번 함수를 주입.
    3. 만들어지는 데이터를 linkageInfiniteScrollData에 넣어서 하나의 배열로 만들어 가져옴

1. 사용하기

  1. 원하는 파일에서
    const observeTarget = useRef<HTMLDivElement>(null); // target설정

    const infiniteQuery = useGetInfiniteFeed(); // infiniteQuery return값 가져옴

    useIntersectionObserver({ 
      containerTarget: observeTarget, // target
      onIntersect: infiniteQuery.fetchNextPage, // fetchNextPage함수
    });

    const reviewData = linkageInfiniteScrollData<ReviewResponseType>( // <ReviewResponseType> : 해당 파일에서 원하는 타입 주입해 사용
      infiniteQuery?.data // 결과로 나온 data 형식을 바로 쓸 수 있게 하나의 배열로 변환
    ); 

    return (
      <S.Section ref={observeTarget}>
        {reviewData?.map((data: ReviewResponseType, i) => (
          <Review key={i} data={data} />
        ))}
      </S.Section>
    );