MutationObserver and ResizeObserver

Observer란?

흔히 Observer패턴이라고 객체의 상태가 변화하는것을 관찰 및 감시하기 위한 것이라고 생각하면 된다. 

MuationObserver와 ResizeObserver?

React에서의 컴포넌트에 height이나 width의 변화감지가 필요해 검색해본 결과 MutationObserver와 ResizeObserver를 발견할 수 있었다.
MutationObserver의 경우 DOM(DOM 3)에서의 특정 노드에 대한 변화를 감지할 수 있는 Web API이라고 하고 값으로는 속성값, 텍스트, 자식노드변화가 있다.

ResizeObserver의 경우는 DOM에서의 크기 변화에 특성화되 감지할 수 있는 Web API다. 
크기 변화의 값에는 border-box, content-box, SVGElement의 bounding box가 있다.
IE에서는 지원을 하지 않아서 polyfill이 필요하다.

MutationObserver의 config option

childList	자식 노드의 변화
attributes	해당 특성 노드의 속성값 변화
characterData	node.data에서의 변화 (text 값)
subtree	하위 모든 노드의 변화
attributeOldValue	변경되기 이전의 속성 값을 받을 수 있음
characterDataOldValue	변경되기 이전의 data 값을 받을 수 있음
attributeFilter	추적하는 속성 이름을 배열 형태로 받음

React에서의 적용 방법

MutationObserver

...

const ref = useRef(null);

const callback = useCallback((entries, observer)=>{
	...//필요한 이벤트
},[]);

React.useEffect(() => {
    if (ref.current) {
      const observer = new MutationObserver(callback);
      observer.observe(ref.current, options);
      
	  return () => observer.disconnect();
    }
 }, [callback, options]);


return (
<SomeDiv ref={ref}>
	...
</SomeDiv>
);

ResizeObserver

...
const ref = useRef(null):

useEffect(() => {
  if (!ref.current) return; 
  const resizeObserver = new ResizeObserver(() => {
    // 사이즈 변경시 실행할 이벤트
  });
  resizeObserver.observe(ref.current);

  return () => resizeObserver.disconnect(); 
}, []);

...