React에서 Axios 사용하기

소개

Axios, Ajax, Fetch 같은 http client들은 비동기 http 통신을 위한 방법 중 하나입니다. 특히 이번에 소개할 Axios는 Fetch와 유사한 점이 많고 promise 객체를 기반으로 사용됩니다.

 

async와 await을 사용하여 함수의 실행 순서를 제어할 수 있고 HTTP 요청 취소 및 요청과 응답을 JSON 형태로 자동 변경해 Fetch처럼 stringify를 사용하지 않아도 됩니다.

 

또한 interceptors를 사용해 requests가 then이나 catch로 처리되기 전에 cancle하거나 interceptor 할 수 있고 자체적으로 요청 위조에 대한 보안 기능을 가지고 있어 보안면에서 훌륭합니다.

Promise
javascript 비동기를 간편하게 처리할 수 있도록 도와주는 객체이다. Promise는 정해진 기능을 수행한 후, 정상적으로 실행된 경우에는 성공했을 때의 동작을 실행하고 정상이 아닐 경우에는 실패했을 때의 결과를 구분하여 실행한다.
또한 순차적이지 않은 비동기 함수의 실행 순서를 제어할 수 있다.

사용방법

step.1 react 프로젝트에 Axios 추가하기

react 프로젝트를 생성 또는 Axios를 적용하고 싶은 디렉토리를 열어 Axios를 설치합니다.

$ npx create-react-app axios-example  # Axios를 react에 사용해보기 위해 react프로젝트를 생성
$ cd axios-example  # 프로젝트에 Axios를 추가하기 위해 axios-example 디렉토리로 이동
$ npm install axios@0.26.1  # Axios 설치

step.2 GET 요청하기

GET은 조회하기 위해 사용되어야 합니다.

Axios를 구현하기 위해 임의의 component를 생성해야 합니다. 저는 ComputerList라는 component를 생성해 보겠습니다. 프로젝트 최상위 디렉토리에서 component를 관리하기 위한 디렉토리를 생성하고 그 아래에 이번에 사용할 ComputerList component가 들어갈 js 파일을 생성 하고 코드를 작성해 보겠습니다.

$ mkdir src/components

// 'components/src/ComputerList.js'

import React from 'react';
import axios from 'axios';

export default class ComputerList extends React.Component {
  state = {
    computers: []
  }

  componentDidMount() {
    axios.get(`localhost:8000/api/computers`)
      .then(res => {
        const computers = res.data;
        this.setState({ computers });
      })
  }

  render() {
    return (
      <ul>
        {
          this.state.computers
            .map(computer =>
              <li key={computer.id}>{computer.number}</li>
            )
        }
      </ul>
    )
  }
}

먼저 component에서 React와 Axios를 사용하기 위해 import 하고 componentDidMount에 Axios를 넣어 GET requests를 동작하게 합니다.

여기에 사용한 axios.get(url)은 response 객체를 반환하는 promise를 return 합니다. 성공적으로 실행되었다면 computers 변수에는 res.data가 저장되어 있을 것이고 이를 활용해 state를 변경합니다.

step.3 POST 요청하기

POST는 생성하기 위해 사용되어야 합니다.

위에 했던 예제와 동일하게 이번에는 components 디렉토리에 ComputerAdd라는 component를 생성해 봅시다. 기본적인 틀은 GET을 요청했던 방법과 대부분 비슷하기 때문에 차이점을 잘 파악하는 게 중요합니다.

// 'components/src/ComputerAdd.js'

import React from 'react';
import axios from 'axios';

export default class ComputerAdd extends React.Component {
  state = {
    number: '';
  }

  handleChange = event => {
    this.setState({ cumputer: event.target.value });
  }

  handleSubmit = event => {
    event.preventDefault();

    const cumputer = {
      cumputer: this.state.number
    };

    axios.post(`localhost:8000/api/computers`, { cumputer })
      .then(res => {
        console.log(res);
        console.log(res.data);
      })
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            Cumputer Number:
            <input type="text" name="number" onChange={this.handleChange} />
          </label>
          <button type="submit">Add</button>
        </form>
      </div>
    )
  }
}

ComputerAdd component내에 handleSubmit 화살표 함수 안에 axios.post(url)을 넣어 handleSubmit가 호출되어 정상 동작 하엿을때만 POST가 동작되도록 해야 무분별한 POST 발생을 방지할 수 있습니다. 

그리고 URL인자와 함께 computer 객체 생성을 위해서 computer 변수를 인자로 함께 넘겨줘야 합니다.

또한 handleChange 화살표 함수를 사용하여 사용자가 number를 입력했을때 이를 받아와 state를 갱신하고 submit 동작이 일어난 후에 갱신된 state를 사용해 computer를 생성하는 axios.post가 제대로 동작하게끔 합니다.

