ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [React] 웹사이트 꾸미기: Material UI
    React & 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;

     

    결과

    댓글

Designed by Tistory.