DOM 트리(문서 구조)에 발생하는 변화를 관찰하고, 변화를 감지했을 때 콜백을 실행하는 Web API

• 특정 엘리먼트에 자식 추가/삭제, 속성 변경, 텍스트 변경 같은 변화가 일어나면 이를 감지
• React/Vue 같은 앱에서 페이지 이동 시 DOM이 바뀌어도 감지 가능

장, 단점

장점

• 이벤트 리스너(click, load 등)로는 잡을 수 없는 DOM 변화를 잡을 수 있음
• 비동기적으로 발생하는 UI 업데이트(SPA, Ajax 등) 대응에 최적

단점

• 감시 범위를 넓게 잡으면(특히 subtree: true) 성능에 부담이 큼
• 따라서 감시 대상은 최소화하고, 특정 시점에 disconnect() 해주는 게 좋음

사용법

// 1. 옵저버 생성
const observer = new MutationObserver((mutations, obs) => {
  for (const mutation of mutations) {
    console.log("변경 감지됨:", mutation);
  }
});

// 2. 대상 노드 선택
const targetNode = document.getElementById("app")!;

// 3. 관찰 시작
observer.observe(targetNode, {
  childList: true,        // 자식 노드의 추가/삭제 감지
  attributes: true,       // 속성(attribute) 변경 감지
  subtree: true,          // 하위 모든 자식까지 감지
});

// 4. 필요 시 관찰 중단
// observer.disconnect();

활용 예시