[ReactJS] Grommet, Material-UI 기본 사용법을 알아보자.

ReactJS 를 공부하면서 멋진 UI를 쉽게 만들수 있도록 도와주는 여러 UI들이 있다는 걸 알게되었습니다.

그중 veloport 님 블로그에서 알게된 Grommet과 Material-UI 를 사용하는 방법을 알아보겠습니다.

(react-md, react toolbox 나 참조4의 사이트에서 다른 UI 도 확인했지만 제가 기본으로 사용하는

boilerplate인 create-react-app 에서는 sass 를 기본적으로는 지원하지 않습니다. 물론 기본 설정을 deploy

하고 그뒤 설정을 약간 변경하여 사용하는 건 충분히 가능합니다. 더 자세한 내용은 참조5 링크를 확인하세요.)

***

참조 : https://velopert.com/2597
참조2: https://grommet.github.io/
참조3: http://www.material-ui.com/#/
참조4: https://blog.webkid.io/react-ui-libraries/
참조5: https://github.com/facebookincubator/create-react-app/issues/78

***

아래 실행 환경은 기본적으로 nodejs (LTS 6.9.4 기준), create-react-app 으로 진행됩니다.

아래 테스트에 사용한 소스는 참조4 블로그를 기본으로 활용하였습니다.

# create-react-app my-app
# cd my-app
# npm install --save grommet material-ui react-tap-event-plugin
# npm start

3번째 라인에서 grommet과 material-ui 를 설치해줍니다. material-ui는 0.15 버전을 기준으로 사용방법이

변경되었습니다. 그래서 react-tap-event-plugin 을 같이 설치하여 줍니다.

이제 이 화면을 수정하여 grommet과 material-ui 의 컴포넌트들을 사용해보겠습니다.

먼저 grommet 입니다.

src/GrommetWorldMap.js (생성)
import React from 'react';
import WorldMap from 'grommet/components/WorldMap';
import '../node_modules/grommet/grommet.min.css';
const GrommetWorldMap = () => {
  return (
    <div>
      <WorldMap series={[{
        "continent": "NorthAmerica",
        "label": "North America",
        "value": 40,
        "colorIndex": "graph-1",
      }, {
        "continent": "SouthAmerica",
        "label": "South America",
        "value": 30,
        "colorIndex": "accent-2",
      }, {
        "continent": "Europe",
        "label": "Europe",
        "value": 20,
        "colorIndex": "unset",
      }, {
        "continent": "Africa",
        "label": "Africa",
        "value": 10,
        "colorIndex": "graph-2",
      }, {
        "continent": "Asia",
        "label": "Asia",
        "value": 15,
        "colorIndex": "graph-3",
      }, {
        "continent": "Australia",
        "label": "Australia",
        "value": 10,
        "colorIndex": "graph-4",
      }]} />
    </div>
  );
};
export default GrommetWorldMap;
src/App.js (수정)
import React, { Component } from 'react';
import GrommetWorldMap from './GrommetWorldMap';

class App extends Component {
  render() {
    return (
      <GrommetWorldMap/>
    );
  }
}

export default App;

위처럼 수정 후 브라우저를 확인하여 보시면 grommet 의 component 인 worldmap 을 확인할 수 있습니다.

참 쉽죠?!?!

다음은 material-ui  차례 입니다.

src/MaterialEx.js (생성)

import React from 'react';
import AutoComplete from 'material-ui/AutoComplete';

const libs = ['Material UI', 'Elemental UI', 'Grommet', 'Mui', 'Rebass'];

const MaterialEx = () => {
  return (
    <div>
      <AutoComplete
        floatingLabelText="Type something ..."
        filter={AutoComplete.fuzzyFilter}
        dataSource={libs}
        maxSearchResults={3}
        menuStyle={{ background: '#fff' }}
      />
    </div>
  );
};

export default MaterialEx;

src/App.js (수정)

import React, { Component } from 'react';
import MaterialEx from './MaterialEx';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import injectTapEventPlugin from 'react-tap-event-plugin';

injectTapEventPlugin();

class App extends Component {
  render() {
    return (
      <MuiThemeProvider>
        <MaterialEx/>
      </MuiThemeProvider>
    );
  }
}

export default App;

위처럼 수정 후 브라우저를 확인하여 보시면 AutoComplete Component 를 확인할 수 있습니다!

다만 material-ui 의 경우 위에서 언급한것처럼 0.15 버전 기준으로 사용방법이 약간 달라졌습니다.

사용하려는 컴포넌트를 마지막에 MuiThemeProvider 로 감싸주면 됩니다. 이는 테마와 관련된

내용이 추가되면서 변경된 점으로 테마를 쉽게 Material UI 와 호환되는 다른 테마로 변경할 수 있게 해줍니다.

그럼 모두 즐거운 ReactJS 되시길 바랍니다!