[javascript] DOM 변화를 관측하여 observer 패턴 사용

MutationObserver

 

레거시한 코드들을 유지보수 해야 하는 도중, dom 상태를 관측하여 특정 함수들을 실행시키고 싶은 경우가 생겼다.

observer 패턴을 이용하여 react 에서의 getState 처럼, 특정 값이 변경 되었을 때 코드를 실행하고 싶었는데, js에서 

MutationObserver 라는걸 지원해 주는 것을 확인 했다.

 

https://developer.mozilla.org/ko/docs/Web/API/MutationObserver

MutationObserver - Web API | MDN

이외의 변화 감지 종류에도 여러가지가 존재했는데, 아래 포스팅에서 정리가 잘 되어 있어서 추가적으로 첨부.

https://velog.io/@ggong/MutationObserver

DOM 변화 감지하기 - MutationObserver & ResizeObserver

 

 

공식 문서는 아래와 같다.

https://dom.spec.whatwg.org/#interface-mutationobserver

DOM Standard

 

공식문서와, 포스팅 들에서 설명이 잘 되어 있어서 추가적으로 첨부할게 없어서 보기 좋게끔 정리만 해 보자면,

javascript
interface MutationObserver {
  constructor(MutationCallback callback);

  undefined observe(Node target, optional MutationObserverInit options = {});
  undefined disconnect();
  sequence<MutationRecord> takeRecords();
};

 

MutationObserver는 위와 같은 인터페이스 구성을 따르고 있다.

 

샘플 코드를 예제로 보자면 (참조)

javascript
// 변경을 감지할 노드 선택
const targetNode = document.getElementById("some-id");

// 감지 옵션 (감지할 변경)
const config = { attributes: true, childList: true, subtree: true };

// 변경 감지 시 실행할 콜백 함수
const callback = (mutationList, observer) => {
  for (const mutation of mutationList) {
    if (mutation.type === "childList") {
      console.log("자식 노드가 추가되거나 제거됐습니다.");
    } else if (mutation.type === "attributes") {
      console.log(`${mutation.attributeName} 특성이 변경됐습니다.`);
    }
  }
};

// 콜백 함수에 연결된 감지기 인스턴스 생성
const observer = new MutationObserver(callback);

// 설정한 변경의 감지 시작
observer.observe(targetNode, config);

// 이후 감지 중단 가능
observer.disconnect();

 

위와 같이 작업하여 사용 할 수 있다.

 

감지 옵션에 들어가는 내용만 추가적으로 서술하자면 아래 같은 내용들이 존재 한다.

• childList
• attributes
• characterData 
• subtree
• attributeOldValue
• chracterDataOldValue
• attributeFilter

위 같은 내용으로 쉽게 DOM의 변경점에 대하여 observer 패턴을 적용할 수 있다.

언제 나온것 인지.. 헤헤