React에서 Resize Observer API로 반응형 컴포넌트 만들기

React 애플리케이션에서 컴포넌트 크기에 따라 동적으로 UI를 변경하고 싶을 때, Resize Observer API가 매우 유용합니다. 이번 글에서는 Resize Observer API를 활용하여 반응형 컴포넌트를 만드는 방법을 자세히 설명합니다.

1. Resize Observer API란?

Resize Observer API는 요소의 크기 변화를 감지할 수 있는 브라우저 내장 API입니다. 기존 윈도우 사이즈나 CSS 미디어 쿼리만으로는 어려운, 특정 컴포넌트 크기에 따른 세밀한 반응형 처리가 가능합니다.

2. React에서 Resize Observer 사용하기

React에서는 useEffect와 useState를 조합하여 Resize Observer를 쉽게 사용할 수 있습니다. 요소에 ref를 걸고, ref를 통해 크기 변화를 구독하는 방식입니다.

3. 예제 코드

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

function ResponsiveBox() {
  const boxRef = useRef(null);
  const [size, setSize] = useState({ width: 0, height: 0 });

  useEffect(() => {
    if (!boxRef.current) return;

    const observeTarget = boxRef.current;
    const resizeObserver = new ResizeObserver(entries => {
      for (let entry of entries) {
        const { width, height } = entry.contentRect;
        setSize({ width, height });
      }
    });

    resizeObserver.observe(observeTarget);

    // Cleanup
    return () => { resizeObserver.unobserve(observeTarget); };
  }, []);

  return (
    

      <p>Width: {Math.round(size.width)}px</p>
    
  );
}

export default ResponsiveBox;

4. 설명

위 예제에서 boxRef는 관찰 대상 div 요소를 참조합니다. ResizeObserver는 이 요소의 크기 변화를 감지하며, 변경될 때마다 상태를 업데이트하여 배경색을 변경합니다. 크기가 300px 초과시 녹색, 미만일 때는 빨간색으로 표시합니다.

5. 활용 팁

• 다양한 스타일, 글자 크기, 레이아웃 변경에 활용 가능
• 서드파티 UI 라이브러리와 같이 크기 측정이 필요한 컴포넌트에 응용
• 성능을 고려해 필요 시 옵저버 해제를 철저히 처리

이처럼 React와 Resize Observer API를 활용하면 더 다양한 상황에서 세밀한 반응형 UI 구현이 가능합니다.