MUI(Material-UI)란? MUI(Material-UI)는 React 기반의 UI 컴포넌트 라이브러리로, Google의 Material Design 가이드라인을 따릅니다. MUI를 사용하면 일관된 디자인과 반응형 UI를 쉽게 구현할 수 있습니다.
1. MUI를 사용하기 위한 준비 사항 1.1. MUI 설치 MUI를 사용하려면 프로젝트에 필요한 패키지를 설치해야 합니다.
# MUI Core 설치
npm install @mui/material @emotion/react @emotion/styled
# 아이콘 사용을 위한 패키지 설치 (선택 사항)
npm install @mui/icons-material
1.2. 프로젝트에 MUI 테마 적용 MUI는 기본적으로 Material Design 테마를 제공합니다. 이를 프로젝트에 적용하려면 ThemeProvider를 사용해야 합니다.
import React from 'react' ;
import ReactDOM from 'react-dom' ;
import App from './App' ;
import { ThemeProvider , createTheme } from '@mui/material/styles' ;
const theme = createTheme ( {
palette : {
primary : {
main : '#1976d2' , // 기본 primary 색상
} ,
secondary : {
main : '#dc004e' , // 기본 secondary 색상
} ,
} ,
} ) ;
ReactDOM . render (
< ThemeProvider theme = { theme } >
< App />
</ ThemeProvider > ,
document . getElementById ( 'root' )
) ;
2. MUI 사용 방법 2.1. 기본 컴포넌트 사용 MUI는 다양한 기본 컴포넌트를 제공합니다. 아래는 자주 사용하는 컴포넌트의 예제입니다.
Button
import React from 'react' ;
import Button from '@mui/material/Button' ;
const Example = ( ) => {
return (
< div >
< Button variant = "contained" color = "primary" >
Primary Button
</ Button >
< Button variant = "outlined" color = "secondary" >
Secondary Button
</ Button >
</ div >
) ;
} ;
export default Example ;
Typography
import React from 'react' ;
import Typography from '@mui/material/Typography' ;
const Example = ( ) => {
return (
< div >
< Typography variant = "h1" > Heading 1 </ Typography >
< Typography variant = "body1" > This is body text. </ Typography >
</ div >
) ;
} ;
export default Example ;
Grid
import React from 'react' ;
import Grid from '@mui/material/Grid' ;
const Example = ( ) => {
return (
< Grid container spacing = { 2 } >
< Grid item xs = { 6 } >
Left
</ Grid >
< Grid item xs = { 6 } >
Right
</ Grid >
</ Grid >
) ;
} ;
export default Example ;
2.2. 스타일링 MUI는 sx prop과 styled API를 사용하여 스타일을 적용할 수 있습니다.
sx Prop 사용
sx는 MUI 컴포넌트에 인라인 스타일을 적용할 수 있는 속성입니다.
import React from 'react' ;
import Button from '@mui/material/Button' ;
const Example = ( ) => {
return (
< Button
variant = "contained"
sx = { {
backgroundColor : 'primary.main' ,
'&:hover' : {
backgroundColor : 'secondary.main' ,
} ,
} }
>
Styled Button
</ Button >
) ;
} ;
export default Example ;
styled API 사용
styled는 MUI 컴포넌트를 커스터마이징할 때 사용합니다.
import React from 'react' ;
import { styled } from '@mui/material/styles' ;
import Button from '@mui/material/Button' ;
const CustomButton = styled ( Button ) ( {
backgroundColor : '#1976d2' ,
'&:hover' : {
backgroundColor : '#1565c0' ,
} ,
} ) ;
const Example = ( ) => {
return < CustomButton variant = "contained" > Custom Button </ CustomButton > ;
} ;
export default Example ;
2.3. 아이콘 사용 MUI는 Material Design 아이콘을 제공합니다. 아이콘을 사용하려면 @mui/icons-material 패키지를 설치해야 합니다.
import React from 'react' ;
import IconButton from '@mui/material/IconButton' ;
import DeleteIcon from '@mui/icons-material/Delete' ;
const Example = ( ) => {
return (
< IconButton color = "primary" aria-label = "delete" >
< DeleteIcon />
</ IconButton >
) ;
} ;
export default Example ;
2.4. 테마 커스터마이징 MUI의 테마를 커스터마이징하여 프로젝트에 맞는 스타일을 적용할 수 있습니다.
import React from 'react' ;
import { ThemeProvider , createTheme } from '@mui/material/styles' ;
import Button from '@mui/material/Button' ;
const theme = createTheme ( {
palette : {
primary : {
main : '#4caf50' , // Primary 색상 변경
} ,
secondary : {
main : '#ff5722' , // Secondary 색상 변경
} ,
} ,
typography : {
fontFamily : 'Arial' , // 기본 폰트 변경
h1 : {
fontSize : '2rem' , // h1 크기 변경
} ,
} ,
} ) ;
const App = ( ) => {
return (
< ThemeProvider theme = { theme } >
< Button variant = "contained" color = "primary" >
Custom Themed Button
</ Button >
</ ThemeProvider >
) ;
} ;
export default App ;
3. MUI를 사용하는 이유 3.1. 장점
Material Design 기반 :
Google의 Material Design 가이드라인을 따르므로 일관된 UI를 제공.
다양한 컴포넌트 :
버튼, 입력 필드, 카드, 테이블 등 다양한 컴포넌트를 제공.
반응형 디자인 :
Grid 시스템과 Breakpoint를 사용하여 반응형 UI를 쉽게 구현 가능.
커스터마이징 가능 :
테마와 스타일링을 통해 프로젝트에 맞는 디자인을 적용 가능.
TypeScript 지원 :
TypeScript를 완벽히 지원하여 타입 안정성을 제공.
3.2. 단점
번들 크기 :
기본적으로 번들 크기가 크므로, 필요한 컴포넌트만 임포트하여 사용해야 함.
학습 곡선 :
다양한 기능과 설정이 있어 초보자에게는 다소 복잡할 수 있음.
Material Design 제한 :
Material Design 가이드라인을 따르므로, 완전히 독창적인 디자인을 구현하기 어려울 수 있음.
4. MUI와 Ant Design 비교 특징MUI (Material-UI)Ant Design
디자인 철학 Google Material Design 기반
기업용 UI에 적합한 디자인 시스템
컴포넌트 다양성 풍부한 컴포넌트 제공
풍부한 컴포넌트 제공
스타일링 sx prop, styled API, 테마 커스터마이징 지원
CSS-in-JS 대신 Less 기반 스타일링
반응형 디자인 Grid 시스템과 Breakpoint 제공
Grid 시스템 제공
TypeScript 지원 완벽한 TypeScript 지원
완벽한 TypeScript 지원
사용 사례 Material Design 기반의 프로젝트
기업용 대시보드, 관리 시스템 등
5. 결론 MUI는 React 프로젝트에서 일관된 디자인과 반응형 UI를 구현하는 데 매우 유용한 라이브러리입니다. 특히 Material Design을 기반으로 한 프로젝트에 적합하며, 다양한 컴포넌트와 스타일링 옵션을 제공합니다. 프로젝트의 요구사항에 따라 MUI를 선택하거나, Ant Design과 같은 다른 UI 라이브러리를 고려할 수 있습니다.
