axiosInstance

import Axios from 'axios';

import { API_HOST } from "./Constants";

import { makeUseAxios } from 'axios-hooks';

export const API_HOST = process.env.REACT_APP_API_HOST_BACKEND || 'http://localhost:8000';

export const axiosInstance = Axios.create({

    baseURL: API_HOST

});

export const useAxios = makeUseAxios({

    axios: axiosInstance

});

---

 axiosInstance를 사용하면 local 환경과 production 환경이 자동으로 구분되는 장점이 있다. 환경변수의 설정값의 유무에 따라 API_HOST값이 바뀌기 때문이다. 실제 컴포넌트에서 사용하는 예시는 다음과 같다.

1. GET 요청

const response = await axiosInstance.get(`/board/announcements/?page=${page}`);

---

2. POST 요청

async function sendPostRequest() {

    try {

        const response = await axiosInstance.post('/board/announcements/', 

            { title, content },

            { headers: header }

        );

        console.log('응답:', response.data);

    } catch (error) {

        console.error('에러 발생:', error);

    }

}

sendPostRequest();

const response = await axiosInstance.patch('/profiles/',

                formData,

                {

                    headers: {

                        'Authorization': `Bearer ${djangoAccessToken}`,

                        'Content-Type': 'multipart/form-data',

                    }

                },

            )

---

3. PATCH 요청

const response = await axiosInstance.put(`announcements/${id}`);

---

4. DELETE 요청

const response = await axiosInstance.delete(`announcements/${id}`);