React 무한스크롤 구현하기(Intersection Observer)

 

intersectionObserver API의 속성을 이용하여 viewport 상태를 체크하여 무한스크롤 구현

 

• 타켓생성 (스크롤의 하단부에 타겟을 지정하고, ref를 달아준다. 이 ref를 통해서 교차시점을 확인가능함)

먼저 스크롤의 끝 부분을 감지할 타겟을 만들어야한다. 이 타겟은 스크롤이 끝에 도달했는지 확인하는 데 사용된다.

 

타겟은 React에서는 useRef 훅을 이용해 만들 수 있다. 아래 코드는 타겟을 만들고 페이지 하단에 위치시키는 예제이다.

 

const target = useRef<any>(null);

<div ref={target}>{isLoaded && <p>Loading...</p>}</div>

 

 

• observer 관찰자 생성 (컴포넌트가 렌더링 완료됨에 따라 observer 가 생성되어야 하므로 useEffect를 활용해야 한다)

하단에 도달했는지 감시할 '관찰자(observer)'를 생성해야 한다.
이를 위해 IntersectionObserver를 사용하고 useEffect 훅을 이용하면 컴포넌트가 렌더링된 후에 관찰자를 생성 가능하다.
관찰자는 타겟이 화면에 나타났는지 감지하고, 나타났을 때 특정 동작을 수행하게 됩니다.

const defaultOption = {
    threshold: 1,
  };

useEffect(() => {  
    const observer = new IntersectionObserver(
      async (entries) => {
        if (entries[0].isIntersecting) {
         // 여기에 무한 스크롤 로직을 구현.
         
         console.log("is InterSecting");
         
          // 예시: 총페이지와 현재 페이지가 같다면 페이지를 더이상 증가시키지않는다.
          if (getTotalPageNumber <= page.current) {
            await console.log(getTotalPageNumber);
            return;
          }
          
          // 예시: 현재 페이지를 1증가시키고 새 트윗을 불러오는 로직
          await dispatch(setPageCount((page.current += 1)));

          console.log(page.current);
        }
      },
      {
        ...defaultOption,
      }
    );
    if (target) observer.observe(target.current);
    return () => {
      observer.disconnect();
    };
  }, [getTotalPageNumber,target]);

 

react-query를 사용하여 page가 변경될때마다 백엔드와 통신하여 데이터를 가져온다. 

function tweetSelectApi() {
    return customAxios.get("/getTweets/select", {
      params: { pageCount },
    });
  }

  const getTweets = useQuery(["select", page], tweetSelectApi, {
    refetchOnWindowFocus: false,
    onSuccess: (res: any) => {
      if (pageCount > 1) {
        console.log(pageCount);
        setAddData([...addData, ...res.data.data]);
      } else {
        setAddData([...res.data.data]);
      }

      dispatch(
        changGetDataState({
          id: res.data.user_id,
          postPerPage: 10,
          totalPosts: res.data.count,
        })
      );
    },
  });

 

 

페이지를 스크롤하면서 'Loading...' 표시가 나타나고 새로운 콘텐츠가 추가되는지 확인

<div ref={target}>{isLoaded && <p>Loading...</p>}</div>

 

 

현재는 react-query에서 제공해주는 무한스크롤 기능을 사용하는 중이다. 관련 글은 아래 게시물에 정리해놓았다.

React-query Infinite queries 도입하기

 

참고 사이트

---

무한스크롤 IntersectionObserver()

Intersection Observer - 요소의 가시성 관찰

React - Intersection Observer API를 사용하여 인피니트 스크롤 구현하기

IntersectionObserver 에 대해 알아보자.