머터리얼 UI에서 미디어쿼리 사용하기

머터리얼 UI(Material UI) 기반 컴포넌트를 꾸밀 때는 makeStyles라는 커스텀 훅과 객체를 사용해 CSS를 꾸미게 된다.

예를 들어 클래스명이 'card' 인 요소를 꾸미는 방법은 이런 식이다.

import React from "react";
import { Card, makeStyles} from "@material-ui/core";

const useStyles = makeStyles((theme) => ({
  card: {
    width: "80%",
    height: "20%"
  },
}))

const CardContainer = () => {
  const classes = useStyles();
  <Card className = {classes.card}></Card>
}

자바스크립트에서 객체를 사용하는 문법을 아는 사람이라면 뭔가 이상한 점이 하나 보일 것이다.

"그럼 스타일 객체 내에서 @media(max-width: 600px) 같은 미디어쿼리는 어떻게 사용하나요?"

안타깝지만 질문의 답은 "사용할 수 없습니다." 이다.

미디어쿼리를 사용하기 위해서는 별도의 CSS 파일을 구성해야 하는데, 이러면 클래스명이 겹쳐 원하지 않는 부분에도 미디어쿼리가 적용될 수 있게 되어 약간 위험한 코드가 탄생하게 된다.

 

머터리얼 UI는 이러한 점을 방지하고 사용자의 편의를 위해 반응형 디자인을 위한 useMediaQuery 라는 훅을 제공한다.

[useMediaQuery 훅 사용법]

import { useMediaQuery } from "@material-ui/core";

// 인자로 주어진 미디어쿼리 조건에 따라 true와 false를 리턴한다.
const isMobile = useMediaQuery("(max-width: 600px)");

useMediaQuery를 사용해 카드를 꾸미는 코드에 미디어쿼리를 적용해보자.

import React from "react";
import { Card, makeStyles, useMediaQuery} from "@material-ui/core";

const useStyles = makeStyles((theme) => ({
  card: {
    width: "80%",
    height: "20%"
  },
  cardMobile: {
    width: "90%",
    height: "10%"
  }
}))

const CardContainer = () => {
  const classes = useStyles();
  const isMobile = useMediaQuery("(max-width: 600px)");
  <Card className = {isMobile ? classes.cardMobile : classes.card}></Card>
}

이제 브라우저가 감지한 화면 너비가 600px보다 작으면 모바일용 디자인을 적용할 것이고, 그 이상일 경우에는 데스크탑용 디자인을 적용할 것이다.