useMediaQuery 간단하게 만들기

useMediaQuery를 지원하는 라이브러리도 많지만
모바일인지 아닌지만 판단하면 되기도 하고
mdn 문서를 참고하니 어렵지 않아서 직접 만들어봤다.

"use client";
import { useEffect, useState } from "react";

export default function useMediaQuery() {
  const [isMobile, setIsMobile] = useState(() => (typeof window !== "undefined" ? window.matchMedia("(max-width: 768px)").matches : false));

  useEffect(() => {
    const mediaQueryList = window.matchMedia("(max-width: 768px)");

    function handleIsMobile() {
      if (mediaQueryList.matches) {
        // 모바일
        setIsMobile(true);
      } else {
        //not 모바일
        setIsMobile(false);
      }
    }
    mediaQueryList.addEventListener("change", handleIsMobile);

    return () => {
      mediaQueryList.removeEventListener("change", handleIsMobile);
    };
  }, []);

  return { isMobile };
}