반응형
리액트에서는 브라우저의 화면 폭에 따라 반응하는 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
Media queries in react for responsive design. Latest version: 9.0.2, last published: 4 months ago. Start using react-responsive in your project by running `npm i react-responsive`. There are 1090 other projects in the npm registry using react-responsive.
www.npmjs.com
반응형
'React' 카테고리의 다른 글
React 리액트 웹디자인 | 리액트 아이콘 react-icon (0) | 2023.04.08 |
---|---|
React 리액트 반응형 디자인 | SCSS 미디어 쿼리 @media (0) | 2023.04.01 |
SCSS 문법 (0) | 2023.03.28 |
React 리액트 props 사용법 (0) | 2023.03.06 |
React 리액트 이벤트 핸들러들 (0) | 2022.08.31 |