MutationObserver, 개념과 활용 예제

MutationObserver란 무엇인가?

MutationObserver 알아보자!

웹 개발 시 DOM(Document Object Model)의 변화를 감지하고 대응하는 것은 사용자 경험 향상에 중요합니다. JavaScript의 MutationObserver는 이러한 DOM 변경을 효율적으로 감지하고 처리할 수 있는 API입니다. MutationObserver의 개념과 활용법을 상세히 알아보겠습니다.

목차

MutationObserver

개념

MutationObserver는 DOM 트리의 변화를 감시하고, 변경이 발생하면 지정된 콜백 함수를 실행하는 JavaScript의 내장 객체입니다. 이전의 Mutation Events를 대체하며, 성능과 효율성 면에서 개선된 기능을 제공합니다. 이를 통해 노드의 추가, 제거, 속성 변경 등을 실시간으로 감지할 수 있습니다.

메서드 및 옵션

observe(target, options)

감시를 시작하는 메서드로, 관찰할 대상 노드와 옵션을 지정합니다. 옵션 객체에는 다음과 같은 속성이 포함될 수 있습니다.

childList: 자식 노드의 추가 또는 제거를 감지하려면 true로 설정합니다.

attributes: 속성의 변화를 감지하려면 true로 설정합니다.

subtree: 대상 노드의 모든 하위 노드를 감시하려면 true로 설정합니다.

attributeFilter: 감시할 속성 이름의 배열을 지정하여 특정 속성의 변화만 감지할 수 있습니다.

characterData: 노드의 데이터 변경을 감지하려면 true로 설정합니다.

disconnect()

감시를 중지하는 메서드로, 더 이상 변경 사항을 감지하지 않습니다.

takeRecords()

현재까지의 변화를 배열로 반환하며, 반환된 후에는 내부 기록이 초기화됩니다.

예제

// 감시할 대상 노드 지정
const targetNode = document.getElementById('odinbox-id');

// 감시 옵션 설정정
const config = { attributes: true, childList: true, subtree: true };

// 변화가 감지시 실행될 콜백 함수수
const callback = (mutationList, observer) => {
  mutationList.forEach((mutation) => {
    switch (mutation.type) {
      case 'childList':
        console.log('자식 노드가 추가되거나 제거되었습니다!');
        break;
      case 'attributes':
        console.log(`${mutation.attributeName} 속성이 변경되었습니다!`);
        break;
    }
  });
};

// MutationObserver 인스턴스 생성 및 콜백 함수
const observer = new MutationObserver(callback);

// 설정한 옵션 - 대상 노드 감시 시작
observer.observe(targetNode, config);

// 필요 시 감시 중지지
// observer.disconnect();

마무리

MutationObserver는 DOM의 변화를 실시간으로 감지하고 처리할 수 있는 도구입니다. 이를 활용하면 동적인 웹에서 사용자 인터페이스를 더욱 효율적으로 관리하고, 사용자 경험을 향상할 수 있습니다. 다양한 옵션과 메서드를 적절히 활용하여 원하는 DOM 변화를 감지하고 대응하는 로직을 구현해 보시기 바랍니다.