React useMutationObserver 훅: React 에서 DOM 관찰 마스터하기

소개

이 랩에서는 React 에서 MutationObserver를 사용하여 DOM 트리에 발생한 변경 사항을 감지하는 방법, 즉 useMutationObserver 훅을 사용하는 방법을 배웁니다. 이 훅을 사용하면 변경 사항이 감지될 때 실행될 콜백 함수를 지정할 수 있으며, 옵션을 제공하여 옵저버 (observer) 의 동작을 사용자 정의할 수도 있습니다. 이 랩을 통해 React 애플리케이션에서 useMutationObserver 훅을 구현하는 방법을 이해할 수 있습니다.

React useMutationObserver 훅

index.html 및 script.js는 이미 VM 에 제공되었습니다. 일반적으로 script.js와 style.css에만 코드를 추가하면 됩니다.

DOM 트리에 발생한 변경 사항을 감지하려면 useMutationObserver 훅을 사용할 수 있습니다. 작동 방식은 다음과 같습니다.

훅은 ref, callback, 그리고 options의 세 가지 매개변수를 받습니다.
훅 내부에서는 callback과 options의 값에 의존하는 useEffect() 훅이 사용됩니다.
주어진 ref가 초기화되면 새로운 MutationObserver가 생성되고 callback이 전달됩니다.
MutationObserver.observe()는 주어진 ref에서 변경 사항을 감지하기 위해 주어진 options와 함께 호출됩니다.
컴포넌트가 언마운트될 때 MutationObserver.disconnect()를 사용하여 옵저버를 ref에서 제거합니다.

다음은 코드입니다.

const useMutationObserver = (
  ref,
  callback,
  options = {
    attributes: true,
    characterData: true,
    childList: true,
    subtree: true
  }
) => {
  React.useEffect(() => {
    if (!ref.current) return;

    const observer = new MutationObserver(callback);
    observer.observe(ref.current, options);

    return () => observer.disconnect();
  }, [callback, options, ref]);
};

App 컴포넌트에서 useMutationObserver 훅은 mutationRef 요소에 발생한 변경 사항을 감지하는 데 사용됩니다. incrementMutationCount 함수는 callback으로 전달됩니다.

const App = () => {
  const mutationRef = React.useRef();
  const [mutationCount, setMutationCount] = React.useState(0);

  const incrementMutationCount = React.useCallback(() => {
    setMutationCount((count) => count + 1);
  }, []);

  useMutationObserver(mutationRef, incrementMutationCount);

  const [content, setContent] = React.useState("Hello world");

  return (
    <>
      <label htmlFor="content-input">Edit this to update the text:</label>
      <textarea
        id="content-input"
        style={{ width: "100%" }}
        value={content}
        onChange={(e) => setContent(e.target.value)}
      />
      <div style={{ width: "100%" }} ref={mutationRef}>
        <div
          style={{
            resize: "both",
            overflow: "auto",
            maxWidth: "100%",
            border: "1px solid black"
          }}
        >
          <h2>Resize or change the content:</h2>
          <p>{content}</p>
        </div>
      </div>
      <div>
        <h3>Mutation count {mutationCount}</h3>
      </div>
    </>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<App />);

오른쪽 하단의 'Go Live'를 클릭하여 포트 8080 에서 웹 서비스를 실행하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

React useMutationObserver 훅

소개

React useMutationObserver 훅

요약