🤔 무한 스크롤이 필요해?

useQuery를 사용하여 정적인 이벤트의 실행하여 api를 호출하는데 성공하였다.
하지만, 만들고있는 SNS는 세로 스크롤이 존재하는 모바일 친화적 레이아웃이다.
그렇게 많은 SNS에서 사용 중인 무한 스크롤 이벤트를 도입하고자 한다..

무한 스크롤 방법

방법에는 두 가지 방법이 있는데,

• Intersection Observer API
• react window

이번 포스트에서는 Intersection Observer API 에 대해 알아보겠습니다.

👀 그래서 어떻게 사용하는데요?

npm install react-intersection-observer --save

패키지 설치가 필요해요.

예제에 앞서 간단히 설명하자면,
Observer 객체 하나를 ref로 정한 후 해당 객체가 화면에 보이면 어떠한 이벤트를 실행하는 단순한?.. 이벤트 처리방식 입니다.

import React, { uesEffect } from 'react';
import { useInView } from 'react-intersection-observer';

const Component = () => {
  const { ref, inView, entry } = useInView();

  useEffect(() => {
    실행함수();
  }, [inView]);
  
  return (
    <div ref={ref}>나를 봤다면, 이벤트 실행!!</div>
  );
};

아주 간단한데요.
실제로 사용할 때는 가장 하단에 Observer를 위치하여, Observer 위로 계속 새로운 컴포넌트가 생성된다면 완성입니다!!

실제 예제를 올리고 싶은데,
아직 useQuery의 useInfiniteQuery 연결이 완료되지 않아 다소 어려움을 겪고 있습니다..
완성된다면 결과물과 함께 다시 업로드 하겠습니당..

useInView 의 사용법을 알아보았으면 UseQuery 의 UseInfiniteQuery 사용법을 확인해 보겠습니다.

어떠한 값을 불러오는데 idx에 의해 일정 개수의 값만 출력하는 함수를 연속으로 실행합니다.

  const { data, fetchNextPage, hasNextPage } =
    useInfiniteQuery(
      ["anyKey"],
      ({ pageParam = 0 }) => GetSomething({ idx: pageParam }),
      {
        getNextPageParam: (lastPage) => {
          // lastPage: 콜백함수에서 리턴한 값을 의미한다!!
          // 직전에 받은 배열의 다음 index를 요청
          if (lastPage[lastPage.length - 1] === undefined)
            return undefined;
          return lastPage[lastPage.length - 1].id;
          // 마지막 id 요소 관련 이벤트 처리 추가해야해요
        },
      }
    );

  useEffect(() => {
    //감지 및 fetch
    if (inView && hasNextPage) fetchNextPage();
  }, [inView);

지식을 쌓아갑시다