[리액트]고객관리 시스템_UI

부트스트랩과 비슷한 material-UI 프레임워크를 사용했다.

https://react-bootstrap.github.io/

https://react-bootstrap.github.io/

https://material-ui.com/

Material-UI: A popular React UI framework

 

터미널에 npm install @material-ui/core

 

1. 테이블 골격 만들기

<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,
    name: "name1",
    birthday: "112345",
    gender: "남자",
    job: "없음"
  },
  {
    id: 2,
    name: "name2",
    birthday: "112345",
    gender: "남자",
    job: "없음"
  },
  {
    id: 3,
    name: "name3",
    birthday: "112345",
    gender: "여자",
    job: "없음"
  }
];
class App extends Component {
  render() {
    return (
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>아이디</TableCell>
            <TableCell>이름</TableCell>
            <TableCell>생일</TableCell>
            <TableCell>성별</TableCell>
            <TableCell>직업</TableCell>
            
          </TableRow>
        </TableHead>
        <TableBody>
          {customers.map(c => {
            return (
              <Customer
                id={c.id}
                name={c.name}
                birthday={c.birthday}
                gender={c.gender}
                job={c.job}
              ></Customer>
            );
          })}
        </TableBody>
      </Table>
    );
  }
}
 
export default App;
 

<Customer.js>

import React, { Component } from "react";
import TableRow from "@material-ui/core/TableRow";
import TableCell from "@material-ui/core/TableCell";
 
class Customer extends Component {
  render() {
    return (
      <TableRow>
        <TableCell>{this.props.id}</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;
 

<table> : <Table>

<thead> : <TableHead>

<tr> : <TableRow>

<td> : <TableCell>

 

2. CSS입히기

<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";
import { withStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
const styles = theme => ({
  root: {
    width: "100%",
    marginTop: theme.spacing.unit * 3,
    overflowX: "auto"
  },
  table: {
    minWidth: 1080
  }
});
const customers = [
  {
    id: 1,
    name: "name1",
    birthday: "112345",
    gender: "남자",
    job: "없음"
  },
  {
    id: 2,
    name: "name2",
    birthday: "112345",
    gender: "남자",
    job: "없음"
  },
  {
    id: 3,
    name: "name3",
    birthday: "112345",
    gender: "여자",
    job: "없음"
  }
];
class App extends Component {
  render() {
    const{classes}=this.props;
    return (
      <Paper className={classes.root}>
        <Table className={classes.table}>
          <TableHead>
            <TableRow>
              <TableCell>아이디</TableCell>
              <TableCell>이름</TableCell>
              <TableCell>생일</TableCell>
              <TableCell>성별</TableCell>
              <TableCell>직업</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {customers.map(c => {
              return (
                <Customer
                  id={c.id}
                  name={c.name}
                  birthday={c.birthday}
                  gender={c.gender}
                  job={c.job}
                ></Customer>
              );
            })}
          </TableBody>
        </Table>
      </Paper>
    );
  }
}
 
export default withStyles(styles)(App);