미디어 쿼리를 css가 아닌 js에서 확인하는 법

개요

일반적으로 react를 작업할 때, 미디어쿼리를 통한 반응형 디자인은 css 파일 혹은 tailwind css를 통해 작업하는 경우가 대부분이다. 하지만, 특정 상황에서 자바스크립트 혹은 react 컴포넌트 내에서 확인해야하는 상황이 있다. 예를 들어, 브라우저의 크기에 따라 동작을 달리 해야 하는 비즈니스 로직이 있을 때, 현재 미디어의 크기를 알아내는 로직이 필요하다.

사용

자바스크립트 내장 객체인 window를 이용해 파악이 가능하다. 해당 로직은 boolean 타입의 값을 반환한다.

const isMobile = window.matchMedia('max-width: 500').matches;									// 모바일 여부 
const isTablet = window.matchMedia('(min-width: 768px) and (max-width: 1024px)').matches;		// 타블렛 여부

이를 바탕으로 현재 모바일의 여부를 나타내는 state를 지정함으로써 로직을 작성할 수 있다.

const [isMobile, setIsMobile] = useState<boolean>(false);

useEffect(() => {
  const isMobile = window.matchMedia('max-width: 500');	

  if (isMobile.matches) setIsMobile(true);

  // 해당 기기에서 미디어 쿼리 이벤트 요소가 변경될 떄 마다 isMobile state를 알맞게 변경하는 로직
  const handleMediaQueryChange = (e: MediaQueryListEvent) => {
    setIsMobile(e.matches);
  }

  isMobile.addEventListener('change', handleMediaQueryChange);

  // 컴포넌트 언마운트때 해당 이벤트를 제거
  return () => {
    isMobile.removeEventListener('change', handleMediaQueryChange);
  }
}, []);