React 후크로 요소가 보이는지 확인

Intersection Observer API 을 사용하면 요소가 사용자 화면에 표시되는지 확인하는 것이 매우 쉽습니다. 이 API는 모든 주요 브라우저에서 지원됩니다.

Intersection Observer API를 사용하면 요소와 다른 요소의 교차점을 감지할 수 있습니다. 우리의 경우 React 요소와 브라우저 뷰포트 사이의 가로채기를 관찰할 것입니다.

필요한 곳에 이 코드를 재사용하기 위해 이를 위한 사용자 지정 후크를 만들 것입니다.

사용자 정의 후크에서 요소의 교차 상태를 저장하기 위해 useState를 사용할 것입니다.

export function useIsVisible() {
  const [isIntersecting, setIntersecting] = useState(false);

  return isIntersecting;
}

후크에는 관찰하려는 React 요소에 대한 참조가 필요합니다. ref 소품을 사용하여 요소를 후크에 전달합니다.

export function useIsVisible(ref) {
  const [isIntersecting, setIntersecting] = useState(false);

  return isIntersecting;
}

마지막으로 IntersectionObserver의 인스턴스를 만들고 요소를 관찰해야 합니다. IntersectionObserver 생성자는 요소가 뷰포트와 교차할 때 호출되는 첫 번째 인수로 콜백 함수를 허용합니다.
useEffect 후크를 사용하여 리렌더링 시 새 관찰자를 생성하지 않도록 할 것입니다.

export function useIsVisible(ref) {
  const [isIntersecting, setIntersecting] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) =>
      setIntersecting(entry.isIntersecting)
    );

    observer.observe(ref.current);
  }, [ref]);

  return isIntersecting;
}

성능을 향상시키기 위해 IntersectionObserver.disconnect()을 호출하여 구성 요소가 마운트 해제되거나 새 요소가 후크에 전달될 때 변경 사항 감시를 중지합니다.

export function useIsVisible(ref) {
  const [isIntersecting, setIntersecting] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) =>
      setIntersecting(entry.isIntersecting)
    );

    observer.observe(ref.current);
    return () => {
      observer.disconnect();
    };
  }, [ref]);

  return isIntersecting;
}

후크를 사용할 준비가 되었습니다. 이를 사용하려면 React 구성 요소에서 호출하고 표시 여부를 확인하려는 요소에 대한 참조를 전달하기만 하면 됩니다.

export function MyComponent() {
  const ref = useRef();
  const isVisible = useIsVisible(ref);

  return (
    <div ref={ref}>
      <p>{isVisible ? "Visible" : "Not visible"}</p>
    </div>
  );
}

my website에서 이 후크의 실제 사용 예를 볼 수 있습니다. 사용자가 페이지 하단으로 스크롤한 다음 블로그 게시물의 댓글을 로드하는지 감지하기 위해 후크를 사용하고 있습니다. 구성요소here의 소스 코드를 볼 수 있습니다. 블로그 게시물을 입력하고 페이지 하단으로 스크롤하여 실제로 작동하는지 확인하십시오.

참조

Intersection Observer API

IntersectionObserver.disconnect()