sanguk.dev
작성완료
Mutation Observer 사용법

Mutation Observer 사용법

MutationObserver는 DOM의 변화를 비동기적으로 감지하는 API로, 성능 저하 없이 구조 변화, 속성 변경, 텍스트 변경 등을 감지할 수 있다. 주요 사용 사례로는 폼 자동 검증, UI 자동 변경, 외부 스크립트 감지 등이 있으며, 기본 사용 방법과 실전 예제도 제공된다. 사용 시 주의할 점은 감시 범위를 최소화하고 필요 시 해제하는 것이다.

JavaScriptWeb Front Developer

MutationObserver란?

MutationObserver는 DOM에서 발생하는 변화를 비동기적으로 감지할 수 있는 브라우저 내장 API입니다. 기존의 DOM 변경 감지 방식인 setInterval 폴링이나 이벤트 기반 한계점을 해결하며, 성능 저하 없이 구조 변화, 속성 변경, 텍스트 변경 등을 감지할 수 있습니다.

왜 사용해야 할까?

  • 폼 자동 검증 업데이트
  • 사용자 동적 입력에 따른 UI 자동 변경
  • 외부 스크립트나 라이브러리가 DOM을 수정할 때 감지
  • 특정 영역의 변화만 관찰하여 성능 최적화

기본 사용 방법

javascript
const target = document.getElementById('app');

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    console.log('변경 타입:', mutation.type);
  });
});

observer.observe(target, {
  childList: true,// 자식 노드 추가/삭제attributes: true,// 속성 변동 감지characterData: true,// 텍스트 노드 변경subtree: true// 하위 모든 노드 감시
});

실전 예제: 동적으로 추가된 요소에 자동 이벤트 바인딩

javascript
const list = document.querySelector('#items');

new MutationObserver(() => {
  const buttons = list.querySelectorAll('.item-btn');
  buttons.forEach((btn) => {
    if (!btn.dataset.binded) {
      btn.addEventListener('click', () => alert('clicked'));
      btn.dataset.binded = true;
    }
  });
}).observe(list, { childList: true, subtree: true });

주의할 점

  • 너무 넓은 범위의 subtree 감시는 비용이 증가할 수 있음
  • 불필요한 탐지를 피하기 위해 옵션을 최소화하는 것이 중요
  • 더 이상 필요 없으면 observer.disconnect()로 해제

정리

MutationObserver는 DOM 변화에 실시간으로 반응하는 UI를 만드는 데 강력한 도구입니다. 기존 방식보다 성능적 이점이 크고 구현도 간단해, 현대적인 웹 개발에서 필수적으로 활용할 수 있는 기술입니다.