React.js 에서 서버의 API 정보를 가져올 때 활용하는 방법이 크게 2가지가 있습니다. 하나는 React 의 기본인 fetch() 를 활용하는 방법, 두번째가 axios 모듈을 활용하는 방법 입니다. 이번에는 axios 모듈을 사용하는 방법에 대해 정리를 해 보겠습니다.


Axios

POST 통신 작업을 할 때 401 서버 오류가 발생 했었고 아래의 설정값을 추가 하는 것으로 해결 했습니다. 문제는 서버와 통신이 필요한 모든 부분에 아래와 같은 내용을 계속 반복하여 정의를 하는 것이 불편하게 느껴서 파이썬의 클래스 상속 과 같은 방법을 찾게 되었습니다.

import axios from 'axios';

axios.defaults.withCredentials = true
axios.defaults.headers.common['Access-Control-Allow-Origin'] = `*`
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`
axios.defaults.baseURL = import.meta.env.VITE_SERVER_ENDPOINT as string

Axios Instance

링크 내용은 Very Academy 유투브를 실습하면서 참고했었던 Axios 인스턴스 생성 예제 입니다. 이 내용을 참고하여 앞에서 작성한 내용을 반복할 때 활용 가능한 인스턴스 예시 내용은 다음과 같습니다.

import Axios from "axios";
import { Cookies } from 'react-cookie'

const cookie = new Cookies()
const access_token  = cookie.get('access_token')
const baseURL = import.meta.env.VITE_SERVER as string

export const axios = Axios.create({
  baseURL: baseURL,
  timeout: 4000,
  headers: {
    Authorization: access_token ? `Bearer ${access_token}` : null,
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': `*`,
		accept: 'application/json',
    withCredentials: true,
  }
})

예제에서 작성한 axios 객체를 상속받아 활용 하면, 예제에서 정의한 기본값을 그대로 활용할 수 있습니다.

import { axios } from './axios'

const profile = async() => {
  await axios.post(url_profile)
    .then(response => {
      console.log(response.data)
    })
    .catch(error => 
      console.log(error)
    )
}

Class

앞에서는 공통적인 속성을 한꺼번에 정의하는 방법을 살펴 보았습니다. 이번 내용은 api 설정에 필요한 파라미터가 복잡하게 있을 때 이를 1개의 파일에서 클래스 속성값 내부에 각각 정의를 하고 활용하는 예제 입니다. 이 내용을 참고삼아 axios 통신을 할 때에도 복잡한 파라미터를 정의할 수 있는 내용을 작성하는데 참고 하도록 하겠습니다.

export default class APIService{

  /* 1. Auth & Regist User */
  static LoginUser(body:LoginSchema){
    return fetch(URL_HEAD + `auth/login` , {
      method: 'POST',
      headers: {'Content-type':'application/json'},
      body: JSON.stringify(body)
    })
    .then((response) => response.json())
  }

  /* 2. Content Create Update Read Delete */
  static Update(content_id:number, body:any, token:string){
    console.log("to URL : ", URL_HEAD + `content/${content_id}`)
    return fetch(URL_HEAD + `content/${content_id}`, {
      method: 'PUT',
      headers: {
        'Content_Type': 'application/json',
        'Authorization': `Bearer ${token}`
      },
      body: JSON.stringify(body)
    }).then((response) => response.json())
  }
}


참고사이트