[리엑트(React)] axios

axios는 React에서 제공하는 프로미스 기반의 서버 통신 객체를 제공하는 모듈이다

(브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리)

 

axios를 사용하기 전에 비동기 작업관련 함수에 대해 배워보자

 

async : 이 함수는 비동기적으로 일처리를 한다

await : 뒤에 나오는 데이터를 기다렸다가 내보낸다

 

import React from 'react'

function getPromise(){
    return new Promise((resolve, reject) =>{
        // 동작이 끝날 때까지 시간이 좀 걸리는 작업
        setTimeout(function(){
            resolve("성공적 마무리!!")
        }, 1500)
    })
}
// getPromise를 불러다가 반환해주는 함수
// 비동기 작업을 가디렸다가 반환해주는 함수 : async, await
// async : 이 함수는 비동기적으로 일처리를 한다!
// await : 뒤에 나오는 데이터를 기다렸다가 내보내자!
async function getAsyncData(){
    return await getPromise();
}
class AsyncCompo extends React.Component{
  constructor(props){
    super(props)
  }
  // 컴포넌트가 비동기 작업을 수행하려면, 랜더가 된 이후여야 한다!
  componetDidMount(){
    getAsyncData().then(res => console.log(res))
    .catch(rej => console.log(rej))  
  }
    /*
      getPromise().then(function(successValue){
        console.log(successValue)
      })
      .catch(function(failedValue){
        console.log(failedValue)
      })
        }
        */
  render(){
    return <div>랜더링 됐다!</div>
  }
}

export default AsyncCompo;

// 프로미스
/*
 비동기 작업에 대한 약속
 비동기 작업 이후 발생할 완료 또는 실패, 그리고 그 결과 값을 나타낸다

    비동기 작업이란?
    언제 끝날지 알 수 없는 작업
    작업의 상태가 시작, 진행중, 완료 인 것과 무관하게 프로그램은
    계속해서 실행되어야 한다.
 */

-> 성공적으로 랜더링이 된다.

 

다음은 axios를 이용하여 Dog Image API와 연동하여 강아지 사진들을 불러와보자

 

import React from 'react'
import axios from 'axios'
// axios : 프로미스 기반의 서버 통신 객체를 제공하는 모듈
import styled from 'styled-components'

// https://dog.ceo/api/breeds/image/random
async function getDog(){
    return await axios.get("https://dog.ceo/api/breeds/image/random")
}
const Button = styled.button`
display: block;
width: 120px; height: 30px;
background-color : orange; color: white;
border: none; border-radius: 8px;

&:hover{ background-color : orangered;}
&:active{ color : gray; outline: none;}
&:focus{ outline: none;}
`
class DogImage extends React.Component{
  constructor(props){
    super(props)
    this.state = {
        imageSrc: null
    }
  }
  componentDidMount(){
      getDog().then(response => {
          const result = response.data
          this.setState({
              imageSrc: result.message
          })
      })
      .catch(error => console.log(error))
  }
  handleClick = ()=>{
    getDog().then(response => {
        const result = response.data
        this.setState({
            imageSrc: result.message
        })
    })
    .catch(error => console.log(error))
  }
  render(){
    return <div>
        <h1>서버에서 보내준 강아진 사진</h1>
        <Button onClick = {this.handleClick}>요청</Button>
        {this.state.imageSrc !== null ? <img style={{width: 400, height:300}}src={this.state.imageSrc} /> : <p>아직 사진이 없습니다</p>}
    </div>
  }
}
export default DogImage;

import DogImage from './components/Ccompo'
class App extends React.Component{
  constructor(props){
    super(props)
  }
  render(){
    return <div><DogImage /></div>
  }
}
export default App;