[React] 리엑트 반응형(useMediaQuery)


[React] 리엑트 반응형(useMediaQuery)

npm install npm i react-responsive ----- yarn add react-responsive useMediaQuery 아래와 같이 크기를 감지하여 "모바일", "PC"를 구분할 수 있고 실시간으로 "넓이", "높이" 값을 가져올 수 있다. import React from "react" import { useMediaQuery } from "react-responsive"; const Home = () => { const isResponsive = useMediaQuery({ query: '(max-width: 424px)' }); return ( <div className={isResponsive ? 'layout mobile' : 'layout pc'}> {isResponsive && ( <> 모바일 일때 </> )} {!isResponsive && ( <> PC 일때 </> )} </div> ); }; export default Home;...


#media #mediaquery #pc #query #react #리엑트 #모바일 #반응형

원문링크 : [React] 리엑트 반응형(useMediaQuery)