[React] 추천 React UI Components - Google Material Design을 지원하는 Material UI

Backend 개발자로 혼자서 React 공부를 시작해서 간단한 앱을 만들면서 처음부터 사용하면 본질을 익히기 전이라는 생각에 라이브러리에는 큰 관심을 두지 않고 styled-components만 적용하여 개발을 해왔습니다. 그러나 역시 화면을 배치하고 디자인하는 component 스타일링 부분은 투자한 시간 대비 소득이 크지 않다는 생각이 계속 들었습니다. 물론 개인 역량이 부족하기도 합니다만... ^-^;;;

 

그래서 조금 찾아보니 구글 Material Design을 지원하는 Material UI Component가 있어서 검토해 보고, 작은 규모의 프로젝트나 개인 프로젝트에는 충분히 사용하면 좋겠다는 생각이 들어서 간단히 정리했습니다.

---

1. Material UI : MUI 란?

https://mui.com/material-ui/getting-started/

 

Material UI는 Google의 Material Design을 구현하는 오픈 소스 React component library입니다. 즉시 제품(애플리케이션)에 사용할 수 있는 prebuilt components의 포괄적인(기본 및 확장 UI를 지원하) 컬렉션을 담고 있습니다. 

 

MUI는 기본 스타일과 함께 제공되고 있으며 Emotion(or styled-components)와 함께 작동하도록 최적화되어 있습니다. 다시 말하면 디자인과 레이아웃등 UI를 아름답게 만들기 위해 고민하지 않고 그대로 사용할 수 있도록 Material Design의 스타일이 미리 적용되어 있고, 어느 정도 커스터마이징도 가능합니다. 

2. 설치

https://mui.com/material-ui/getting-started/installation/

// 기본 설치
npm install @mui/material @emotion/react @emotion/styled

// styled-components와 함께 사용하는 경우
npm install @mui/material @mui/styled-engine-sc styled-components


// Peer Dependencies 
"peerDependencies": {
  "react": "^17.0.0 || ^18.0.0",
  "react-dom": "^17.0.0 || ^18.0.0"
},


// 기본 폰트 : Roboto 폰트 설치
npm install @fontsource/roboto
// 폰트 사용
import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';


// Icons 
npm install @mui/icons-material

3. 사용법

설치를 마치고 나면 React에서 필요로 하는 Components를 import 하고 사용하면 됩니다. 

아래는 Material UI의 Button component 사용 예시입니다. 

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

export default function ButtonUsage() {
  return <Button variant="contained">Hello world</Button>;
}

Material UI - Button 사용 예시

 

3.1 Button

https://mui.com/material-ui/react-button/

https://mui.com/material-ui/api/button/

 

문서로 각각의 컴포넌트를 사용하는 방법과 활용 범위에 대한 설명이 잘 되어 있습니다. 필요한 Component를 찾아보고 예시와 Component API에서 필요한 설정값 등을 확인하고 적용해 보면 깔끔한 디자인의 component를 얻을 수 있습니다.

 

아래의 화면은 Button으로 지원하는 기능의 예시를 일부만 캡처하였습니다. 

 

화려한 디자인은 아니지만, 간결하면서 깔끔한 디자인을 원한다면 MUI만으로도 충분할 것으로 보였습니다.

 

공식 홈페이지의 문서에서, 지원하는 다양한 Components 목록을 살펴보고, 먼저 자주 사용하는 Button, Select, Slider, Text Field, Radio 등을 살펴보는 것으로 Material UI를 시작해도 좋을 것 같습니다.  

4. 라이선스

https://mui.com/pricing/

 

기본적인 MUI Core의 라이선스는 MIT License로 무료입니다만, MUI X에서 Data Grid의 기능이나 복잡한 Chart의 기능과 기술 지원은 유료인 Pro 혹은 Premium에서만 지원하는 것으로 보입니다. 구매 방식에 따라서 년간 라이선스나 현재 버전을 구매한 영구 라이선스 구입이 가능합니다. 

 

보다 정확한 비용과 지원 범위는 위의 링크를 통해 확인하시길 바랍니다.

 

 

 

 

 

참고문헌

https://mui.com/material-ui/getting-started/

https://mui.com/material-ui/react-button/

https://mui.com/material-ui/api/button/