useResizeObserver

Resize Observer API를 사용하여 요소의 크기 변화를 관찰하는 Hook입니다. 반응형 레이아웃, 동적 크기 조정이 필요한 컴포넌트에 유용합니다.

Props

이름	타입	설명	기본값
onResize	`(entry: ResizeObserverEntry) => void`	크기 변경 시 호출되는 콜백 함수	-

Return

containerRef: 크기 변화를 관찰할 요소에 연결할 ref 객체

Usage

import { useResizeObserver } from '@teamsparta/react';
 
function Example() {
  const containerRef = useResizeObserver({
    onResize: (entry) => {
      console.log('너비:', entry.contentRect.width);
      console.log('높이:', entry.contentRect.height);
    },
  });
 
  return <div ref={containerRef}>크기가 변하는 요소</div>;
}

Example

반응형 그리드

function ResponsiveGrid() {
  const [columns, setColumns] = useState(3);
 
  const containerRef = useResizeObserver({
    onResize: (entry) => {
      const width = entry.contentRect.width;
      if (width < 600) setColumns(1);
      else if (width < 900) setColumns(2);
      else setColumns(3);
    },
  });
 
  return (
    <div
      ref={containerRef}
      style={{
        display: 'grid',
        gridTemplateColumns: `repeat(${columns}, 1fr)`,
      }}
    >
      {items.map((item) => (
        <div key={item.id}>{item.content}</div>
      ))}
    </div>
  );
}

동적 차트 크기

function ResizableChart() {
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
 
  const chartRef = useResizeObserver({
    onResize: (entry) => {
      setDimensions({
        width: entry.contentRect.width,
        height: entry.contentRect.height,
      });
    },
  });
 
  return (
    <div ref={chartRef} style={{ width: '100%', height: '100%' }}>
      <Chart
        width={dimensions.width}
        height={dimensions.height}
        data={chartData}
      />
    </div>
  );
}

usePreserveCallback useStopwatch