useIntersectionObserver

useIntersectionObserver는 특정 DOM 요소가 화면에 보이는지를 감지하는 커스텀 훅이에요. 이 훅은 IntersectionObserver API를 사용하여 요소가 뷰포트에 들어오거나 나갈 때 콜백을 실행해요.

인터페이스

function useIntersectionObserver(
  callback: (entry: IntersectionObserverEntry) => void,
  options: IntersectionObserverInit
): (element: Element | null) => void;

파라미터

• callbackrequired · (entry: IntersectionObserverEntry) => void
  

  요소의 가시성이 변경될 때 실행되는 콜백 함수예요. entry.isIntersecting를 확인하여 요소가 보이는지를 판단할 수 있어요.

• optionsrequired · IntersectionObserverInit
  

  IntersectionObserver에 대한 옵션이에요. root, rootMargin, threshold와 같은 값을 지정할 수 있어요.

반환 값

• (element: Element | null) => void
  

  요소를 설정하는 함수예요. 이 함수를 ref 속성에 첨부하면, 요소의 가시성이 변경될 때마다 callback이 실행돼요.

예시

import { useIntersectionObserver } from 'react-simplikit';

function Component() {
  const ref = useIntersectionObserver<HTMLDivElement>(
    entry => {
      if (entry.isIntersecting) {
        console.log('Element is in view:', entry.target);
      } else {
        console.log('Element is out of view:', entry.target);
      }
    },
    { threshold: 0.5 }
  );

  return <div ref={ref}>나를 관찰해요!</div>;
}