react axios 라이브러리 get과 post 방식

 

 

 

 

app.js

import AxiosGet from './AxiosGet'

class App extends Component {
  render() {
    return (
      <div>
        <h1>Start React 200!</h1>
        <AxiosGet/>
      </div>
    );
  }
}



export default App;

 

  AxiosGet.js

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

class AxiosGet extends Component {
    componentDidMount(){
        axios.get('http://date.jsontest.com/')
        .then(response => {alert(response.data.date)})
    }
    render() {
        return (
            <div>
                <h1>axios get</h1>
            </div>
        );
    }
}
export default AxiosGet;

 

app.js

import AxiosPost from './AxiosPost'

class App extends Component {
  render() {
    return (
      <div>
        <h1>STart React 200!</h1>  
        <AxiosPost/>
      </div>
    );
  }
}



export default App;

 

axiospost.js

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

class AxiosPost extends Component {
    componentDidMount(){
        axios.post('http://date.jsontest.com/',{
            a:"react", b:200
        })
        .then(response =>{alert(response.data.date)})
    }
    render() {
        return (
            <div>
                <h1>axios post</h1>
            </div>
        );
    }
}


export default AxiosPost;

 

 

callback

 

import CallbackFunc from './CallbackFunc';

function App() {
  return (
    <div>
      <h1>Start react 200!</h1>
      <CallbackFunc/>
    </div>
  );
}

export default App;

 

 

CallbackFunc.js

import React, {Component} from 'react';


class CallbackFunc extends Component {
    componentDidMount(){
        this.logPrint(1, function(return1){
            console.log("return1 :" +return1);
            this.logPrint(return1, function(return2){
                console.log("return2 :" + return2);
            })
        }.bind(this))
    }
    logPrint(param,callback){
        console.log("logPrint param :" + param);
        param += param
        callback(param);
    }
    render() {
        return (
            <div>
                <h1>callback fucntion</h1>
            </div>
        );
    }
}


export default CallbackFunc;