- 리사이즈 옵저버 API는 특정 웹 요소의 크기 변화를 효율적으로 감지하는 표준 웹 기술입니다. 📏
- 기존
window.resize이벤트는 브라우저 창 크기만 감지하며, 특정 요소 감지 시 복잡하고 비효율적인 수동 처리가 필요했습니다. 🤯 - 리사이즈 옵저버 API는 특정 요소의 크기 변화를 직접 감지하고 비동기적으로 실행되어 성능과 개발 편의성을 크게 향상시킵니다. 🚀
ResizeObserver객체를 생성하고 콜백 함수를 지정하여 크기 변화 감지 시 실행될 로직을 정의합니다. ✍️observe()메서드로 감지할 DOM 객체를 등록하고,unobserve()메서드로 감지를 해제할 수 있습니다. 🚫- 콜백 함수는 크기 변화가 감지된 요소들의 정보를 담은
entries배열을 인자로 받아contentRect,contentBoxSize등으로 상세 크기 정보를 얻을 수 있습니다. 📦 - 타이머 기반의 비효율적인 폴링 방식 대신, 세련되고 효율적인 크기 변화 감지 코드를 작성할 수 있게 합니다. 💡
Recommanded Videos
