복습 기록

서버와 통신하여 CRUD + 기본적인 React style의 코드 적용

axios 통신

  callApi = ()=>{
    axios.get('/user/test').then(res=>{
      console.log(res.data.userData[0])
      //console.log(res)
    })
  }

axios . CRUD 를 통해서 간단하게 호출할 수 있다. 처음에 res를 찍어보면서 값이 어떻게 넘어오는지 확인하고 설정하면 된다.

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

위와 같이 기본 url을 설정하고 사용하는게 좋아보인다.

  "proxy": "http://127.0.0.1:8000",

pacakage.json에 proxy설정을 해주어야 하는데, proxy의 색깔이 보라색이 뜨지 않으면 잘못된 위치에 넣은 것

통신이 안될 때는 서버의 포트가 다르지 않은지 확인.

  constructor(props){
      super(props);

      this.state={
          userData:[]
      }
  }

userData를 배열로 설정해놔야 map으로 사용이 가능하다.

  {
  this.state.userData.map(data=>{
      return(
          <Customer
              id={data.id}
              name={data.name}
              img={data.img}
              gender={data.job}
              age={data.age}
              job={data.job}
          />
      )
  })
  }

jsx 코드를 적용하기 위해선 대괄호( {} ) 가 필요하고, map에는 return값이 필요하다는 것을 기억하자. 그리고 props 값을 받을 때는 그냥 name= 이런식으로 받으면 된다. this.props.name은 class안에서 받는 것.

button에 호출할 때는 그냥 이름으로 받고, componentDidMount에서는 function타입으로 괄호를 붙여서 받는데, 차이를 모르겠다. 그냥 일단 여러번 해보면서 더 확인해봐야할듯.

처음 ~ Post(img) / GET까지의 코드

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'

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>
            </TableRow>
            </div>
        )
    }
}

export default Customer;

CustomerAdd.js

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

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

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

    handleFormatSubmit = (e)=>{
        this.addCustomer()
    }

    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
        })
    }

    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;

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";

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

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

class Layout extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            userData: []
        }
    }

    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>
                        <TableCell>3</TableCell>
                        <TableCell>4</TableCell>
                        <TableCell>5</TableCell>
                        <TableCell>6</TableCell>
                    </TableHead>
                    <TableBody>
                        {
                            this.state.userData.map(data => {
                                return (
                                        <Customer
                                            id={data.id}
                                            name={data.name}
                                            img={data.img}
                                            gender={data.job}
                                            age={data.age}
                                            job={data.job}
                                        />
                                )
                            })
                        }
                        <TableCell><CustomerAdd/></TableCell>
                    </TableBody>
                </Table>
            </Paper>

        )
    }
}

export default withStyles(styles)(Layout)