React에서 화면 사이즈 감지하기(반응형 설정하기, window.innerWidth, matchMedia, react-responsive, tailwind)

 

1. window.innerWidth 직접 사용 (기본 방식 / 비추천)

import { useEffect, useState } from 'react';

const useWindowWidth = () => {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return width;
};

이걸 사용해서:

const width = useWindowWidth();

return (
  <div>
    {width < 768 ? '모바일 뷰' : '데스크탑 뷰'}
  </div>
);

---

2. matchMedia (추천)

const isMobile = window.matchMedia('(max-width: 768px)').matches;

또는 React에서 반응형으로 감지하려면:

const useMediaQuery = (query: string) => {
  const [matches, setMatches] = useState(false);

  useEffect(() => {
    const media = window.matchMedia(query);
    const listener = () => setMatches(media.matches);
    listener();
    media.addEventListener('change', listener);
    return () => media.removeEventListener('change', listener);
  }, [query]);

  return matches;
};

사용 예시:

const isMobile = useMediaQuery('(max-width: 768px)');

return <div>{isMobile ? '모바일 화면' : '데스크탑 화면'}</div>;

---

3. react-responsive (라이브러리)

npm install react-responsive

import { useMediaQuery } from 'react-responsive';

const isMobile = useMediaQuery({ query: '(max-width: 768px)' });

 

window.innerWidth	가장 단순한 접근	빠르게 상태만 보고 싶을 때
matchMedia + useMediaQuery	브라우저 반응형 방식 그대로 사용	추천
react-responsive	위 기능을 라이브러리로 감싼 버전	JSX로 미디어 쿼리 분기하고 싶을 때

---

Tailwind 쓴다면?

{/* JSX 안에서는 숨기고 싶은 곳에 tailwind로만 처리 가능 */}
<div className="hidden md:block">데스크탑 전용 콘텐츠</div>
<div className="block md:hidden">모바일 전용 콘텐츠</div>

반응형 감지만 필요한 거면 Tailwind로 처리하는 게 가장 간단

 

Tailwind 기본 화면 크기 기준 (Breakpoints)

sm	@media (min-width: 640px)	작은 태블릿 이상
md	@media (min-width: 768px)	일반 태블릿 이상
lg	@media (min-width: 1024px)	작은 노트북 이상
xl	@media (min-width: 1280px)	일반 데스크탑 이상
2xl	@media (min-width: 1536px)	큰 모니터 이상

 md는 보통 "모바일 <-> 태블릿"을 나누는 기준으로 자주 씀, lg부터 데스크탑 화면

---

Tailwind 설정에서 커스터마이징

tailwind.config.ts에서 breakpoints 바꿀 수도 있어:

// 기본 min-width
export default {
  theme: {
    extend: {
      screens: {
        xs: '480px',
        sm: '640px',
        md: '768px',
        lg: '1024px',
        xl: '1280px',
        '2xl': '1536px',
      },
    },
  },
};

// max-width로 처리
export default {
  theme: {
    extend: {
      screens: {
        // 기존 min-width는 그대로 두고,
        'max-sm': { max: '639px' },
        'max-md': { max: '767px' },
        'max-lg': { max: '1023px' },
        'max-xl': { max: '1279px' },
      },
    },
  },
};