[web API] ResizeObserver: 크기변화 감지

[javascript] ResizeObserver vs resize event

[react][event][resize][Dimensions] Resize event listener using React hooks

Why do we need to use ResizeObserver?

window는 resize event를 사용해 resize를 할 수 있다

window.addEventListener("resize", function() {
  // window resize시 처리
})

DOM은 window처럼 resize 이벤트를 사용해 size 변화를 감지할 수 없다.

ResizeObserver를 사용한 react hook을 만들어 보자

import { useEffect, useState, useRef } from 'react';

type ResizeObserverCallback = (entry: ResizeObserverEntry) => void;

export const useResizeObserver = ($dom: HTMLElement | null | undefined, callback) => {
  const [rect, setRect] = useState({ height: 0, width: 0 });

  const observerRef = useRef<ResizeObserver | null>(null);
  useEffect(() => {
      // create on mount
    observerRef.current = new ResizeObserver((entries) => {
      for (const entry of entries) {
        setRect(entry.contentRect);
        callback && callback(entry);
      }
    });

    return () => observerRef.current?.disconnect(); // release on unmount
  }, []);

  useEffect(() => {
    if (!$dom) return;
    if (!observerRef.current) return;

    observerRef.current.observe($dom);

    return () => observerRef.current?.unobserve($dom);
  }, [$dom]);

  return { height: rect.height, width: rect.width };
};