[React] 화면 크기 변화 감지 Hook (window.matchMedia)

 

 

window.matchMedia를 이용해서 리액트에서 화면 크기 변경 감지하는 방법

 

 

useCheckScreenSize.ts

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

export function useCheckScreenSize(query: string): boolean {
   const [matches, setMatches] = useState(false);
   
   useEffect(() => {
      // SSR
      if(typeof window === "undefined") return;
     
      const mq = window.matchMedia(query);
      setMatches(mq.matches);
      
      const handler = () => setMatches(mq.matches);
      mq.addEventListener("change", handler);
      
      return () => mq.removeEventListener('change', handler);
   }, [query])
   
   return matches;
}

 

 

 

MyComponent.ts

// 1000px 미만 : false, 1000px 이상 : true
const isOver1000 = useCheckScreenSize("(min-width: 1000px)");

// 480px 이하 : true, 480px 초과 : false
const isMobile = useCheckScreenSize("(max-width: 480px)");