[자바스크립트] IntersectionObserver

일단 MDN 먼저 깔고 시작하기

https://developer.mozilla.org/ko/docs/Web/API/IntersectionObserver/IntersectionObserver

IntersectionObserver.IntersectionObserver() - Web API | MDN

 

IntersectionObserver는 내 화면에 선택한 대상이 들어오는지를 확인하는 옵져버이다!

스타에서도 옵져버는 계속 감시하는 애니까... 비슷한 의미로 보면된다.

 

옵져버할 대상의 엘리먼트를 지정하고 이 요소가화면에 보여졌을 때, 콜백함수가 호출되는 형태이다.

new IntersectionObserver(callback[, options]);

options에는 옵져버를 조정할 수 있는 옵션들이 있는데,  

threshold의 옵션은 특히 지정된 엘리먼트가 화면에서 몇퍼센트의 비율로 보였을 때 보였다고 할 것인지를 지정하는 것으로 보면된다.

기본값은 0인데 0이면 엘리먼트가 진짜 조금이라도 화면에 걸치게 되면 옵져버가 엘리먼트가 나타났다고 생각한다.

1은 화면에 엘리먼트가 모두 보여야지 옵져버가 화면에 엘리먼트가 나타났다고 생각한다.

이부분을 조절하게 되면 특정 위치에서 화면에 엘리먼트가 보였을 때,

invisible하게 둔 엘리먼트를 visible하게 보인다던지 그러한 이벤트를 호출할 수 있다.

생각보다 유용하게 사용할 수 있는 아이!

 

리엑트에서도 Hooks로 이 옵져버를 추가해놓으면 여러군데 사용할 수 있으니 꿀! 커스텀 훅스 코드는 아래와 같다!

import { useEffect, useState } from 'react';

// Hook
export default function useOnScreen(ref: any, rootMargin = '0px') {
  const [isIntersecting, setIntersecting] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        setIntersecting(entry.isIntersecting);
      },
      { rootMargin }
    );
    if (ref.current) {
      observer.observe(ref.current);
    }
    return () => {
      observer && ref && ref.current && observer.unobserve(ref.current);
    };
  }, [ref]);

  return isIntersecting;
}