테블릿과 스마트폰에서도 인터넷을 사용할수 있게 되자 각 기기 별 *뷰 포트에 따라 사용자들에게 보기 쉽게 하기 위해 웹페이지의 크기가 '재조정' 되는 것을 말합니다.
npx create-react-app 작업폴더명
※ 작업폴더 이름을 react-responsive로 하면 오류가 나니 라이브러리 이름과 다르게 만들자.
cd 작업폴더명
(작업폴더로 이동)
npm install react-responsive
npm install @types/react-responsive
const 변수명 = useMediaQuery ({
query : "(최소or최대-width : px)"
})
//example
const isPc = useMediaQuery ({
query : "(min-width : 1024px) and (max-width :1920px)"
});
// width값이 최소 1024 ~ 1920px 까지의 범위는 isPc가 출력된다.
react-responsive 에서는 useMediaQuery라는 Hook
을 제공합니다.
작동 되는 방식은 useMediaQuery에 media-query조건을 넣어주면 해당 조건에 따라 true
, false
를 return 해 줍니다.
//App.tsx
import React from "react"
import { useMediaQuery } from "react-responsive"
function App() {
const isPc = useMediaQuery({
query : "(min-width:1024px)"
});
const isTablet = useMediaQuery({
query : "(min-width:768px) and (max-width:1023px)"
});
const isMobile = useMediaQuery({
query : "(max-width:767px)"
});
return (
<div>
{isPc && <p>HI PC</p>}
{isTablet && <p>HI Tablet</p>}
{isMobile && <p>HI Mobile</p>}
</div>
);
}
export default App;
Hooks
가 필요한 이유는 아래와 같은 상황에서 유용하게 사용됩니다.
// App.tsx
import React from "react"
import { useMediaQuery } from "react-responsive"
const isPc = useMediaQuery ({
query: "(min-width:768px)"
});
const languageText = isPc ? "웹페이지" : "모바일"
return (
<div>
{languageText}
</div>
);
}
export default App;
위처럼 사용도 가능하지만 , 따로 하나의 파일에 useMediaQuery를 몰아 놓고 해당 컴포넌트만 import 해서 사용도 가능합니다.
// MediaQuery.tsx
import React from "react"
import { useMediaQuery } from "react-responsive"
const Mobile :React.FC = ({children}) => {
const isMobile = useMediaQuery({
query : "(max-width:767px)"
});
return <React.Fragment>{isMobile && children}</React.Fragment>
}
const PC :React.FC = ({children}) => {
const isPc = useMediaQuery({
query : "(min-width:768px) "
});
return <React.Fragment>{isPc && children}</React.Fragment>
}
export {Mobile,PC};
//App.tsx
import React from "react"
import { Mobile, PC } from "./MediaQuery"
import "./App.css"
function App() {
return (
<>
<div>
<Mobile>
<div className="mobile_container">
이건 모바일 !!
</div>
</Mobile>
</div>
<div className="pc_container">
<PC >
요건 PC !!!
</PC>
</div>
</>
)
}
export default App;
참고 : N잡하는 개발자
react-responsive
감사합니다.