React 동빈나 강좌 #6

jsonlint

json file의 유효성을 검사할 수 있는 사이트

https://jsonlint.com/

axios

Rest API 를 받을 수 있는 방법

참조 사이트

https://sheldhe93.tistory.com/6

axios npm

https://www.npmjs.com/package/axios

axios 설명

https://velog.io/@johnque/React-API-%EC%97%B0%EB%8F%99-v9k692txn5

axios를 이용한 REST API 호출

React 생활코딩 강좌 #6 글 참고

MySQL DB와 연동하여 port 8000에 userData를 반환하는 api를 만들었다.

위에서 만들어준 서버와 axios를 연결해준다. 이 때 proxy설정을 해주어야 하는데 자세한 내용은 react 생활코딩 강좌 #6 글을 참고하자.

state에 dataState의 값을 배열로 선언했다.

callApi method를 만들고, 이 method에서 get 방식을 이용해 data를 가져온다.

rendering 단계에서 map을 이용해서 props의 값을 전달해준다.

화면의 출력 값은 #5와 동일하다

전체코드

App.js

import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';
import Customer from './components/Customer'

import Paper from '@material-ui/core/Paper'
import Table from '@material-ui/core/Table'
import TableHead from '@material-ui/core/TableHead'
import TableBody from '@material-ui/core/TableBody'
import TableRow from '@material-ui/core/TableRow'
import TableCell from '@material-ui/core/TableCell'

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

import axios from 'axios'

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

const data=[
  {
  "id":1,
  "img":"https://placeimg.com/64/64/1",
  "name":"임얼쑤",
  "gender":"man",
  "age":25,
  "job":"프로그래머",
},
{
  "id":2,
  "img":"https://placeimg.com/64/64/2",
  "name":"이종원",
  "gender":"man",
  "age":28,
  "job":"창업가",
},
{
  "id":3,
  "img":"https://placeimg.com/64/64/3",
  "name":"양희찬",
  "gender":"man",
  "age":15,
  "job":"학생",
},
]

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


class App extends Component{
  constructor(props){
    super(props)
    this.state={
      dataState:[]
    }
  }

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

  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>
            {
          this.state.dataState.map(userData=>{
            return(
              <Customer
              img={userData.img}
              key={userData.id}
              id={userData.idx}
              name={userData.name}
              gender={userData.gender}
              age={userData.age}
              job={userData.job}
              />
            )
          })
          }
        </TableBody>
        <TableBody>
          <input type="button" value="get data" onClick={
            function(){
              api.get('/').then(res=>{
                console.log(res.data.userData)
              })
            }
          }></input>
        </TableBody>
      </Table>
    </Paper>
  );
}
}

export default withStyles(styles)(App);

Customer.js

import React, {Component} from 'react'

import TableRow from '@material-ui/core/TableRow'
import TableCell from '@material-ui/core/TableCell'

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

export default Customer;