observeResize

observeResize 함수는 요소 크기 변경을 감지하는 함수입니다. 크기가 변경되면 지정된 콜백 함수가 실행됩니다.

이 함수는 ResizeObserver를 사용하여 구현되었지만, 싱글톤 패턴을 사용하므로 성능이 더 우수합니다.

사용법

함수 가져오기:

import { observeResize } from 'mdui/functions/observeResize.js';

사용 예시:

// document.body의 크기 변경 감지
const observer = observeResize(document.body, function (entry, observer) {
  // 이때 document.body의 크기가 변경되었으며, entry를 통해 새 크기를 얻을 수 있습니다
  console.log(entry);

  // 이 메서드를 호출하여 감지 취소 가능
  observer.unobserve();
});

// 함수 반환값의 unobserve 메서드를 호출하여 감지 취소 가능
observer.unobserve();

API

observeResize(target: string | HTMLElement | JQ<HTMLElement>, callback: Callback): ObserveResize

target 매개변수는 CSS 선택자, DOM 요소 또는 JQ 객체일 수 있습니다.

Callback

(entry: ResizeObserverEntry, observer: ObserveResize) => void

콜백 함수에서 this는 ObserveResize를 가리킵니다.

ObserveResize

{
  unobserve: () => void;
}