React 리액트 반응형 디자인 | useMediaQuery

리액트에서는 브라우저의 화면 폭에 따라 반응하는 CSS의 미디어 쿼리( @media )도 사용 가능하지만 "디바이스" 자체의 화면폭을 확인해서 true/false를 반환해주는 useMediaQuery 라는 리액트 전용 훅(Hook)도 사용할 수 있다.

 

• 단, 디바이스 폭 기준이라, 창을 늘리거나 줄여도 반응하진 않는다.
• 다만, 모바일이냐 아니냐와 같은 디바이스 자체를 가늠하려는 경우 사용하는 것이 바람직해보인다.
• useMediaQuery를 사용하려면 react-responsive 부터 설치해야 한다.

 

1. cmd 창에서 react-responsive 설치

npm install react-responsive

2. 리액트에서 import

import { useMediaQuery } from 'react-responsive';
import React from 'react';

3. 변수 세팅

function App() {
  const isDesktopOrLaptop = useMediaQuery({ query: "(min-width: 1224px)" });
  const isBigScreen = useMediaQuery({ query: "(min-width: 1824px)" });
  const isTabletOrMobile = useMediaQuery({ query: "(max-width: 1224px)" });
  const isPortrait = useMediaQuery({ query: "(orientation: portrait)" });
  const isRetina = useMediaQuery({ query: "(min-resolution: 2dppx)" });

  return (...);
}

4. 사용

function App() {
  const isDesktopOrLaptop = useMediaQuery({ query: "(min-width: 1224px)" });
  const isBigScreen = useMediaQuery({ query: "(min-width: 1824px)" });
  const isTabletOrMobile = useMediaQuery({ query: "(max-width: 1224px)" });
  const isPortrait = useMediaQuery({ query: "(orientation: portrait)" });
  const isRetina = useMediaQuery({ query: "(min-resolution: 2dppx)" });

  return (
    <div>
      <h1>Device Test!</h1>
      {isDesktopOrLaptop && <p>You are a desktop or laptop</p>}
      {isBigScreen && <p>You have a huge screen</p>}
      {isTabletOrMobile && <p>You are a tablet or mobile phone</p>}
      <p>Your are in {isPortrait ? "portrait" : "landscape"} orientation</p>
      {isRetina && <p>You are retina</p>}
    </div>
  );
}

5. 결과

코드 전체

import useMediaQuery from "react-responsive";
import "./App.css";

function App() {
  const isDesktopOrLaptop = useMediaQuery({ query: "(min-width: 1224px)" });
  const isBigScreen = useMediaQuery({ query: "(min-width: 1824px)" });
  const isTabletOrMobile = useMediaQuery({ query: "(max-width: 1224px)" });
  const isPortrait = useMediaQuery({ query: "(orientation: portrait)" });
  const isRetina = useMediaQuery({ query: "(min-resolution: 2dppx)" });

  return (
    <div>
      <h1>Device Test!</h1>
      {isDesktopOrLaptop && <p>You are a desktop or laptop</p>}
      {isBigScreen && <p>You have a huge screen</p>}
      {isTabletOrMobile && <p>You are a tablet or mobile phone</p>}
      <p>Your are in {isPortrait ? "portrait" : "landscape"} orientation</p>
      {isRetina && <p>You are retina</p>}
    </div>
  );
}

export default App;

 

기본 튜토리얼 참고

https://www.npmjs.com/package/react-responsive

react-responsive