11. react-responsive 사용하기

반응형 웹을 만들 때 미디어쿼리만을 사용한다면 한계가 발생한다. 

예를 들어, 아래와 같이 완전히 레이아웃이 바뀌어야 하는 상황에는 미디어쿼리를 사용할 수 없다. 

이런 경우 react-responsive 를 사용한다면 간단히 레이아웃을 변경할 수 있다. 

 

1. react-responsive 설치 

npm install react-responsive --save

 

2. useMediaQuery Hook 사용 

import { useMediaQuery } from 'react-responsive'


const Responsive = () => { 

const pc = useMediaQuery({query:"(min-width: 1024px)"});
const tablet = useMediaQuery({query:"(min-width: 768px) and (max-width: 1023px"});
const mobile = useMediaQuery({query:"(max-width: 767px"});

return <div>
            {pc && <div>pc버전 코드</div>}
            {tablet && <div>tablet버전 코드</div>}
            {mobile && <div>mobile버전 코드</div>}
        </div>
}