[MUI - Material UI] Material UI란?

 

리액트 UI 라이브러리를 고려하던 중 MUI의 존재를 알게 되었고 나는 Material UI를 선택했다.

 

리액트 UI 라이브러리라고 하면 대표적으로 세가지를 꼽을 수 있겠다.

antd, react-bootstrap, material-ui(현재는 mui)

 

npm trends

최근 2년간의 그래프를 보면 위와 같다.

antd와 react-bootstrap은 꾸준한 인기를 보여주고, material-ui는 저조한 성적을 보이다가 MUIv5가 릴리즈 되면서 엄청난 속도로 상승하고 있다.

사실 저 상승세를 보고 마음이 움직인 것도 있다 ㅎㅎ (그만큼 레퍼런스가 없습니다...)

 

 

 

MUI는 구글의 디자인 철학인 Material Design을 구현한 자바스크립트 라이브러리이다.

materialUI라고 불리던 MUI는 5버전으로 리뉴얼 되면서 기존의 materialUI라는 이름을 버리고 MUI라는 이름으로 바뀌었다.

 

 

 

MUIv5가 릴리즈 되면서 변경된 것들

Material-UI -> MUI

3글자로 줄인게 뭐 얼마나 다르냐 할 수 있겠지만, MUI측이 말하길 "이는 개발자 경험(DX)의 개선"이라고 한다.

• Materail-UI 조직을 MUI라 칭함
• Material-UI MIT 컴포넌트 셋을 MUI Core라 칭함
• Materail-UI X 고급 컴포넌트 셋을 MUI X라 칭함(유료 플랜)

MUI와 MUI Core로 이름을 구분하는 것은 라이브러리 자체와 개발 그룹을 구분하는 것이 의미 있다는 것을 말한다.

 

기존 4버전에서는 material의 컴포넌트와 jss를 접목시켜 작동하는 구조였는데 5버전부터는 emotion을 접목시켜 보다 더 styled 컴포넌트에 가까워졌다.

 

emotion은 Javascript로 Css 스타일을 작성하도록 설계된 라이브러리이다. 

 

기존에는 useStyles와 makeStyles를 이용하여 hook을 이용한 스타일 기능을 적용시켰다면 이제는 styled 컴포넌트 처럼 styled와 컴포넌트 안에 내장된 sx를 사용하여 작업한다.

 

 

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

Installation - Material UI

 

 

react >= 17.0.0  / react-dom >=17.0.0에서 작동한다.

 

기존의 emotion 방식으로 작업시 아래와 같이 설치하면 된다.

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

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

 

 

기존의 방식이 아닌 styled-components를 이용하고싶으면 아래와 같이 설치하면 된다.

// with npm
npm install @mui/material @mui/styled-engine-sc styled-components

// with yarn
yarn add @mui/material @mui/styled-engine-sc styled-components