인텔리제이 react ,node를 활용한 고객관리 시스템 Material ul 디자인하기

 

 

react에서 가장 많이 사용하는 Material 디자인 웹 프레임 워크

bootstrapk과 유사

https://mui.com/getting-started/installation/

 

// with npm
npm install @mui/material @emotion/react @emotion/styled

// with yarn
yarn add @mui/material @emotion/react @emotion/styled

 

 

 

※Customer.js

import React from 'react';
import TableRow from '@mui/material/TableRow';
import TableCell from '@mui/material/TableCell';

class Customer extends React.Component{
    render(){
        return(
            <TableRow>
                <TableCell>
                    {this.props.id}
                </TableCell>
                <TableCell>
                    <img src={this.props.image} alt="profile"/>
                </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;

※App.js

import Customer from './components/Customer';
import './App.css';
import Table from '@mui/material/Table';
import TableHead from '@mui/material/TableHead';
import TableBody from '@mui/material/TableBody';
import TableRow from '@mui/material/TableRow';
import TableCell from '@mui/material/TableCell';


const customers =
    [{
    'id': 1,
    'image' : 'https://placeimg.com/64/64/1', //랜덤으로 이미지 보여주는 사이트
    'name':'박짜장',
    'birthday' : '941118',
    'gender' : '남자',
    'job' : '대학생'
    },
    {
    'id': 2,
    'image' : 'https://placeimg.com/64/64/2', //랜덤으로 이미지 보여주는 사이트
    'name':'박짬뽕',
    'birthday' : '941110',
    'gender' : '여자',
    'job' : '대학생'
    },
    {
    'id': 3,
    'image' : 'https://placeimg.com/64/64/3', //랜덤으로 이미지 보여주는 사이트
    'name':'박라면',
    'birthday' : '941210',
    'gender' : '남자',
    'job' : '직장인'
    }
    ]

function App() { // 웹사이트 화면 출력
  return (
        <div>
            {
                customers.map(a => {
                    return (<Customer
                        key={a.id}
                        id={a.id}
                        image={a.image}
                        name={a.name}
                        birthday={a.birthday}
                        job={a.job}
                    />)
                })
            }
    </div>
  );
}

export default App;

 

※App.js

function App() { // 웹사이트 화면 출력
  return (
        <div>
            <Table>
                <TableBody>
                    {customers.map( a => { return (<Customer
                      key={a.id}
                      id={a.id}
                       image={a.image}
                       name={a.name}
                       birthday={a.birthday}
                       job={a.job}
                       />)})}
                   </TableBody>
            </Table>
    </div>
  );
}

 

※Customer.js

import React from 'react';
import TableRow from '@mui/material/TableRow';
import TableCell from '@mui/material/TableCell';

class Customer extends React.Component{
    render(){
        return(
            <TableRow>
                <TableCell>
                    {this.props.id}
                </TableCell>
                <TableCell>
                    <img src={this.props.image} alt="profile"/>
                </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;