Intersection Observer를 통한 무한 스크롤 구현

무한 스크롤은 사용자가 직접 페이지 전환을 하지 않고 스크롤을 내려 하단의 콘텐츠가 계속해서 추가되는 것을 말합니다.

 

무한 스크롤에 있어서 사용자의 현재 위치를 감지해야하는데

이것을 체크하기 위해서 2가지의 방법이 존재합니다.

 

1. Scroll의 위치를 체크하면서 특정 위치가 되었을 때 기능을 동작

2. Intersection Observer API를 활용하여 특정 콘텐츠의 등장 여부를 판단하여 기능을 동작

 

첫 번째의 방법의 경우, scroll의 위치를 계속해서 감지해주어야 하기 때문에 메서드 호출이 불필요하게 많이 발생하는 단점이 있습니다.

쓰로틀링과 디바운싱을 통해 횟수를 줄여줄 수는 있습니다.

 

두 번째의 intersection Observer의 경우 컴포넌트와 viewport 교차하는 영역에 따라 변화를 감지하고 특정 기능을 수행하게 할 수 있습니다.

 

메서드 호출 횟수뿐만 아니라 이후 코드 부분에 재사용성이 측면에서 장점이 있다고 생각해서 Intersection Observer를 활용하여 구현해 보았습니다.

 

초기 컴포넌트를 10개 선언하고 무한 스크롤로 인해 컴포넌트가 계속 생성되도록 실습을 진행해 보았습니다.

 

 

먼저 컴포넌트를 감지할 Observer 객체와 감지 대상을 저장할 객체를 선언해줍니다.

  let targetNum = 10;
  const [squareArr, setSquareArr] = useState<number[]>(Array.from(Array(10).keys()));
  const observerRef = useRef<IntersectionObserver>();
  const targetRef = useRef<HTMLDivElement>(null);

그리고 useEffect를 통해 값을 할당해줍니다.

useEffect(() => {
    observerRef.current = new IntersectionObserver(intersectionObserver, {
      threshold: 0,
    });
    targetRef.current && observerRef.current.observe(targetRef.current);
  }, [squareArr]);

이후 suqareArr가 업데이트될때마다 감지되는 컴포넌트가 업데이트 될 것입니다.

 

여기서 threshold 값을 변경하여 감지되는 컴포넌트가 화면에 노출되는 비율을 결정할 수 있습니다.

현재 0으로 되어있어 화면에 등장하기 직전에 동작하게 됩니다.

1로 설정할 경우, 컴포넌트 전체가 화면에 노출되었을 때 동작합니다.

 

Intersection Observer의 callback 함수는 다음과 같이 만들었습니다.

const intersectionObserver = (entries: IntersectionObserverEntry[], io: IntersectionObserver) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        io.unobserve(entry.target);
        
        setSquareArr([...squareArr, targetNum]);
        targetNum += 1;
      }
    });
  };

entries에는 감지할 컴포넌트들이 포함된 인자이고, io는 observer가 들어가는 인자입니다.

메서드 내부에서 감지 대상 컴포넌트가 발견되면(entry, isInteresting), 감지를 중단하고, 컴포넌트를 추가합니다.

 

위 useEffect가 squareArr 변화를 감지하고 다시 타깃을 찾게 됩니다.

 

감지할 컴포넌트는

return (
    <S.Wrapper>
      {squareArr.map((num, index) => {
        if (index === squareArr.length - 1) {
          return (
            <S.Box key={index} ref={targetRef}>
              SHOW
            </S.Box>
          );
        }
        return <S.Box key={index}>{index}</S.Box>;
      })}
    </S.Wrapper>
  );

targetRef를 넘겨주어서 감지할 컴포넌트를 지정해주었습니다.

 

 

구현한 결과 스크롤을 내릴 때마다 컴포넌트가 추가되는 것을 확인할 수 있습니다.

 

처음 구현해보는 무한 스크롤이라 intersection observer와 무한 스크롤에 대해서 충분히 설명드리고 싶었는데

많이 아쉬운 포스트였습니다.

 

코드에 아쉬운 부분이나 수정할 부분은 댓글로 남겨주세요!

 

 

#Reference

Intersection Observer API - Web API | MDN

[React] 무한 스크롤(Infinite Scroll) 사용하기