⚛️ React Intersection Observer 👀 Hook 🪝.

MDN에 따르면 Intersection Observer API는 비동기식으로 관찰할 수 있는 방법을 제공합니다.
대상 요소와 상위 요소 또는 최상위 문서의 교차점에서 변경됩니다.

복잡해 보이지만 React에서는 간단한 후크를 사용하여 교차를 달성할 수 있습니다.
명심해야 할 유일한 것은 '대상 요소'를 관찰자에게 전달해야 한다는 것입니다.
useRef() 사용

const targetMiddle = React.useRef();
const targetTop = React.useRef();

<h3 ref={targetTop}>TOP</h3>
<h3 ref={targetMiddle}>Middle</h3>

훅

후크는 매우 간단합니다
대상 요소를 인수로 허용하는 함수를 내보내야 합니다.
기본적으로 임계값은 0으로 설정되지만 필요에 따라 옵션을 가지고 놀 수 있습니다.
_isIntersecting _entry 속성을 사용하여 상태 설정

export function useObserver(ref) {

    const [isIntersecting, setIsIntersecting] = React.useState(false);

     // OPTIONS
     const options = {
        // root: target.current,
        rootMargin: '0px',
        threshold: 0.5, // A threshold of 1.0 means that when 100% of the target is visible within the element specified by the root option, the callback is invoked.
    };
    // Observer
    const observer = new IntersectionObserver(([entry]) => setIsIntersecting(entry.isIntersecting),options);

    // Use Effect
    React.useEffect(() => {

        observer.observe(ref.current)
        // DISCONNECT 
        return () => observer.disconnect()

    }, []);
    // Return
    return isIntersecting
  };

useEffect 내부에서 _disconnect _ 메서드를 호출하여 대상 요소 관찰을 중지할 수 있습니다.
마지막으로 참 또는 거짓이 될 수 있는 상태를 반환합니다.
이 값을 기반으로 예를 들어 비디오를 표시하거나 숨김으로써 vDom을 변경할 수 있습니다.
대상 요소가 보이면 한계는 당신의 상상력입니다!

이 비디오 가이드에서 매우 간단한 구현, 좋은 관찰을 볼 수 있습니다 👀 ...

Video Guide
🆗 👋