[JS] ResizeObserver

ResizeObserver

- DOM 요소의 크기 변화를 감지하는 웹 API이다.

---

1. ResizeObserver 생성

const resizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]): void => {
    entries.forEach(entry => {
        const { width, height } = entry.contentRect as { width: number; height: number };
        console.log(width, height);
    });
});

 

2. 요소 크기 변화 관찰 시작

- observe() 함수를 사용해 요소의 크기가 변화할 때마다 콜백 함수 실행

const element = document.querySelector('#root');

resizeObserver.observe(element);