Material UI이란,

React Components that Implement Google's Material Design.

개발 환경 구축

(1). npm에서 create-react-app 명령 도구 설치

$ npm install -g create-react-app

(2). create-react-app 명령으로 React 샘플 프로젝트 만들기

$ create-react-app hello-react
cd hello-react

이제 React 개발 환경을 설치할 수 있었다.$ npm start 명령을 치면,
브라우저에서 자동으로 localhost:3000이 열리고 아래와 같이 표시되면 성공.

(3). npm에 Material-UI 설치

$ npm i material-ui react-tap-event-plugin

버전 지정도 가능

$ npm i [email protected] react-tap-event-plugin

터치, 탭, 클릭 등의 이벤트를 사용하려면react-tap-event-plugin 설치도 필요합니다.

설치가 성공하면 프로젝트의 package 구성 파일( package.json )에
설치된 package를 확인할 수 있다.

$ cat package.json
{
  "name": "hello-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "material-ui": "^0.18.6",
    "react": "^16.1.0",
    "react-dom": "^16.1.0",
    "react-scripts": "1.0.17",
    "react-tap-event-plugin": "^3.0.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

사용해보기

(1). 이벤트를 사용할 수 있도록 src/index.js 파일에 react-tap-event-plugin 관련 코드를 아래와 같이 쓴다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import injectTapEventPlugin from 'react-tap-event-plugin';

// クリックイベントなどを使えるようにする
injectTapEventPlugin();

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

(2). Material-UI의 컴포넌트를 import하여 사용

Dialog 버튼을 누르면 모달이 시작되는 코드 예:

src/App.js

import React, { Component } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import AppBar from 'material-ui/AppBar';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import RaisedButton from 'material-ui/RaisedButton';


class App extends Component {
  constructor(props) {
    super(props);
    this.state = {open: false};
    this.handleOpen = this.handleOpen.bind(this);
    this.handleClose = this.handleClose.bind(this);
  }

  handleOpen() {
    this.setState({open: true});
  }

  handleClose() {
    this.setState({open: false});
  }

  render() {
    const actions = [
      <FlatButton
        label="Cancel"
        primary={true}
        onTouchTap={this.handleClose}
      />,
      <FlatButton
        label="Submit"
        primary={true}
        keyboardFocused={true}
        onTouchTap={this.handleClose}
      />,
    ];

    return (
      <MuiThemeProvider>
        <div>
          <AppBar title="Title" />
          <RaisedButton label="Dialog" onTouchTap={this.handleOpen} />
          <Dialog
          title="Dialog With Actions"
          actions={actions}
          modal={false}
          open={this.state.open}
          onRequestClose={this.handleClose}
        >
          The actions in this window were passed in as an array of React objects.
        </Dialog>
        </div>
      </MuiThemeProvider>
    );
  }
}
export default App;

샘플 코드 해설

import React, { Component } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import AppBar from 'material-ui/AppBar';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import RaisedButton from 'material-ui/RaisedButton';

여기에서 사용하는 Material-UI의 구성 요소를 import.
포인트는 루트 컴퍼넌트를 MuiThemeProvider 로 랩 하는 것으로,
Material UI의 컴포넌트를 사용할 수 있도록 한다.

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {open: false};
    this.handleOpen = this.handleOpen.bind(this);
    this.handleClose = this.handleClose.bind(this);
  }

  handleOpen() {
    this.setState({open: true});
  }

  handleClose() {
    this.setState({open: false});
  }

여기서, 다이얼로그의 개폐 플래그와 이벤트를 정의한다.

나머지 코드는 실제로 Material-UI를 사용합니다. (약)

도움이 된 링크

htps : // 코 m / g 코 카 / / ms / b 후아 아 4973c5 아 b12 f6
ht tp // // rc로 ch. 하테나아 ry. 코m/엔트리/2017/08/15/134239