React 와 Material UI를 이용하여 화면 구성하기

---

개요

 

이번에는 Bootstrap과 비슷하지만 더 좋다고 생각되는 Material UI를 이용하여 화면을 구성하는 방법을 알아보도록 하겠습니다.

 

Material UI 사이트 : https://material-ui.com

 

---

설명

 

Material UI 설치 명령어: npm install @material-ui/core
터미널에서 위의 명령어를 입력합니다.

 

설치가 완료되면 서버를 종료한 후에 다시 실행해 줍니다.

서버 오픈 명령어 yarn start 

 

---

APP.js

 

import React from 'react'
import TableRow from '@material-ui/core/TableRow'
import TableCell from '@material-ui/core/TableCell'

class Customer extends React.Component {
    render() {
        return (
            <TableRow>
                <TableCell>{this.props.id}</TableCell>
                <TableCell><img src={this.props.image} alt="profile"/></TableCell>
                <TableCell>{this.props.name}</TableCell>
                <TableCell>{this.props.birthday}</TableCell>
                <TableCell>{this.props.gender}</TableCell>
                <TableCell>{this.props.job}</TableCell>
            </TableRow>
        )
    }
}

export default Customer;

 

---

App.js

 

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Customer from './components/Customer'
import Table from '@material-ui/core/Table';
import TableHead from '@material-ui/core/TableHead';
import TableBody from '@material-ui/core/TableBody';
import TableRow from '@material-ui/core/TableRow';
import TableCell from '@material-ui/core/TableCell';


const customers = [
{
'id' :1,
'image':'https://placeimg.com/64/64/1',
'name':'홍길동',
'birthday':'961222',
'gender':'남자',
'job':'학생'
},
{
  'id' :2,
  'image':'https://placeimg.com/64/64/2',
  'name':'정성현',
  'birthday':'960402',
  'gender':'남자',
  'job':'인턴' 
},
{
'id' :3,
'image':'https://placeimg.com/64/64/3',
'name':'김덕배',
'birthday':'990821',
'gender':'남자',
'job':'장군'
}

]


class App extends Component {
  render() {
    return (
      <div>
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>번호</TableCell>
            <TableCell>이미지</TableCell>
            <TableCell>이름</TableCell>
            <TableCell>생년월일</TableCell>
            <TableCell>성별</TableCell>
            <TableCell>직업</TableCell>
          </TableRow>
        </TableHead>
      <TableBody>
      {customers.map(c => {
      return <Customer key={c.id} id={c.id} image={c.image} name={c.name} birthday={c.birthday} gender={c.gender} job={c.job} />
      })}
      </TableBody>
      </Table>
      </div>
    );
  }
}

export default App;

 

---

화면

 

이렇게 나오는데 여기서 UI를 더 바꾸기 위해서 withStyles 라이브러리를 이용해서 CSS를 적용할 수 있습니다.

 

---