요소의 콘텐츠 박스 크기를 실시간 추적해 컨테이너 쿼리처럼 반응하는 UI
useMediaQuery가 뷰포트 기준이라면 useElementSize는 "이 컴포넌트가 들어간 컨테이너의 크기" 기준입니다. 같은 카드가 사이드바 안에선 1열, 메인 콘텐츠에선
4열로 표시돼야 할 때 부모 너비를 알 수밖에 없습니다. 내부 구현은 ResizeObserver 한 줄입니다. ref가 가리키는 요소를 observe하고, callback에서 contentBoxSize 또는 contentRect를 읽어 state로 노출합니다. (contentBoxSize는 최신 스펙일부 브라우저는 contentRect만 지원하므로 fallback)
데모는 컨테이너 우측에 드래그 핸들이 달려 있어 너비를 직접 줄일 수 있습니다. 폭이 360 / 560 / 800px 경계를 지날 때마다 그리드 컬럼이 1 2 3 4로
즉시 변하고, 하단의 breakpoint 카드도 활성 상태가 따라옵니다. 컨테이너 쿼리(CSS의 @container)와 같은 효과를 React 코드로 구현한 형태죠.
import type { Metadata } from "next";
import { UseElementSizeDemo } from "./-components/UseElementSizeDemo";
export const metadata: Metadata = {
title: "useElementSize — ResizeObserver 훅 (데모)",
description: "요소의 콘텐츠 박스 크기를 ResizeObserver로 실시간 추적하는 useElementSize 훅의 라이브 시연.",
robots: { index: false, follow: false },
};
export default function Page() {
return (
<main className="min-h-[100dvh] bg-white flex items-center justify-center">
<UseElementSizeDemo />
</main>
);
}