브라우저 내장 메서드

date

Sep 1, 2023

slug

resize-observer

author

status

Public

ResizeObserver

MutationObserver와 비슷하게, ResizeObserver는 DOM 객체의 크기 변화를 감지한다. 정확히는 element의 border box, content box, SVGelement의 bounding box의 변화를 감지한다.

인스턴스 생성 후 콜백 함수를 넘겨주고 observe()를 실행하면 추적이 시작된다.


const observer = new ResizeObserver(callback);
const el = document.getElementById('root');

const callback = (entries, observer) => {
  entries.forEach(entry => {
    console.log(entry);
  }

observer.observe(el, options);

ResizeObserver의 options에 들어갈 수 있는 속성은 box 하나만 있다. 변경사항을 추적할 css box model을 설정하는 옵션으로, 아래 중 하나의 값이 들어갈 수 있다.

content-box (기본값)border-boxdevice-pixel-content-box

그러면 콜백 함수는 설정한 요소의 크기가 변경될 때마다 ResizeObserverEntry 인스턴스의 배열과, observer 자신을 파라미터로 받을 수 있다.

ResizeObserverEntry 인스턴스의 배열에 포함되는 속성들
contentRect(legacy) : 관찰 대상의 사각형 정보(DOMRectReadOnly)
target(legacy) : 관찰 대상 요소(Element)
contentBoxSize : 관찰 대상의 content-box(content) 크기
borderBoxSize : 관찰 대상의 border-box(content + padding + border) 크기

ResizeObserver는 IE는 지원하지 않기 때문에 실제 프로젝트에 사용하려면 폴리필 적용이 필요하다.
@juggle/resize-observer
resize-observer-polyfill
와 같은 폴리필이 소개되는 듯.
디바이스의 너비가 일정 픽셀 이하로 줄어들었을 때 콜백 함수를 활용하거나, 엘리먼트의 크기 변화를 감지해야 하는 경우에 유용하게 사용할 수 있다.

브라우저 내장 메서드 - ResizeObserver

ResizeObserver