[React] MUI의 useTheme와 useMediaQuery로 구현하는 반응형 웹 (feat. 그 외 방법)

업무 할 때  Material-UI(MUI)의 useTheme와 useMediaQuery를 사용하여 반응형 웹을 구현했었는데 그 부분을 조금 정리해보려 한다.

useTheme 이란? 

• MUI(Material-UI)에서 제공하는 훅으로, 현재 테마에 접근할 수 있게 해준다.
• 테마는 색상, 간격 등 UI 요소의 스타일을 정의하며, MUI는 기본적으로 테마를 사용하여 UI 구성 요소의 스타일을 일관되게 관리할 수 있도록 돕는다.
• 이 훅을 사용하면 현재 테마에 정의된 색상, 타이포그래피, 간격 등의 스타일 속성에 쉽게 접근할 수 있어, 사용자 인터페이스를 더 쉽게 커스터마이즈 할 수 있다.

import { useTheme } from '@mui/material/styles';
import React from 'react';

const MyComponent = () => {
  const theme = useTheme();

  // 주요 색상
  console.log(theme.palette.primary.main); // 현재 테마의 주요 색상 출력
  console.log(theme.palette.secondary.main); // 현재 테마의 보조 색상 출력
  console.log(theme.palette.error.main); // 에러 색상 출력

  // 간격 값
  console.log(theme.spacing(2)); // 2단위 간격 출력 (기본적으로 8px * 2 = 16px)

  // 타이포그래피
  console.log(theme.typography.h1); // h1의 스타일 출력
  console.log(theme.typography.body1); // body1의 스타일 출력

  // 브레이크포인트
  console.log(theme.breakpoints.up('sm')); // sm 크기 이상에서의 스타일
  console.log(theme.breakpoints.down('md')); // md 크기 이하에서의 스타일

  return (
    <div>
      <h1 style={{ color: theme.palette.primary.main }}>Hello, World!</h1>
      <p style={{ margin: theme.spacing(2) }}>예시입니다.</p>
    </div>
  );
};

export default MyComponent;

useMediaQuery 이란?

• 특정 CSS 미디어 쿼리에 대한 결과를 반환하는 훅이다.
• 이 훅을 사용하여 화면 크기나 특정 조건에 따라 컴포넌트의 렌더링을 제어할 수 있다.
• 예를 들어, 화면의 너비가 특정 크기 이하인 경우 모바일 레이아웃을 표시하는 방식으로 활용된다.

// 데스크탑: 1280px 이상
const isDesktop = useMediaQuery(theme.breakpoints.up('lg')); 
// 태블릿: 960px 이상, 1280px 미만
const isTablet = useMediaQuery(theme.breakpoints.between('md', 'lg')); 
// 모바일: 600px 이하
const isMobile = useMediaQuery(theme.breakpoints.down('sm'));

---

useTheme와 useMediaQuery를 사용한 반응형 웹  예시코드 

import { useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';
import React from 'react';

const MyComponent = () => {
  const theme = useTheme();
  
  const isDesktop = useMediaQuery(theme.breakpoints.up('lg'));
  const isTablet = useMediaQuery(theme.breakpoints.between('md', 'lg'));
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));

  // 간단한 스타일 정의
  const containerStyle = {
    padding: isDesktop ? '20px' : isTablet ? '15px' : '10px',
    backgroundColor: isDesktop ? '#f0f0f0' : isTablet ? '#ffffff' : '#fafafa',
  };

  return (
    <div style={containerStyle}>
      <h1>{isDesktop ? '데스크탑 화면' : isTablet ? '태블릿 화면' : '모바일 화면'}</h1>
      <p>{isDesktop ? '여기는 데스크탑 전용 내용입니다.' : '모바일에 적합한 정보입니다.'}</p>
      <table style={{ width: '100%' }}>
        <thead>
          <tr>
            <th>NO</th>
            <th>{isDesktop ? '구매일' : '정보'}</th>
            <th>{isDesktop ? '결제' : '결제 방법'}</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>2024-01-01</td>
            <td>신용카드</td>
          </tr>
          {/* 추가 데이터 행 */}
        </tbody>
      </table>
    </div>
  );
};

export default MyComponent;

---

반응형 웹을 구현하는 그 외 방법 

개인 프로젝트를 진행하면서 MUI의 useTheme와 useMediaQuery를 사용하는 방법 외에도, 반응형 웹을 구현할 수 있는 다양한 방법들이 있다는 것을 알게 되어 간단하게 정리해 보았다.

1. CSS 미디어 쿼리와 styled-components 사용

CSS 미디어 쿼리는 특정 화면 크기나 특성에 따라 스타일을 적용하는 데 사용된다.

styled-components와 결합하여 JavaScript에서 CSS를 작성하면 컴포넌트의 스타일을 보다 직관적으로 관리할 수 있다.

import styled from 'styled-components';

// 화면 크기에 따라 글꼴 크기를 설정하는 ResponsiveDiv 컴포넌트
const ResponsiveDiv = styled.div`
  font-size: 14px; // 기본 모바일 글꼴 크기

  @media (min-width: 768px) { // 태블릿
    font-size: 16px;
  }

  @media (min-width: 1224px) { // 데스크탑
    font-size: 20px;
  }
`;

// 실제 컴포넌트
const Component = () => {
  return <ResponsiveDiv>반응형 웹 콘텐츠</ResponsiveDiv>;
};

export default Component;

2. react-responsive 라이브러리 사용

react-responsive 라이브러리는 화면 크기에 따라 조건을 설정하여 컴포넌트의 스타일이나 크기를 동적으로 조정할 수 있도록 도와주는 유틸리티이다. 이를 통해 반응형 웹 디자인을 간편하게 구현할 수 있다.

import { useMediaQuery } from 'react-responsive';

// 화면 크기 확인
const isDesktop = useMediaQuery({ minWidth: 1224 }); // 데스크탑: 1224px 이상
const isTablet = useMediaQuery({ minWidth: 768, maxWidth: 1223 }); // 태블릿: 768px 이상, 1223px 이하
const isMobile = useMediaQuery({ maxWidth: 767 }); // 모바일: 767px 이하

const MyComponent = () => {
  return (
    <div>
      {isDesktop && <p>데스크탑 화면</p>}
      {isTablet && <p>태블릿 화면</p>}
      {isMobile && <p>모바일 화면</p>}
    </div>
  );
};

export default MyComponent;

3. useResponsive 훅 사용

 useResponsive 훅은 화면 크기에 따라 다양한 조건을 설정할 수 있도록 도와주는 유틸리티이다.

이를 통해 컴포넌트의 스타일이나 크기를 동적으로 조정할 수 있다.

const { xxl, lg, md, sm } = useResponsive(); // 다양한 크기 확인

const MyComponent = () => {
  return (
    <div style={{ fontSize: xxl || lg ? '20px' : '16px' }}>
      반응형 웹 콘텐츠
    </div>
  );
};

export default MyComponent;