Intersection Observer로 element 관찰하기🧐

intersection observer는 어떠한 element를 지정하고 그 element가 viewport 즉 화면에 보이는지를 감시하도록 제공한다

어떨때 사용할까?

• 스크롤 애니메이션을 만들고 싶을때
• 무한 스크롤 기능을 쉽게 구현할때

기본 사용법 알아보기

intersection observer는 javascript 내장 API 이기 때문에 따로 의존성을 설치해 줄 필요가 없다

const observer = new IntersectionObserver(callback, options);

 

callback

callback 함수는 기본 인자로 entries와 observer를 받는다

 

entries는 등록된 element와 부가 정보의 객체의 배열이라고 생각하면 좋다

중요하게 생각되는것만 알아보자면

• target - element 정보를 알려준다
• isIntersecting - 지정된 element가 화면에 보이는지 안보이는지를 알려준다

나는 이 두개 정도만 알면 된다고 생각한다

 

observer는 생성한 IntersectionObserver 인스턴스이다

 

options

• root - 무엇을 기준으로 element가 보였을때 callback을 실행 시킬건지를 정한다(기본은 viewport 기준)
• rootMargin - 지정한 root에 margin을 줄 수 있는 속성
• threshold - 관찰할 element가 얼마나 보였을때 callback을 실행 시킬건지를 정한다

method

• observe() - 관찰할 element를 등록하는 method이다
• unobserve() - 등록시킨 element를 등록 해제하는 method이다
• disconnect() - 등록된 모든 element를 해제하는 method이다
  
  

React에서 사용

react에서는 state가 리렌더링 될때마다 다시 intersection observer가 다시 선언되면 중복 선언되기 때문에 useEffect와 사용한다

  const divRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach((entry, i) => {
        console.log(entry, i);
      });
    });

    if (divRef.current) observer.observe(divRef.current);
  }, [divRef.current]);

 

마무리

intersection observer에 대해 알아보았는데 쉬운거 같으면서도 아직 잘모르겠다는 느낌을 받았다

나중에 무한 스크롤도 구현해보면서 더 깊이 이해해야겠다는 생각이 든다