3. Material UI 적용하기

3. Material UI 적용하기

앞서 작성한 바와 같이 Google Material Design 을 구현하고 있는 React용 라이브러리들이 많이 있었지만, 그중 제가 Material-UI 를 선택한 이유는 다음과 같습니다.

• 제일 많이 사용되고있다. Github Star가 4만 5천개, Fork는 만번 정도 되었다. - 경험을 비추어보면 사용자가 적은 라이브러리를 사용하게되면 이슈가 있을때 StackOverflow에 관련 질문이 많이 없어서 해결하기 힘들었다. - 역시 인기많은게 최고인거 같다.

• jQuery 를 사용안하고 있다. jQuery를 사용하게되면 React의 Virtual DOM 개념과 섞여 컨트롤 할 수 없는 상황이 올 수 있다. - 전에 Vue.js 개발을 할때 잘모르고 jQuery로 돔 제어를 했더니 미궁에 빠진 적이 있었다.

• Google Material 의 Component, Icons 를 잘 지원하고 있다.

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

material-ui 공식 문서 를 참고하였습니다.

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