wellyshen/react-cool-dimensions

개요 요소의 크기를 측정하고 반응형 컴포넌트를 처리하는 React hook이다. ResizeObserver API를 활용해 컴포넌트 수준의 반응형 디자인(컨테이너 쿼리)을 구현할 수 있다.

핵심 내용 `useDimensions` 훅으로 DOM 요소의 width, height를 실시간으로 구독하며, `currentBreakpoint`를 통해 컨테이너 크기 기반 브레이크포인트를 정의할 수 있다. 성능을 위해 ResizeObserver를 내부적으로 최적화하고 불필요한 리렌더링을 방지한다.

기존 대비 차별점 window resize 이벤트 기반 방식은 컨테이너 크기 변화를 감지하지 못한다. ResizeObserver를 사용해 부모 컨테이너 크기에 따라 컴포넌트가 스스로 레이아웃을 조정하는 진정한 컨테이너 쿼리를 구현할 수 있다.

활용 가능성 다양한 레이아웃에 배치되는 재사용 컴포넌트, 대시보드 위젯, 컨테이너 크기 기반 조건부 렌더링, 반응형 차트/그래프 컴포넌트 등에 활용할 수 있다.

참고 자료 - 원본