React의 교차 관찰자

# useIntersectionObserver 후크

이 React Hook은 브라우저에 기본적으로 존재하는 🔗IntersectionObserver API를 사용하여 뷰포트에서 구성 요소의 가시성을 감지하는 데 사용할 수 있습니다.

일부 사용 사례는 다음과 같습니다.

이미지 지연 로딩

무한 스크롤링

시작 애니메이션

후크는 다음 유형의 두 가지 인수를 사용합니다.

{
  options?: Omit<IntersectionObserverInit, 'root'>;
  observerCallback: IntersectionObserverCallback;
}

observerCallback를 사용하여 뷰포트와 교차할 때 동작을 정의합니다. 다음과 같이 인터페이스로 정의된 IntersectionObserverCallback 유형을 갖습니다.

interface IntersectionObserverCallback {
    (entries: IntersectionObserverEntry[], observer: IntersectionObserver): void;
}

마지막으로 후크는 두 가지 속성이 있는 객체를 반환합니다.

{
  observable: (node: Element) => void;
  root: (node: Element) => void;
}

세 가지 참조 변수를 정의합니다.

nodeRefs - 관찰 가능한 노드에 대한 참조를 참조 객체의 배열로 유지하기 위해

observerRef - 교차 관찰자에 대한 기준을 유지하기 위해

rootRef - 관찰 가능 항목이 교차하는 루트 노드에 대한 참조를 유지하기 위해

export function useIntersectionObserver({
  options = { rootMargin: '0px', threshold: [0] },
  observerCallback,
}: {
  options?: Omit<IntersectionObserverInit, 'root'>;
  observerCallback: IntersectionObserverCallback;
}) {
  const nodeRefs = useRef<Element[]>([]);
  const rootRef = useRef<Element>(null);
  const observerRef = useRef<IntersectionObserver | null>(null);
  ...
};

그런 다음 각각 rootRefCallback 및 observableRefCallback에 매핑된 root 및 observable를 다음과 같이 정의합니다.

‼️ 이것들은 Intersection observer에 대한 root와 observable 노드를 설정하는 데 사용됩니다.

const observableRefCallback = useCallback<(node: Element) => void>(
  (node) => {
    nodeRefs.current.push(node);
    initializeObserver();
  },
  [initializeObserver]
);

const rootRefCallback = useCallback<(node: Element) => void>(
  (rootNode) => {
    rootRef.current = rootNode;
    initializeObserver();
  },
  [initializeObserver]
);

두 경우 모두 루트 및 관찰 가능 노드가 설정되면 교차 관찰자를 함수initializeObserver로 초기화합니다. 이 기능은 기본적으로 교차 관찰자를 다음과 같이 재설정합니다.

const unobserve = useCallback(() => {
  // stops watching all of its target elements for visibility changes.
  observerRef.current?.disconnect();
  // sets to null
  observerRef.current = null;
}, []);

const observe = useCallback(() => {
  // If observable nodes exist
  const nodes = nodeRefs.current;
  if (nodes.length > 0) {
    const root = rootRef.current;
    const { rootMargin, threshold } = options;
    // Create a new IntersectionObserver instance
    const observer = new IntersectionObserver(observerCallback, {
      root,
      rootMargin,
      threshold,
    });
    // Observe all observable nodes
    nodes.forEach((node) => observer.observe(node));
    // Set observer reference
    observerRef.current = observer;
  }
}, [options.rootMargin, options.threshold]);


const initializeObserver = useCallback(() => {
  unobserve();
  observe();
}, [observe, unobserve]);

# Intersection observer hook 사용하기

관찰자 콜백 정의

const observerCallback = (entries: IntersectionObserverEntry[], observer: IntersectionObserver) => {
  entries.forEach((entry) => {
    ...
  });
};

useIntersectionObserver를 호출하여 관찰 가능한 루트 콜백을 가져옵니다.

const { observable, root } = useIntersectionObserver({
  observerCallback,
});

Observable 노드에 Observable 연결

React.useEffect(() => {
  document.querySelectorAll('.anim').forEach(observable);
}, []);

루트 노드에 루트 연결

<div ref={root}>
  <div className="anim">...</div>
  <div className="anim">...</div>
  <div className="anim">...</div>
</div>

# 참조

🔗 Online Playground

🤩 놀이터에서 브라우저를 아래로 스크롤하여 애니메이션을 확인하세요.