Observer API

개발을 진행하다 보면 특정 요소의 크기나 속성 등의 변화를 추적해야 하는 case가 많이 생깁니다. 그럴 때마다 외부 라이브러리를 찾는 것보다 Observer API를 통해 직접 간단하게 구현하는 것이 더 깔끔하게 프로젝트를 구성할 수 있습니다. 자주 사용하는 Observer API 위주로 설명을 진행하겠습니다.

 

요소의 크기 감지 ResizeObserver

ResizeObserver는 특정 요소의 크기 변화를 관찰하여 변화가 일어날 경우 지정된 callback 함수를 실행합니다.

※ window resize event의 경우 브라우저의 크기 변화를 관찰

 

사용방법

// ResizeObserver 요소 지정
const targetElement = document.querySelector('.className');

const callbackFC = (entries, observer) => {
  // function callback
};

const observer = new ResizeObserver(callbackFC);

// observe
observer.observe(targetElement);

// observe 종료
observer.unobserve(targetElement);

 

ResizeObserver를 통해 요소의 크기가 변화에 따라 지정된 함수를 호출할 수 있습니다.

 

요소의 가시성 감지 IntersectionObserver

IntersectionObserver는 특정 요소의 가시성을 관찰하여 요소와 viewport의 교차점의 변화가 일어날 경우 지정된 callback 함수를 실행합니다.

 

사용방법

// IntersectionObserver 요소 지정
const targetElement = document.querySelector('.className');

const callbackFC = (entries, observer) => {
  // function callback
};

// 아래 config 참고
const configOptions = { threshold: 0.5 };

const observer = new IntersectionObserver(callbackFC, configOptions);

// observe
observer.observe(targetElement);

// observe 종료
observer.unobserve(targetElement);

 

Config

• root: observe로 지정된 요소의 가시성을 확인할 때 사용되는 뷰포트 요소, root는 observe로 지정된 요소의 조상 요소여야 함.
• rootMargin: root가 가진 margin
• threshold: observe로 지정된 요소의 가시성 percentage

 

IntersectionObserver를 통해 요소의 지정된 수치의 가시성에 따라 지정된 함수를 호출할 수 있습니다.

 

DOM의 변경을 감지 MutationObserver

MutationObserver는 특정 DOM의 변화를 관찰하여 DOM의 속성과 자식노드 등의 변화가 일어날 경우 지정된 callback 함수를 실행합니다.

 

사용방법

// MutationObserver 요소 지정
const targetElement = document.querySelector('.className');

const callbackFC = (mutations) => {
  // function callback
};

const observer = new MutationObserver(callbackFC);

// 아래 config 참고
const configOptions = { attributes: true, childList: true, characterData: true };

// observe
observer.observe(targetElement, configOptions);

// observe 중지
observer.disconnect();

 

Config

• childList: 타겟 노드의 자식 노드의 변경
• attributes: 타겟 노드의 속성 변경
• characterData: 타겟 노드의 data(node.data) 변경
• subtree: 타겟 노드의 모든 하위 노드의 변경
• attributeOldValue: attributes 가 true일 경우 타겟 노드의 이전 이후 속성 변경을 전달
• characterDataOldValue: characterData가 true일 경우 타겟 노드의 이전 이후 data 변경을 전달
• attributeFilter: 특정 attributes 변경이 필요할 경우 해당 attributes local name을 배열 형태로 지정

참고 사항으로 아래와 같은 주의가 필요합니다.

config는 최소한 childList, attributes, 또는 characterData는 true로 설정해야 합니다. 그렇지 않으면 'An invalid or ilegal string was specified' 오류가 발생합니다.
인용 [https://developer.mozilla.org/ko/docs/Web/API/MutationObserver#mutationobserverinit]

 

MutationObserver를 통해 DOM의 특정 요소의 변화에 따라 지정된 함수를 호출할 수 있습니다.

 

마무리

Observer API를 사용하며 특정 요소의 원하는 변화를 추적하여 함수를 실행시킬 수 있지만 불필요한 상황에서도 계속 추적하는 걸 막기 위해 Observer API의 해제도 고려해야 됩니다.

필요한 기능이 있을 때마다 새로운 라이브러리를 설치하여 사용하기보단 필요에 따라 간단한 기능의 경우 Observer를 사용하여 dependency를 줄이는 것도 좋겠습니다.

 

---

참고 자료

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

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

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