useMediaQuery & useWindowSize: 자바스크립트로 반응형 디자인 제어하기

// ❌ 크리스의 반쪽짜리 반응형
function Dashboard() {
  // 컴포넌트가 처음 뜰 때(Mount) 딱 한 번만 체크한다.
  const isMobile = window.innerWidth <= 768;

  return (
    <div>
      {!isMobile && <Sidebar />} {/* 모바일이 아닐 때만 렌더링 */}
      <MainContent />
    </div>
  );
}

// useWindowSize.ts
import { useState, useEffect } from 'react';

export function useWindowSize() {
  const [windowSize, setWindowSize] = useState({
    width: typeof window !== 'undefined' ? window.innerWidth : 0,
    height: typeof window !== 'undefined' ? window.innerHeight : 0,
  });

  useEffect(() => {
    const handleResize = () => {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    };

    // 창 크기가 변할 때마다 상태 업데이트 -> 리렌더링 유발
    window.addEventListener('resize', handleResize);
    
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return windowSize;
}

// useMediaQuery.ts
import { useState, useEffect } from 'react';

export function useMediaQuery(query: string): boolean {
  // SSR 환경 대비: 기본값은 false로 설정 (혹은 외부에서 주입)
  const [matches, setMatches] = useState(false);

  useEffect(() => {
    // 1. 미디어 쿼리 매처 생성
    const media = window.matchMedia(query);
    
    // 2. 초기값 설정
    if (media.matches !== matches) {
      setMatches(media.matches);
    }

    // 3. 이벤트 리스너 등록
    const listener = () => setMatches(media.matches);
    
    // 모던 브라우저: addEventListener, 구형: addListener
    media.addEventListener('change', listener);
    
    return () => media.removeEventListener('change', listener);
  }, [query]);

  return matches;
}

// Dashboard.tsx
function Dashboard() {
  // ✅ 창 크기를 1px씩 추적하는 게 아니라, 기준점을 넘을 때만 렌더링 된다.
  const isMobile = useMediaQuery('(max-width: 768px)');
  const isDarkMode = useMediaQuery('(prefers-color-scheme: dark)');

  return (
    <div style={{ background: isDarkMode ? '#333' : '#fff' }}>
      {/* 이제 화면을 줄이면 사이드바가 즉시 언마운트(Unmount) 된다. */}
      {!isMobile && <Sidebar />}
      <MainContent />
    </div>
  );
}