반응형

웹 개발을 하다 보면, 모니터 전체 화면으로 볼 때 문제없던 화면이, 웹 브라우저 크기를 줄이거나 태블릿 혹은 스마트폰으로 봤을 때 화면 비율이 맞지 않는 현상을 쉽게 볼 수 있습니다. 이 문제를 해결하기 위해 웹페이지의 크기가 기기의 크기에 맞게 `재조정`되는 것을 `반응형`이라고 말합니다. 전통적인 방식으로 Media Query를 자주 사용하지만, 화면 비율별로 기능을 다르게 하고 싶다면 react-responsive를 사용을 추천드립니다.

pm install react-responsive 설치가 필요합니다.

import "./styles.css";
import { useMediaQuery } from 'react-responsive'

export default function App() {
  const isDesktopOrMobile = useMediaQuery({query: '(max-width:768px)'});
  
  return (
    <div className="App">
      {isDesktopOrMobile !== true ? 
        <div style={{border:"1px solid #DBDBDB", width:"1000px"}}>
        <h1>웹 화면 입니다.</h1>
        <h2>줄어들기 전 입니다.</h2>
      </div>
       : 
      <div style={{border:"1px solid #DBDBDB", width:"500px"}}>
        <h1>모바일 화면 입니다.</h1>
        <h2>줄어든 후 입니다.</h2>
      </div>}
      
     
    </div>
  );
}

화면의 최대 크기가 768px 이면 true, 아니면 false가 반환됩니다.

이 점을 이용하여

{isDesktopOrMobire !== true ? <모바일 화면>

: <웹 화면>

}

과 같은 조건문을 만들었습니다.