[React] axios instance 만들어서 사용하기

📱테스트 환경

"react": "18.2.0"
"react-dom": "18.2.0"
"typescript": "^4.9.5"

---

서버와 통신하기 위해서 axios 사용하고 있었는데, 기존에는 그냥 GET, POST, PUT, DELETE 를 바로바로 사용했는데

그게아니라 인스턴스를 만들어서 재사용성을 높일 수 있도록 하기 위해서 리팩토링을 진행하였다.

만드는 방법은 아주 간단하다.

axios.tsx

export const axiosInstance = axios.create({
    baseURL: BACKEND_API_ADRSS,
    timeout: 10000,
});

.env 에 설정되어있는 BACKEND_API_ADRESS 를 baseURL 에 지정해놓고, timeout 은 10000초로 지정해놓았다.

이외에도 기본적인 data 나 여러 설정들을 기본으로 세팅해놓을 수 있다.

이렇게 해놓고 사용할때는

await axiosInstance.get(`/${id}`).then(res => {
    return res
});

이런식으로 해서 인스턴스를 호출해서 사용해주면 된다.

아주 간단할 뿐만 아니라 재사용성을 높일 수 있고 코드 가독성을 높일 수 있기 때문에

이렇게 사용하는 것을 선호할 뿐만 아니라 권장하고있다!