React - axios 활용하기

React를 하다보면, api를 정말 편하게 불러올 수 있는 axios를 안 쓰는 사람은 없을 것이다.

 

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

 

fetch와 axios는 예전에 포스팅을 했었던것 같기 때문에 이번에는 axios를 어떻게 찰떡같이 사용할 수 있는지를 알아보겠다.

 

npm install axios 로 일단 axios를 install 해준다

 

일단 axios 자체의 API URL은, 사실 생각해보면 Api를 우리가 많이 호출할 때에 자주 사용되는 중복되는 코드가 될 확률 이 높다.

 

그래서 나는 보통 API URL을 따로 빼두는 편이다.

 

예를들면,

import axios from "axios";

export const API_URL = "http://test.123425/api/1223";
export const API_AXIOS = axios.create({ baseURL: API_URL });

이런식으로 API_URL을 지정하고 axios를 만든 다음에 baseURL로 지정해준다.

 

이렇게 되면, API를 사용하는 곳에서 API_AXIOS 를 사용해서 get post를 해주면 편하다.

 

API를 사용할 때 또한 따로 지정을 해주는 편인데,

import { API_AXIOS } from "./Axios";

export default {
  existCheck: (item: string[], count: number) =>
    API_AXIOS.post<{
      code: number;
      message: any;
      data: {
        count: number;
        data: Array<{
          phoneNumber: string;
          situationCode: string;
          exists: boolean;
        }>;
      };
    }>(`/exists`, {
      count: count,
      phoneNumber: phoneNumber,
    }),
};

이건 typescript 를 지정해주었긴 한데, 이런식으로 api를 한군데에 몰아 넣어서 나중에 불러올 때, 이 파일을 import 해서

 

api.existCheck(item, count) 이런식으로 불러오면 api 처리하기 굉장히 편하다