intersection observer

특정 요소가 Viewport 안에 들어오는 순간이나, 나가는 순간을 감시
예를 들면
어떤 요소의 위치가 화면(Viweport)에 들어오면 image 로딩,
마지막 요소 또는 뒤쪽의 요소가 화면에 들어오면 데이터 패칭해서 보여주기,
어떤 요소의 위치가 화면에 들어오면, 애니메이션 시작하도록 구현
의 작업들을 할때 사용할 수 있음

스크롤 값을 받아와서 요소의 절대값, 상대값으로 계산 하는 방식보다 편리하고, 성능도 더 좋음

intersection observer 를 사용하는 이유

• 페이지가 스크롤 되는 도중에 발생하는 이미지나 다른 컨텐츠를 지연 로딩
• 많은 데이터를 한번에 받아오지 않고 무한 스크롤로 나누어 요청
• 광고 수익을 계산하기 위한 용도로 광고의 가시성 보고
• 표시 여부에 따라 애니메이션과 같은 작업을 수행 할지 여부를 결정

리액트에서 사용하는 방법

  const containerRef = useRef<HTMLElement>(null);
  const [trigger, setTrigger] = useState(false);

  useEffect(() => {
    const options = {
      // root: document.querySelector('#scrollArea'), // id로 특정 요소를 지정할 때 사용
      // rootMargin: '0px', // 특정 요소에 마진값 주고 싶을때 사용
      threshold: 1.0 // 0이면 뷰포트에 한발자국이라도 들어오자마자, 1이면 뷰포트에 요소가 전부 들어오면
    }
    
    const observer = new IntersectionObserver(callbackFunction, options);

    if (containerRef.current) observer.observe(containerRef.current);

    return () => {
      if (containerRef.current) observer.unobserve(containerRef.current);
    };
  }, [containerRef]);

  const callbackFunction = (entries: IntersectionObserverEntry[]) => {
    const [entry] = entries;
    setTrigger(entry.isIntersecting); // true/false 값으로 줌
    // entry 에 들어있는 값 참고자료 참조
  };

무한 스크롤 구현 시,

특정요소를 감시하도록 코드를 작성해서,
true가 될때,
데이터 패칭 하는 함수를 실행하고,
데이터를 뒤쪽에 붙여줘서 랜더링 하고,
옵저버를 지워주면 될거 같습니다. (아래참고)

실행하고 옵저버 지우는 방법

  const callbackFunction = (entries: IntersectionObserverEntry[], observer: IntersectionObserver) => {
    const [entry] = entries;

    setTrigger(entry.isIntersecting);
    
    if (containerRef.current && entry.isIntersecting) { // 처음에 한번 isIntersecting이 false로 실행이 되기 때문에 &&로 붙여줌
      observer.unobserve(containerRef.current); // 두번째 인자로 전달되는 자기 자신(observer), unobserve(타겟요소) 로 삭제
    }
  };

참고자료

intersection observer
entry에 들어있는 값
블로그