[React] react-responsive

🚩 왜 쓰는가?

웹 브라우저 크기 줄이거나 모바일에서 봤을때 화면비율을 맞추기 위해, 보통 Media Query를 쓰지만 화면 비율별로 기능을 다르게 하고싶다면 react-responsive를 주로 사용함

🧩 사용법

1. npm install react-responsive
2. 파일에서 import { useMediaQuery } from 'react-responsive' 로 가져오기
3. useMediaQuery가 화면크기에 따라 true, false가 되는 것을 활용해 조건부 렌더링

//예시
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>
  );
}

---

참고블로그

https://stickode.tistory.com/643