-
[React] 웹사이트 꾸미기: Material UIReact & Node.js 2020. 4. 29. 11:35
Material UI를 적용해 보고 자신만의 스타일을 'withStyles'를 이용해서 적용해 보자
(Material UI 참고 사이트: https://material-ui.com/demos/tables)
Material UI 설치: npm install @material-ui/core---
src > App.js
import React, { Component } from 'react'; import './App.css'; import Customer from './components/Customer.js'; import Table from '@material-ui/core/Table'; import Paper from '@material-ui/core/Paper'; import TableHead from '@material-ui/core/TableHead'; import TableRow from '@material-ui/core/TableRow'; import TableCell from '@material-ui/core/TableCell'; import TableBody from '@material-ui/core/Tablebody'; import { withStyles } from '@material-ui/core/styles'; const styles = theme => ({ root: { width: '100%', marginTop: theme.spacing.unit * 3, overflowX: "auto" }, Table: { minWidth: 1080 //이렇게 해야 1080이하에서 가로스크롤바가 생긴다. } }) const customers = [ { 'id': 1, 'image': 'https://placeimg.com/64/64/1', 'name': '홍길동', 'birthday': '12345', 'gender': '남자', 'job': '대학생' }, { 'id': 2, 'image': 'https://placeimg.com/64/64/4', 'name': '이순진', 'birthday': '999999', 'gender': '남자', 'job': '대학생' }, { 'id': 3, 'image': 'https://placeimg.com/64/64/3', 'name': '유관순', 'birthday': '111111', '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> <TableCell>직업</TableCell> </TableRow> </TableHead> <TableBody> {customers.map(c => { //c에는 customer이다. 예를들어 홍길동, 예준석, 박지영 처럼 return ( <Customer id={c.id} image={c.image} name = {c.name} birthday = {c.birthday} gender = {c.gender} job = {c.job} /> ) }) } </TableBody> </Table> </Paper> ); } } export default withStyles(styles)(App);
src > components > Customer.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"></img></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;
결과
'React & Node.js' 카테고리의 다른 글
React - Nodejs 연결 (0) 2020.04.29 [React] 고객 컴포넌트를 분리하여 다수의 고객 정보 보여주기 (0) 2020.04.29