ResizeObserve와 document.onresize는 브라우저 사이즈 값을 리턴해 주는 api입니다.
document.onresize의 경우 이벤트 리스너에 연결을 해야하고, 이 안에서 변경된 부분들이 어디고 영향을 받은 요소가 무엇인지 파악할 필요가 있습니다.
그런 다음 getBoundingClientRect() 또는 getComputedStyle() 함수를 이용해 엘레먼트들이 리사이징된 후의 값을 계산해 줘야 합니다.
window.addEventListener('resize', () => {
calculateAfterResizing();
})반면 ResizeObserve의 경우 관찰 중인 엘레먼트가 있다면 어떤 것이든 변화를 감지해서 변화된 사이즈를 제공해 줍니다.
var ro = new ResizeObserver(entries => {
for (let entry of entries) {
const cr = entry.contentRect;
console.log('Element:', entry.target);
console.log(`Element size: ${cr.width}px x ${cr.height}px`);
console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
}
});
// 하나 또는 다중 엘레먼트 관찰 가능
ro.observe(someElement);ResizeObserve 함수는 ResizeObserverEntry라는 속성을 이용해 관찰 중인 객체인 엘레먼트를 반환합니다.
ResizeObserve의 콜백 함수를 통해 크기를 조정할 때 자주 발생하는 무한 콜백 루프를 방지하고, 콜백 안에서 사이즈가 변화되는 경우 DOM의 더 깊은 요소만 처리해서 계속해서 순환되는 에러 현상을 보완했다고 합니다. 🙂
onresize 함수보다 더 기능이 좋은 녀석이 나왔구나 정도로 이해를 했고 기회가 된다면 리사이징 작업을 할 때 ResizeObserve를 써봐야겠다.
참고
https://web.dev/resize-observer/
https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver
