[React] 리액트 반응형 useMediaQuery

리액트 디바이스 자체의 화면 폭을 확인해서 true/ false를 반환해주는 useMediaQuery 리액트 전용 훅을 사용할 수 있다. 

 

디바이스 폭 기준이라, 창을 늘리거나 줄여도 반응하지 않는다.

그래서 모바일,태블릿, pc 같이 디바이스 자체를 가늠하려는 경우 사용하면 유용하게 쓸 수 있음 

 

1. install 필요함 터미널창에서 react-responsive 설치

npm install react-responsive

 

 

2. import 해주기 

import { useMediaQuery } from "react-responsive";

 

3. 변수 세팅

    const isDesktop = useMediaQuery({ query: "(min-width: 1024px)" });
  const isMobile = useMediaQuery({ query: "(max-width:1023px)" });

 

4. 사용하기 

  <div className={`text-${isDesktop ? "center" : "left"}`}>
            <p className={`${isDesktop ? "font-bold" : "text-sm font-bold"}`}>
              예시입니다!!!!!
            </p>
  </div>

 

 

https://usehooks.com/usemediaquery

useMediaQuery React Hook – useHooks