Resize Observer API

들어가며

약관 자동화 코드 적용 부분을 보다 Resize Observer API라는 존재를 처음 알게 되었습니다. (약관 자동화 코드가 궁금하신 분은 링크 참고해 주세요).
이 API 또한 굉장히 유용할 것 같다고 생각되어 Intersection Observer API 연장선으로 WEB APIs인 Resize Observer API를 소개하려 합니다.

 

Resize Observer API 란?

Resize Observer API는 요소의 크기를 감시하는 API입니다.

예를 들면 보통 width가 100%인 div의 넓이를 화면이 리사이즈 될 때마다 알고 싶다면 어떻게 구하시나요?

React 코드로 예시를 들어보면 필자는 글에서 소개하고 있는 API를 알기 전에는 아래와 같이 resize 이벤트를 통해서 구하고 있을 겁니다.

resize이벤트를 이용할 경우 document 뷰의 크기가 변경될 때마다 이벤트가 호출되기 때문에 메모리 누수가 오기 쉽습니다.
이런 누수를 방지하기 위해 removeEventListener로 이벤트를 꼭 제거해 주고 계속해서 호출되는 이벤트를 막기 위해 throttle, debounce 방법을 추가적으로 사용하는 경우가 대부분이죠.

하지만 오늘 소개하는 Resize Observer API를 통해서 이런 추가적인 방법 없이 요소의 크기를 쉽게 알아낼 수 있습니다. 또한 리렌더 작업이 최소화되기 때문에 성능 측면에서도 효율적 이게 동작합니다.

 

사용 방법

사용 방법은 간단합니다.
Resize Observer API를 사용하기 위해 먼저 new 연산자를 통해 객체를 생성합니다.

const observer = new ResizeObserver((entries) => {
  entries.forEach((entry) => {
    //entry.borderBoxSize
    //entry.contentBoxSize
    //entry.devicePixelContentBoxSize
    //entry.contentRect
    //entry.target
  });
});

그리고 타깃이 되는 요소를 observer() 메서드를 통해 연결합니다.

const boxRef = useRef< HTMLDivElement | null>(null);
observer.observe(boxRef.current);

여기서 osberver() 메서드는 관찰을 시작하겠다고 알려주는 역할입니다. 선언이 되어야 타깃 요소의 resize값을 체크하기 때문에 꼭 선언해 줍니다.

이제 ResizeObserver 콜백 함수인 ResizeObserverEntry를 통해 값을 얻을 수 있는데요.
총 5가지의 읽기 전용 값이 존재합니다.

사용되는 callback과 method를 정리해 보았습니다.

callback

---

borderBoxSize
관찰된 요소의 새 테두리 상자 크기를 포함하는 객체 배열입니다.
borderBoxSize는 padding + border + content 합친 크기입니다.

contentBoxSize
관찰된 요소의 새 콘텐츠 상자 크기를 포함하는 객체 배열입니다.
contetBoxSize는 content 단일 크기입니다.

devicePixelContentBoxSize
관찰된 요소의 디바이스 픽셀 단위로 새로운 borderBox 크기를 가지는 객체다.

contentRect
관찰된 요소의 새 크기를 포함하는 DOMRectReadOnly 객체다.
DOMRectReadOnly 객체 값인 x, y, top, left, right, bottom, widht, height 값을 알 수 있습니다.

target
div 넓이를 구하는 예제를 ResizeObserver API로 구현해 보겠습니다.

method

---

observe(target)
타깃 요소의 관찰을 시작합니다.

unobserve(target)
타깃 요소의 관찰을 중지합니다.

disconnect()
ResizeObserver 인스턴스가 관찰하는 모든 요소의 관찰을 중지합니다.
unobserve()와 다른 점은 unobeserve는 특정 타깃을 중지하지만 disconnect()는 인스턴스가 관찰하는 모든 요소를 중지합니다.

 

Resize Observer API 사용

마지막으로 div 넓이를 구하는 예제를 ResizeObserver API로 구현해 보면 아래와 같습니다.
아래 예제에서 테스트해 보세요.

 

마치며

Resize Observer API에 대해 알아보았습니다.

앞으로도 이런 Web APIs를 잘 활용하면 실무에서 성능 측면에 있어 향상된 퍼포먼스를 보일 수 있을 것 같습니다.

또 유용한 Web APIs를 발견한다면 계속해서 시리즈로 만들어서 스터디 겸 기록용으로 남기도록 하겠습니다.

감사합니다.

이 글은 pxd XE Group Blog에서도 보실 수 있습니다.

 

참고자료

• ResizeObserver API MDN