# 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/>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://haleyryu.gitbook.io/engineer/frontend/react-x-redux/3.-material-ui.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.