꼬반 Blog

[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/ 참..

Read More

[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 되시길 바랍니다!


반응형

Article By 꼬반

*certificate* : VCP 5(2012), RHCSA 7 (2014), RHCE 7 (2015), RHCSA in REDHAT OpenStack(2017) *development language* : Javascript, NodeJS, Golang, html5, css3, shell script *middle ware* : NGINX, Apache, Tomcat, Docker, Docker Swarm, Mesos, Kubernetes, HCI,

Discuss about post