App.js
2.77 KB
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
import React, {Component, components} from 'react';
import Student from './components/Student';
import './App.css';
import Paper from '@material-ui/core/Paper'
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';
const styles = theme => ({
root: {
width: '100%',
marginTop: theme.spacing.unit * 3,
overflowX: "auto"
},
table: {
minWidth:1000
}
})
const students = [
{
'st_Code': 6666,
'st_Name': '육현진',
'st_Id': 2018102210,
'st_Major':'컴퓨터공학과',
'st_Midscore': 100,
'st_Finalscore': 100,
'st_Assignscore': 100,
'st_Attendscore': 100,
'st_Score':'A+'
},
{
'st_Code': 1111,
'st_Name': '김창동',
'st_Id': 2020021120,
'st_Major':'컴퓨터공학과',
'st_Midscore': 79,
'st_Finalscore': 85,
'st_Assignscore': 100,
'st_Attendscore': 90,
'st_Score':'A0'
}]
class App extends Component{
state = {
students: ""
}
componentDidMount() {
this.callApi()
.then(res => this.setState({students: res}))
.catch(err => console.log(err));
}
callApi=async()=>{
const response = await fetch('/api/students');
const body = await response.json();
return body;
}
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>
<TableCell>기말</TableCell>
<TableCell>과제</TableCell>
<TableCell>출석</TableCell>
<TableCell>학점</TableCell>
</TableRow>
</TableHead>
<TableBody>
{
this.state.students ?
this.state.students.map(c=>{
return (
<Student
key={c.st_Code}
st_Code={c.st_Code}
st_Name={c.st_Name}
st_Id={c.st_Id}
st_Major={c.st_Major}
st_Midscore={c.st_Midscore}
st_Finalscore={c.st_Finalscore}
st_Assignscore={c.st_Assignscore}
st_Attendscore={c.st_Attendscore}
st_Score={c.st_Score}
/>
);
}) : ""
}
</TableBody>
</Table>
</Paper>
);
}
}
export default withStyles(styles)(App);