ResizeObserver

ResizeObserver

ResizeObserver는 브라우저에서 제공하는 기능으로, DOM 요소의 크기 변화를 감지하고 관찰하는 데 사용되는 API. ResizeObserver를 사용하면 요소의 크기가 변경될 때마다 콜백 함수를 호출하여 해당 변경 사항을 처리할 수 있다. 이 API는 주로 웹 애플리케이션에서 요소의 크기에 따른 레이아웃 조정이나 UI 업데이트에 활용된다.

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

function App() {
  const targetRef = useRef(null);

  useEffect(() => {
    const resizeObserver = new ResizeObserver(entries => {
      for (const entry of entries) {
        const { width, height } = entry.contentRect;
        console.log(`Element size changed: width ${width}, height ${height}`);
      }
    });

    if (targetRef.current) {
      resizeObserver.observe(targetRef.current);
    }

    return () => {
      resizeObserver.disconnect();
    };
  }, []);

  return (
    <div>
      <div ref={targetRef} style={{ width: '200px', height: '200px', background: 'lightblue' }}>
        Resize me!
      </div>
    </div>
  );
}

export default App;

targetRef를 사용하여 ResizeObserver를 대상 요소에 연결한다. useEffect를 사용하여 ResizeObserver를 생성하고 관찰하며, 컴포넌트가 언마운트될 때 ResizeObserver를 해제한다. ResizeObserver의 콜백 함수에는 변경된 크기 정보가 contentRect 속성으로 전달된다.

ResizeObserver를 사용하면 컴포넌트의 크기 변화나 레이아웃 조정을 감지하여 적절한 작업을 수행할 수 있다. 이 API는 브라우저가 제공하는 효율적인 방법으로 요소 크기를 관찰하고 처리할 수 있도록 도와준다.

속성

• borderBoxSize: 변경된 요소의 테두리 박스 크기를 나타내는 객체. inlineSize와 blockSize 속성으로 각각 요소의 가로 크기와 세로 크기를 제공한다. 이 값은 테두리를 포함한 전체 크기를 나타낸다.

• contentBoxSize: 변경된 요소의 콘텐츠 박스 크기를 나타내는 객체. inlineSize와 blockSize 속성으로 각각 요소의 가로 크기와 세로 크기를 제공한다. 이 값은 테두리와 패딩을 제외한 콘텐츠 영역의 크기를 나타낸다.

• contentRect: 변경된 요소의 크기 정보를 담는 DOMRectReadOnly 객체. 이 객체는 다양한 크기 관련 속성을 포함하고 있다.

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

function App() {
  const targetRef = useRef(null);

  useEffect(() => {
    const resizeObserver = new ResizeObserver(entries => {
      for (const entry of entries) {
        const { borderBoxSize, contentBoxSize, contentRect } = entry;
        console.log('Border Box Size:', borderBoxSize);
        console.log('Content Box Size:', contentBoxSize);
        console.log('Content Rect:', contentRect);
      }
    });

    if (targetRef.current) {
      resizeObserver.observe(targetRef.current);
    }

    return () => {
      resizeObserver.disconnect();
    };
  }, []); //두 번째 인자로 빈 배열[]을 전달하면 useEffect는 컴포넌트가 마운트된 후 한 번만 실행된다. 그러나 ResizeObserver를 사용하면 브라우저 창 크기 변화를 관찰하는 동안에는 useEffect가 컴포넌트의 생명주기 동안 지속적으로 실행된다.

  return (
    <div>
      <div ref={targetRef} style={{ width: '200px', height: '200px', background: 'lightblue' }}>
        Resize me!
      </div>
    </div>
  );
}

export default App;

observe 메서드

특정 DOM 요소를 관찰(observe)하도록 설정하는 역할로 이 메서드를 사용하면 ResizeObserver가 관찰 중인 요소의 크기 변화를 감지하고 그에 대한 콜백 함수를 호출한다.

resizeObserver.observe(targetElement);

resizeObserver는 ResizeObserver 객체를 나타내며, targetElement는 크기 변화를 관찰하고자 하는 DOM 요소이다.

예를 들어, 아래의 코드에서 resizeObserver 객체는 targetRef.current에 대해 observe 메서드를 호출하여 해당 요소의 크기 변화를 관찰하도록 설정

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

function App() {
  const targetRef = useRef(null);

  useEffect(() => {
    const resizeObserver = new ResizeObserver(entries => {
      for (const entry of entries) {
        const { contentRect } = entry;
        console.log('Element size changed:', contentRect);
      }
    });

    if (targetRef.current) {
      resizeObserver.observe(targetRef.current); // targetRef 요소의 크기 변화를 관찰
    }

    return () => {
      resizeObserver.disconnect(); // 컴포넌트 언마운트 시 ResizeObserver 연결 해제
    };
  }, []);

  return (
    <div>
      <div ref={targetRef} style={{ width: '200px', height: '200px', background: 'lightblue' }}>
        Resize me!
      </div>
    </div>
  );
}

export default App;