9. React에서 observer 사용하기

가끔은 JS에서 쉽게 사용하던 스택들을 React에서는 어떻게 사용해야할지 감이 안잡히는 경우가 있다.
대표적으로 observer가 그러한데, 이는 observer의 기초를 구현해놨다.

해당 코드의 동작 방식은 Observer 컴퍼넌트가 생성되면 생성된 컴퍼넌트를 observer로 타겟한 후, 부모에게 넘겨받은 func를 실행하는 코드이다.

import { useEffect, useMemo, useRef } from "react";

interface IProps {
  func: (i: number) => void;
  funcValue: number;
}

const Observer = ({ func, funcValue }: IProps): JSX.Element => {
  const observerElem: React.MutableRefObject<null> = useRef(null);

  const observer = useMemo<IntersectionObserver>(() => {
    return new IntersectionObserver(
      async (entries) => {
        if (!entries[0].isIntersecting) return;

        //실행할 함수
        func(funcValue);
        console.log("옵저버 실행");

        //옵저버 재실행
        observer.unobserve(entries[0].target);
        if (observerElem.current) observer.observe(observerElem.current);
      },
      { threshold: 0.1 }
    );
  }, [func, funcValue]);

  useEffect(() => {
    if (observerElem.current) observer.observe(observerElem.current);
  }, [observerElem, observer]);

  return <div ref={observerElem} className={`p-3`}></div>;
};

export default Observer;