최근에 인프런의 한 강의를 보며 간단한 강의시간표를 만드는 미니 프로젝트를 하였다. 이번 글에서는 해당 프로젝트를 진행하며 새로만난 MUI (Material-UI) 에 대해 정리해보려한다.

나는 개인적으로 CSS나 SCSS 혹은 Styled-component로 일일히 디자인하며 UI작업하는것을 좋아한다. 다른 사람들은 프론트 작업시 1px 하나하나 맞추는것에 스트레스를 받는다는데 나는 재밌었다..!

하지만 개발자가 이러한 UI작업에 너무 많은 시간을 쏟게되면 안된다는 생각이 들었을 무렵 나는 MUI를 만나고 충격에 빠졌었다. 이것은 신세계🤷🏻‍♀️

MUI (Material-UI)란?

React UI를 만들 때 도움을 주는 라이브러리이다.

React 사용 시 MUI을 이용하면 material 디자인 스타일이 적용된 UI를 매우 쉽게 구현할 수 있다. 나는 이번에 처음 다뤄봐서 사용법이 약간 어색했지만 조금만 더 다뤄보며 사용법을 익히면 UI작업 속도가 굉장히 빨라질 것 같다는 생각이 들었다.

설치하기

npm과 yarn을 이용한 설치방법은 아래와 같다.

// with npm
npm install @material-ui/core

// with yarn
yarn add @material-ui/core

SVG Icons을 사용하면 다양한 아이콘을 사용할 수 있다. 설치하려면 아래의 명령어를 참고하자.

// with npm
npm install @material-ui/icons

// with yarn
yarn add @material-ui/icons

Material Icons : https://mui.com/material-ui/material-icons/