viewport breakpoint·prefers-color-scheme 등을 JS에서 그대로 구독
CSS만으론 처리가 어려운 분기가 있습니다. 모바일에선 carousel을 쓰고 데스크톱에선 grid를 쓰고 싶다면, 결국 컴포넌트 자체가 달라져야 합니다. useMediaQuery(query)는 window.matchMedia를 React state로 들고 있어, JSX 안에서 if (isMobile) return Carousel /처럼 조건 분기를 자연스럽게 작성할 수 있습니다. SSR 안전성도 신경 썼습니다. 첫 렌더에는 false를 반환하고, 마운트 후 effect에서 실제 값을 동기화 + change 이벤트 구독으로 창 리사이즈에 반응합니다. 그래서 hydration 미스매치 없이 동작합니다.
데모는 sm/md/lg/xl 4단 breakpoint를 색깔로 활성화하고, prefers-color-schemeprefers-reduced-motionhoverorientation까지 함께 보여줍니다.
시스템 다크모드를 토글하거나 창 크기를 줄여 보면 즉시 반응합니다.
import type { Metadata } from "next";
import { UseMediaQueryDemo } from "./-components/UseMediaQueryDemo";
export const metadata: Metadata = {
title: "useMediaQuery — CSS 미디어쿼리 훅 (데모)",
description: "viewport breakpoint·prefers-color-scheme 등 CSS media query를 JS에서 실시간 구독하는 훅의 라이브 시연.",
robots: { index: false, follow: false },
};
export default function Page() {
return (
<main className="min-h-[100dvh] bg-white flex items-center justify-center">
<UseMediaQueryDemo />
</main>
);
}