useWindowSize — 창 크기·브레이크포인트 추적 훅

제작 과정

한 줄 요약

window의 innerWidthinnerHeight를 resize 이벤트로 추적하고, 초기값을 0,0으로 둬 SSR에서도 hydration mismatch 없이 안전합니다.

이럴 때 필요해요

JS에서 현재 화면 폭을 알아야 할 때 조건부 렌더, 캔버스/차트 리사이즈, 가상 스크롤 계산, 브레이크포인트 분기 등. CSS 미디어쿼리로 안 되는 로직 분기에 씁니다.

어떻게 동작하나

마운트 시 한 번 측정하고 resize 리스너 등록.
리스너에서 {width, height} state 갱신 구독 컴포넌트 리렌더.
언마운트 시 리스너 정리. 초기 0,0이라 서버/클라 첫 렌더가 일치.

놓치기 쉬운 것

SSR에서 window 접근 금지 초기값은 0,0으로 두고 effect에서만 측정.
resize가 자주 발생하면 throttle을 얹어 리렌더를 줄일 수 있음.
요소 단위 크기는 ResizeObserver(useElementSize)가 더 정확 이 훅은 viewport 전용.

이런 곳에 써요

모바일/데스크탑 조건부 컴포넌트 분기
캔버스차트 DPR 리사이즈

import type { Metadata } from "next"; import { UseWindowSizeDemo } from "./-components/UseWindowSizeDemo"; export const metadata: Metadata = { title: "useWindowSize 훅 (데모)", description: "창(viewport) 크기를 추적하는 useWindowSize 훅. resize 이벤트로 width·height를 갱신하고 SSR 안전(초기 0,0 → 마운트 후 실제값). 현재 Tailwind 브레이크포인트·방향까지 실시간 표시.", robots: { index: false, follow: false }, }; export default function Page() { return ( <main className="flex min-h-[100dvh] items-center justify-center bg-gradient-to-br from-slate-50 via-white to-cyan-50/40"> <UseWindowSizeDemo /> </main> ); }