React에서 미디어쿼리 @media 사용하기

반응형 웹을 만들기 위해 반드시 필요한 @media를 React에서 사용하기 위한 방법입니다.

---

material-UI로 쉽게 사용할 수 있기 때문에 우선 material-ui를 install 하셔야 합니다. 

그리고 미디어 쿼리를 적용할 컴포넌트에서 import 해줍니다. 

import useMediaQuery from '@material-ui/core/useMediaQuery';

그리고 min-width 보다 스크린이 줄어든 여부를 나타내는 변수를 선언합니다. 

아래 min-width: *px 부분에 미디어 쿼리로 적용할 기준 width 사이즈를 입력해줍니다. 

const matches = useMediaQuery('(min-width:1000px)');

그리고 matches 변수를 이용하여 미디어 쿼리를 다음과 같이 적용할 수 있습니다. 

<div style={matches ? {display:'flex', flexDirection:'row'} : {display:'none'}}>Component</div>

예시에서는 다음과 같이 matches의 참 거짓 여부에 따라 적용할 스타일을 다르게 설정하여 미디어 쿼리를 적용하였습니다.

1000px보다 큰 경우에는 가로로 정렬하고 스크린이 작아진 경우에는 아예 해당 컴포넌트를 보이지 않게 하고 있습니다. 

styles = { matches ? {min-width보다 스크린이 큰 경우 적용할 CSS} : {min-width보다 스크린이 작은 경우 적용할 CSS} } 

또는 style이 아닌 className 이나 아예 컴포넌트를 다르게 선언하여 미디어 쿼리를 적용할 수 있습니다. 

---

감사합니다 :)