[React] 반응형 웹을 위한 미디어쿼리 작성 예시

useMediaQuery 이용

• 여러 파일에서 사용해야하기 때문에 글로벌하게 사용할 수 있도록 따로 파일을 만들었다
• 다른 파일에서 컴포넌트처럼 사용하면 된다
• childeren에 의해 컴포넌트 내에 있는 코드들을 return한다

//mediaQuery.js
import { useMediaQuery } from "react-responsive";

const Mobile = ({ children }) => {
    const isMobile = useMediaQuery({ maxWidth: 1024 })
    return <>{ isMobile && children }</>
}

const Pc = ({ children }) => {
    const isPc = useMediaQuery({ minWidth: 1025 })
    return <>{ isPc && children }</>
}

export { Mobile, Pc };

 

적용하기

function Component() {
    return (
        <div>
            <Pc>
            	<div>Pc에서 보여줄 내용</div>
            </Pc>
            <Mobile>
            	<div>모바일에서 보여줄 내용</div>
            </Mobile>
        </div>
    );
}

export default Component;

 

CSS 파일에서 작성할 때

/* Pc */
@media (min-width:1025px) {
    .button {
        width: 360px;
    }
}

/* Mobile */
@media (max-width:1024px) {
    .button {
        width: 296px;
    }
}