2023. 5. 9.leey00nsu

리액트에서 무한스크롤 구현해보기

무한스크롤

리스트에 끝에 닿았을 때 , api를 호출하여 리스트를 추가하는것을 구현하고자 합니다.

흔히 이런 방식을 무한 스크롤(Infinite Scroll) 방식이라고 합니다.

이때 스크롤 이벤트를 감시하여 체크하는 방법과 , 리스트가 뷰포트에 들어왔을때 체크하는 방법 두 방식으로 기능을 구현할 수 있습니다.

하지만, 스크롤 이벤트 방식은 성능 이슈가 발생할 수 있으며 , 요소가 많을 경우 처리하기 힘들기 때문에 뷰포트를 이용하여 구현해 보겠습니다.

Intersection Observer API를 이용한 구현

Intersection Observer API는 브라우저에서 제공하는 자바스크립트 API중 하나로 요소가 뷰포트에 나타나거나 사라질 때 콜백 함수를 호출하여 처리합니다.

여기서는 커스텀훅인 useIntersectionObserver를 직접 구현하여 사용하였지만, react-intersection-observer와 같은 커스텀 훅 라이브러리를 사용할 수도 있습니다.

useIntersectionObserver

import { useRef } from "react";
export default function useIntersectionObserver(callback: () => void) {
  const observer = useRef(
    new IntersectionObserver(
      (entries, observer) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            callback();
          }
        });
      },
      { threshold: 1 }
    )
  );
 
  const observe = (element: any) => {
    observer.current.observe(element);
  };
 
  const unObserve = (element: any) => {
    observer.current.unobserve(element);
  };
 
  return [observe, unObserve];
}

useRef를 이용해 기준이 될 요소에 ref 속성을 부여한 후, 커스텀 훅에 ref를 등록하면 이 요소가 뷰포트에 나타날때마다 콜백 함수가 실행되게 됩니다.

여기서는 다음 페이지를 fetch해오는 함수를 콜백에 등록시켜보겠습니다.

useRef

...
const infScroll = useRef(null);
 
 
const [observe, unObserve] = useIntersectionObserver(() => {
  fetchNextPage(); // 다음 페이지를 fetch해오는 함수이다.
});
 
useEffect(() => {
    observe(infScroll.current);
}, []);
 
...
 
<div ref={infScroll} >
  ...
</div>

결과

infinite-scroll-demo

예상대로 스크롤 끝이 인식되면 계속해서 리스트를 불러오는 것을 볼 수 있습니다.