부트스트랩과 비슷한 material-UI 프레임워크를 사용했다.
https://react-bootstrap.github.io/
https://react-bootstrap.github.io/
React Bootstrap The most popular front-end framework Rebuilt for React. Current version: 1.0.0-beta.10
react-bootstrap.github.io
Material-UI: A popular React UI framework
React components for faster and easier web development. Build your own design system, or start with Material Design.
material-ui.com
터미널에 npm install @material-ui/core
1. 테이블 골격 만들기
<App.js>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
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;
|
cs |
<Customer.js>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
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;
|
cs |
기본 HTML 테이블에서 본거랑 비슷하게 매칭이 된다.
<table> : <Table>
<thead> : <TableHead>
<tr> : <TableRow>
<td> : <TableCell>
2. CSS입히기
<App.js>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
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);
|
cs |
'웹 > 리액트' 카테고리의 다른 글
| [리액트]고객관리 시스템_API서버 만들기 (0) | 2019.09.01 |
|---|---|
| [리액트]고객관리 시스템_컴포넌트 (0) | 2019.09.01 |
| [리액트]고객관리 시스템_프로젝트 생성 (0) | 2019.09.01 |
| [리액트]형상관리 (0) | 2019.08.31 |
| [리액트]앱 빌드/배포 (0) | 2019.08.31 |