August 20, 2025

🙈 Mutation Observer 오용: 무한 루프와 성능 저하, 그리고 예측 불가능한 동작

JavaScript

React

성능

컴포넌트

렌더링전략

아키텍처

에러처리

Summary

Mutation Observer를 부주의하게 사용하면 무한 루프, 성능 저하, 예측 불가능한 동작을 초래할 수 있습니다. 상태 관리, 비동기 처리, 감시 범위 최소화, disconnect() 호출 등을 통해 이러한 문제를 해결해야 합니다.

Why Wrong?

Mutation Observer는 DOM 변경을 감지하는 강력한 API이지만, 잘못 사용하면 무한 루프, 성능 저하, 예측 불가능한 동작을 유발할 수 있습니다. 특히 콜백 함수 내에서 감지 대상 DOM을 직접 변경하는 경우, Mutation Observer가 다시 트리거되어 무한 루프에 빠질 위험이 있습니다. 또한, 필요 이상의 넓은 범위의 DOM 변경을 감시하거나, 불필요하게 많은 Mutation Observer 인스턴스를 생성하는 경우 성능 저하를 초래할 수 있습니다. 이는 브라우저의 렌더링 파이프라인을 방해하고 사용자 경험을 악화시킵니다.

How to Fix?

Mutation Observer 콜백 함수 내에서 감지 대상 DOM을 직접 변경하는 것을 피해야 합니다. 상태 관리 라이브러리를 활용하여 DOM 변경을 유발하는 상태를 업데이트하거나, 비동기적으로 DOM을 변경하는 방식으로 무한 루프를 방지할 수 있습니다. 또한, 감시 범위를 최소화하고, 필요한 Mutation Observer 인스턴스만 생성하여 성능을 최적화해야 합니다. 감시를 중단해야 하는 시점에 disconnect() 메서드를 호출하여 메모리 누수를 방지하는 것도 중요합니다.

Before Code (Bad)

import React, { useEffect, useRef } from 'react';

function BadComponent() {
  const elementRef = useRef(null);

  useEffect(() => {
    const observer = new MutationObserver((mutationsList) => {
      mutationsList.forEach(() => {
        // ❌ 직접 DOM 변경 -> 무한 루프 가능성!
        elementRef.current.textContent = 'DOM Updated!';
      });
    });

    observer.observe(elementRef.current, { characterData: true, subtree: true, childList: true });

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

  return <div ref={elementRef}>Initial Text</div>;
}

export default BadComponent;

After Code (Good)

import React, { useState, useEffect, useRef } from 'react';

function GoodComponent() {
  const [text, setText] = useState('Initial Text');
  const elementRef = useRef(null);

  useEffect(() => {
    const observer = new MutationObserver((mutationsList) => {
      mutationsList.forEach(() => {
        // DOM 변경 감지 후 상태 업데이트
        setText('DOM Changed!');
      });
    });

    observer.observe(elementRef.current, { characterData: true, subtree: true, childList: true });

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

  return <div ref={elementRef}>{text}</div>;
}

export default GoodComponent;

Mutation Observer API에 대한 공식 문서입니다. Mutation Observer 사용법과 옵션에 대한 자세한 정보를 제공합니다.

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

상태 관리를 위한 React의 useState 훅에 대한 공식 문서입니다. DOM 변경을 상태 업데이트로 우회하는 방법을 이해하는 데 도움이 됩니다.

https://react.dev/reference/react/useState