MUI(Material-UI)는 React에서 인기 있는 UI 프레임워크 중 하나로, 구글의 머티리얼 디자인 원칙을 기반으로 컴포넌트 라이브러리를 제공합니다. MUI를 사용하면 반응형 웹 애플리케이션을 쉽게 구축할 수 있으며, 다양한 커스터마이징 옵션을 통해 애플리케이션의 UI를 우리의 입맛에 맞게 스타일 할 수 있습니다.

MUI의 주요 특징

1. 머티리얼 디자인: MUI는 구글의 머티리얼 디자인 가이드라인을 따르는 컴포넌트를 제공합니다. 이를 통해 일관된 UI/UX를 구현할 수 있습니다.
2. 반응형 레이아웃: Grid 시스템과 Breakpoints를 사용해 다양한 디바이스에서 잘 동작하는 반응형 레이아웃을 만들 수 있습니다.
3. 커스터마이징: 테마(Custom Theme)를 통해 색상, 타이포그래피, 버튼 스타일 등 UI 요소를 쉽게 커스터마이징할 수 있습니다.
4. 다양한 컴포넌트: 버튼, 카드, 다이얼로그, 메뉴 등 다양한 UI 컴포넌트를 기본 제공하며, 이러한 컴포넌트는 접근성과 최적화를 고려해 설계되었습니다.

설치 방법

MUI를 프로젝트에 설치하려면 다음 명령어를 사용하세요.

npm install @mui/material @emotion/react @emotion/styled

또는

yarn add @mui/material @emotion/react @emotion/styled

이후 MUI의 컴포넌트를 가져와 사용할 수 있습니다.

간단한 예제 코드

1. 기본 버튼 사용하기

import React from 'react';
import Button from '@mui/material/Button';

function App() {
  return (
    <div>
      <Button variant="contained">Contained Button</Button>
      <Button variant="outlined">Outlined Button</Button>
      <Button variant="text">Text Button</Button>
    </div>
  );
}

export default App;

위 코드에서는 MUI의 Button 컴포넌트를 사용하여 다양한 스타일의 버튼을 렌더링합니다. variant 속성에 따라 버튼의 스타일이 달라집니다.

2. 커스텀 테마 적용하기

MUI는 createTheme 함수를 사용해 사용자 정의 테마를 쉽게 만들 수 있습니다.

import React from 'react';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import Button from '@mui/material/Button';

const theme = createTheme({
  palette: {
    primary: {
      main: '#1976d2',
    },
    secondary: {
      main: '#dc004e',
    },
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button color="primary" variant="contained">Primary</Button>
      <Button color="secondary" variant="outlined">Secondary</Button>
    </ThemeProvider>
  );
}

export default App;

위 코드에서는 ThemeProvider를 사용하여 정의된 테마를 전체 애플리케이션에 적용했습니다. palette 옵션을 사용하여 주 색상과 보조 색상을 설정할 수 있습니다.