React에서 Intersection Observer API로 요소 감시하기

React에서 스크롤 위치에 따라 특정 요소가 화면에 보이는지 감시해야 할 때가 많습니다. 이때 Intersection Observer API를 사용하면 효율적으로 요소의 가시성을 체크할 수 있습니다.

1. Intersection Observer API란?

Intersection Observer API는 타겟 요소가 뷰포트(또는 다른 요소)와 교차하는지 비동기적으로 감지하는 웹 API입니다. 스크롤 이벤트를 직접 다루지 않아도 되고, 성능상 이점이 큽니다.

2. React에서 Intersection Observer 사용법

기본적으로 훅을 활용해 구현하는 방법을 소개합니다.

import React, { useEffect, useRef, useState } from 'react';

function useIntersectionObserver(options) {
  const elementRef = useRef(null);
  const [isIntersecting, setIsIntersecting] = useState(false);

  useEffect(() => {
    if (!elementRef.current) return;

    const observer = new IntersectionObserver(([entry]) => {
      setIsIntersecting(entry.isIntersecting);
    }, options);

    observer.observe(elementRef.current);

    return () => {
      observer.disconnect();
    };
  }, [elementRef, options]);

  return [elementRef, isIntersecting];
}

function MyComponent() {
  const [ref, isVisible] = useIntersectionObserver({
    threshold: 0.1,
  });

  return (
    <div>
      <div ref={ref} style={{ height: '200px', backgroundColor: isVisible ? 'lightgreen' : 'lightcoral' }}>
        관찰 중인 요소입니다.
      </div>
      <p>이 요소는 화면에 {isVisible ? '보이고' : '보이지 않습니다.'}</p>
    </div>
  );
}

export default MyComponent;

3. 활용 팁

- 이미지 lazy loading 구현 시 해당 이미지가 뷰포트에 들어올 때 실제 로딩하는 방식으로 사용하세요.

- 무한 스크롤 구현 시 마지막 피드 항목을 관찰해 다음 데이터를 불러오는 트리거로 활용 가능합니다.

Intersection Observer API는 성능 저하를 줄이고, React 컴포넌트 내에서 깔끔하게 동작합니다. 스크롤 이벤트보다 훨씬 권장되는 방법이니 적극 추천합니다.