[React Axios] Axios 호출 방법 2가지 | 기본호출, 인스턴스

Axios, 더 효율적으로 사용하는 방법: 기본 호출 vs 인스턴스

1. 기본 Axios 호출 (axios.get)

주석 처리된 코드에서 볼 수 있는 가장 기본적인 방식입니다.

• 특징: 라이브러리에서 제공하는 기본 기능을 직접 사용합니다.
• 장점: 별도의 설정 파일이 필요 없어 소규모 테스트나 단발성 요청에 간편합니다.
• 단점:
  • 중복 발생: 모든 요청마다 전체 URL(https://...)을 반복해서 작성해야 합니다.
  • 유지보수 취약: 서버 주소가 변경될 경우, 프로젝트 내의 모든 호출 코드를 일일이 수정해야 합니다.
  • 설정 번거로움: 공통 헤더(인증 토큰 등)를 매번 설정해야 하므로 코드가 길어집니다.

---

기본호출은 이전 페이지 참고
2026.04.09 - [분류 전체보기] - [React axios] .then / async-await 함수 비교 실습

 

2. Axios 인스턴스 활용 (axiosInstance)

주석 없이 사용된 코드로, 실무에서 가장 권장되는 방식입니다.

• 특징: 공통 설정을 담은 나만의 Axios 객체를 미리 만들어 재사용합니다.
• 주요 장점:
  • Base URL 설정: 환경변수(VITE_API_SERVER_IP) 등을 활용해 서버 기본 주소를 지정하므로, 호출 시 엔드포인트("/users")만 적으면 됩니다.
  • 코드 간결화: 반복되는 설정이 줄어들어 비즈니스 로직에만 집중할 수 있습니다.
  • 유지보수 용이: 서버 주소나 타임아웃 등의 설정이 바뀌어도 설정 파일(axiosInstance.js) 하나만 수정하면 전체에 반영됩니다.
  • 확장성: 인터셉터(Interceptors) 기능을 통해 모든 요청/응답 전에 특정 로직(로그인 체크, 에러 공통 처리 등)을 실행할 수 있습니다.

---

3. 코드 구현 방식 비교

비교 항목	기본 방식 (주석 부분)	인스턴스 방식 (실행 부분)
URL 작성	전체 주소(http://.../users) 기입	상대 경로("/users")만 기입
설정 관리	호출할 때마다 매번 설정	파일 한 곳에서 공통 관리
가독성	코드가 길고 중복이 많음	깔끔하고 의도가 명확함
권장 상황	간단한 외부 API 테스트	실무 프로젝트, 대규모 앱

 

1) api아래 axiosInstance 생성

api 아래 만들어준다. api / axiosInstance.js

import axios from "axios";


const serverURL = import.meta.env.VITE_API_SERVER_IP;
const axiosInstance = axios.create({
    baseURL: serverURL,
    timeout : 5000
})

export default axiosInstance;

app.jsx에서 위에 axiosinstance.js를 임포트해준다.

import axiosInstance from './api/axiosInstance';

일단 .env.local에서 가지고올 plcaeholder 사이트를 꼭 지정해줘야 한다. 
이전에 axios.get을 주석처리하고 await axiosInstance.get("/users"); 로 새로 가지고 오면 이전 처럼 정상처럼 보인다. 

App.jsx 최종

import axiosInstance from './api/axiosInstance';

import './App.css'

import axios from 'axios';

const serverIp = import.meta.env.VITE_API_SERVER_IP;

function App() {

  console.log(serverIp)

  //fetch함수로 비동기 통신

//

 const axiosSelectAll =async()=> {

try {

const result = await  axiosInstance.get("/users");

//const result = await axios.get("https://jsonplaceholder.typicode.com/users")

console.log(result.date)

result.data.forEach((user, index)=>{

   console.log(index+"=" +user.id + "|" + user.name + "|" + user.email);

});

}catch(err){

  console.log(err);

}

}

const axiosSelectById = async()=>{

try{

 const result = await axios({

    method:"GET",

    url : "https://jsonplaceholder.typicode.com/users/5"

    //data:

  })

console.log(result.data)

}catch(err){

  console.log(err)

}

}

  return(

    <>

<h1>Axios test</h1>

<button onClick={axiosSelectAll}>get - selectAll</button>

<button onClick={axiosSelectById}>get = selectById</button>

    <h3>json -server 연동하기 </h3>

    </>

  )

}

export default App

보통 axios에서는 저렇게 instance.js를 따로 빼두고 위에 jsx처럼 사용하기 때문에 꼭 알아둬야 한다. 

1. .env.local에 가지고 올 환경변수 지정하기 
2.  axiosInstance.js를 만들어서 serverURl를 지정해준다.
3. App.js에서 Instance에 가지고 올 수 있게 변수를 새로 생성해준다.