step.4 DELETE 요청하기

DELETE는 삭제하기 위해 사용되어야 합니다.

위에 했던 예제와 동일하게 이번에는 components 디렉토리에 ComputerDelete라는 component를 생성해 봅시다. 이번 예시에는 URL에 매개변수를 전달하여 API에서 전달한 값을 가진 객체를 삭제하는 방법을 알 수 있습니다.

// 'components/src/ComputerDelete.js'

import React from 'react';
import axios from 'axios';

export default class ComputerDelete extends React.Component {
  state = {
    SerialNumber: '';
  }

  handleChange = event => {
    this.setState({ SerialNumber: event.target.value });
  }

  handleSubmit = event => {
    event.preventDefault();

    axios.delete(`localhost:8000/api/computers/${this.state.SerialNumber}`)
      .then(res => {
        console.log(res);
        console.log(res.data);
      })
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            Computer SerialNumber:
            <input type="number" name="SerialNumber" onChange={this.handleChange} />
          </label>
          <button type="submit">Delete</button>
        </form>
      </div>
    )
  }
}

전반적으로 구조는 URL에 매개변수를 전달하는 점을 제외하면 POST에서 사용했던 방법과 일치합니다.

step.5 PUT 요청하기

PUT은 갱신하기 위해 사용되어야 합니다.

위에 했던 예제와 동일하게 이번에는 components 디렉토리에 ComputerUpdate라는 component를 생성해 봅시다. 이번 예시에는 URL에 매개변수를 전달하여 API에서 전달한 값을 가진 객체를 갱신하는 방법을 알 수 있습니다.

// 'components/src/ComputerUpdate.js'

import React from 'react';
import axios from 'axios';

export default class ComputerUpdate extends React.Component {
  state = {
    number: '';
  }

  handleChange = event => {
    this.setState({ cumputer: event.target.value });
  }

  handleSubmit = event => {
    event.preventDefault();

    const cumputer = {
      number: this.state.number
    };

    axios.put(`localhost:8000/api/computers`, { cumputer })
      .then(res => {
        console.log(res);
        console.log(res.data);
      })
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            Cumputer Number:
            <input type="text" name="number" onChange={this.handleChange} />
          </label>
          <button type="submit">Add</button>
        </form>
      </div>
    )
  }
}

Axios에서 put()을 사용하는 것을 제외하고는 POST 사용방법과 거이 일치합니다.

step.6 Axios를 베이스 인스턴스로 사용하기

예제를 읽다 보시면 많은 경우에서 Axios가 사용되는 걸 보실 수 있을 것입니다. 여러 번 사용되는 코드는 함수로 만들어 정리해 두는 게 좋으니 정리해 봅시다.

// 'src/api.js'

import axios from 'axios';

export default axios.create({
  baseURL: `localhost:8000/api/`
});

Axios 사용을 위한 api.js 생성

// 'components/src/AxiosExmaple.js'

import React from 'react';
import API from '../api';

export default class AxiosExmple extends React.Component {
  ...
  
  handleSubmit = event => {
    event.preventDefault();

    API.post(`computers`, { cumputer })
      .then(res => {
        console.log(res);
        console.log(res.data);
      })
  }

   ...

}

baseURL을 설정해 두었으므로 더 이상 localhost:8000/api/ URL을 Axios를 사용할 때마다 작성하지 않아도 됩니다.

step.7 interceptors 사용하기

인스턴스를 생성하고 request interceptors와 response interceptors를 생성하여 각각 request 성공/에러 직전과 response 성공/에러 직전에 실행되어 원하는 코드가 실행된 후 .then() / . catch()로 이어지거나 원하는 값을 반환합니다.

import axios from 'axios'

// axios 인스턴스를 생성합니다.
const instance = axios.create({
  baseURL: 'localhost:8000',
  timeout: 1000
});

// 요청 인터셉터 2개의 콜백 함수를 받습니다.
instance.interceptors.request.use(
  function (config) {
    /* 
      요청 성공 직전 호출됩니다.
      axios 설정값을 넣습니다. (사용자 정의 설정도 추가 가능)
    */
    return config;
   }, 
  function (error) {
    // 요청 에러 직전 호출됩니다.
    return Promise.reject(error);
  }
);

// 응답 인터셉터 2개의 콜백 함수를 받습니다.
instance.interceptors.response.use(
  function (response) {
    /*
      http status가 200인 경우 응답 성공 직전 호출됩니다. 
      .then() 으로 이어집니다.
    */
    return response;
  },

  function (error) {
     /*
       http status가 200이 아닌 경우 응답 에러 직전 호출됩니다.
       .catch() 으로 이어집니다.    
     */
     return Promise.reject(error);
  }
);

---