Layout.js

import Customer from './Customer'
import TableHead from "@material-ui/core/TableHead";
import {TableBody} from "@material-ui/core";
import Paper from "@material-ui/core/Paper";
import Table from "@material-ui/core/Table";
import TableCell from "@material-ui/core/TableCell";
import axios from 'axios'
import React from 'react'
import {withStyles} from "@material-ui/core/styles"
import CustomerAdd from "./CustomerAdd";


import {withStyles} from '@material-ui/core/styles'

const styles = (theme) => ({
    root: {
        width: '100%',
        marginTop: theme.spacing.unit * 3,
        overFlowX: "auto"
    },
    table: {
        minWidth: 1000
    },
    hidden : {
        display: 'none'
    }
})

const api = axios.create({
    baseURL: `/user`
})

class Layout extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            userData: [],
            open:false
        }
    }

    stateRefresh = ()=>{
        // this.setState({
        //     dateState:[],
        //     completed:0
        // })
        this.callApi()
    }

    callApi = () => {
        api.get('/test').then(res => {
            this.setState({
                userData: res.data.userData
            })
        })
    }

    componentDidMount = () => {
        this.callApi()
    }

    render() {
    const {classes} = this.props;
        return (
            <Paper>
                <Table>
                    <TableHead>
                        <TableCell>1</TableCell>
                        <TableCell>2</TableCell>
               
                    </TableHead>
                    <TableBody>
                        <TableCell>
                        {
                            this.state.userData.map(data => {
                                return (
                                        <Customer
                                            stateRefresh={this.stateRefresh}
                                            id={data.idx}
                                            name={data.name}
                                            img={data.img}
                                            gender={data.job}
                                            age={data.age}
                                            job={data.job}
                                        />
                                )
                            })
                        }
                        </TableCell>
                        <TableCell><CustomerAdd stateRefresh={this.stateRefresh}/></TableCell>
                    </TableBody>
                </Table>
            </Paper>

        )
    }
}

export default withStyles(styles)(Layout)

Customer.js

import React, {Component} from 'react'
import TableRow from "@material-ui/core/TableRow";
import TableCell from "@material-ui/core/TableCell";
import CustomerAdd from './CustomerAdd'
import CustomerDelete from './CustomerDelete';

class Customer extends Component{
    render() {
        return(
            <div>
           <TableRow>
                <TableCell>{this.props.id}</TableCell>
                <TableCell><img src={this.props.img}></img></TableCell>
                <TableCell>{this.props.name}</TableCell>
                <TableCell>{this.props.age}</TableCell>
                <TableCell>{this.props.gender}</TableCell>
                <TableCell>{this.props.job}</TableCell>
                <TableCell><CustomerDelete stateRefresh={this.props.stateRefresh} id={this.props.id}/></TableCell>
            </TableRow>
            </div>
        )
    }
}

export default Customer;

CustomerAdd.js

import React, {Component} from 'react'
import axios from 'axios'

import Dialog from '@material-ui/core/Dialog'
import DialogActions from '@material-ui/core/DialogActions'
import DialogTitle from '@material-ui/core/DialogTitle'
import DialogContent from '@material-ui/core/DialogContent'
import TextField from '@material-ui/core/TextField'
import Button from '@material-ui/core/Button'

const userApi = axios.create({
    baseURL:"/user/test"
})

class CustomerAdd extends Component{
    constructor(props){
        super(props)
        this.state={
            name:"",
            age:"",
            gender:"",
            job:"",
            file:"",
            fileName:"",
            open:false
        }
    }

    handleFormatSubmit = (e)=>{
        this.addCustomer()
        this.props.stateRefresh()
        this.setState({
            open:false
        })
    }

    handleValueChange = (e)=>{
        let nextState = [];
        nextState[e.target.name]=e.target.value
        this.setState(nextState)
    }

    handleFileChange = (e)=>{
        this.setState({
            file:e.target.files[0],
            fileName:e.target.value
        })
    }

    handleClickOpen = ()=>{
        this.setState({
            open:true
        })
    }

    handleClose = ()=>{
        this.setState({
            open:false
        })
    }

    addCustomer = ()=>{
        const formData = new FormData();
        formData.append('img',this.state.file)
        formData.append('name',this.state.name)
        formData.append('age',this.state.age)
        formData.append('gender',this.state.gender)
        formData.append('job',this.state.job)

        const config = {
            headers:{
                'content-type':'multipart/form-data'
            }
        }
        userApi.post('/',formData,config)
    }

    render(){
        return(
            <form onSubmit={this.handleFormatSubmit}>
                <h1>고객추가</h1>
                이미지: <input type="file" name="file" file={this.state.file} value={this.state.fileName} onChange={this.handleFileChange}/><br/>
                이름: <input type="text" name="name" value={this.state.name} onChange={this.handleValueChange}/><br/>
                나이: <input type="text" name="age" value={this.state.age} onChange={this.handleValueChange}/><br/>
                성별: <input type="text" name="gender" value={this.state.gender} onChange={this.handleValueChange}/><br/>
                직업: <input type="text" name="job" value={this.state.job} onChange={this.handleValueChange}/><br/>
            <button type="submit">전송</button>
            </form>
        )
    }

}

export default CustomerAdd;

CustomerDelete.js

import React, {Component} from 'react'
import axios from 'axios'

const userApi = axios.create({
    baseURL:`/user/test`
})

class CustomerDelete extends Component{

    constructor(props){
        super(props)
    }

    deleteCustomer(){
        const url = '/'+ this.props.id

        userApi.delete(url).then(()=>{
            this.props.stateRefresh()
        })
    }

    render(){
        return(
            <button onClick={(e)=>{this.deleteCustomer()}}>삭제</button>
        )
    }
}

export default CustomerDelete;