# 3. Material UI 적용하기

## 3. Material UI 적용하기

\
앞서 작성한 바와 같이 [Google Material Design](https://material.io/design/) 을 구현하고 있는 React용 라이브러리들이 많이 있었지만, 그중 제가 Material-UI 를 선택한 이유는 다음과 같습니다.<br>

* 제일 많이 사용되고있다. [Github](https://github.com/mui-org/material-ui) Star가 4만 5천개, Fork는 만번 정도 되었다.\
  \- 경험을 비추어보면 사용자가 적은 라이브러리를 사용하게되면 이슈가 있을때 StackOverflow에 관련 질문이 많이 없어서 해결하기 힘들었다.\
  \- 역시 인기많은게 최고인거 같다.
* jQuery 를 사용안하고 있다. jQuery를 사용하게되면 React의 Virtual DOM 개념과 섞여 컨트롤 할 수 없는 상황이 올 수 있다.\
  \- 전에 Vue.js 개발을 할때 잘모르고 jQuery로 돔 제어를 했더니 미궁에 빠진 적이 있었다.
* Google Material 의 Component, Icons 를 잘 지원하고 있다.

그럼 지금부터 React, Babel, Webpack 으로 구성해둔 앱에 Material UI 를 적용해보겠습니다.&#x20;

[material-](https://material-ui.com/)[ui](https://material-ui.com/)[ 공식 문서](https://material-ui.com/) 를 참고하였습니다.

**Material-UI 설치하기**

```
 $ npm install @material-ui/core
```

Material-UI 는 아래와 같이 컴포넌트 단위로 독립적으로 사용할 수 있습니다.

```
import React from 'react';
import ReactDOM from 'react-dom';
import Button from '@material-ui/core/Button';

function App() {
  return (
    <Button variant="contained" color="primary">
      Hello World
    </Button>
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));
```

저는 컴포넌트로 하나씩 구성하기에는 시간이 부족하여 이미 제공하고 있는 템플릿을 사용했습니다.

[Premium Themes 에](https://material-ui.com/premium-themes/) 들어가보면 여러가지 테마가 있는데, 그 중 어드민툴의 성격과 제일 잘맞는 아래의 테마를 선택했습니다.

<https://material-ui.com/premium-themes/paperbase/>