[Dseok의 코딩스터디] Axios POST 요청 완벽 가이드 – 기본부터 고급까지

React에서 백엔드 서버와 데이터를 주고받을 때 가장 많이 사용하는 HTTP 클라이언트가 바로 Axios입니다.
특히, 데이터를 서버로 보내는 POST 요청은 회원가입, 로그인, 데이터 저장 등 다양한 상황에서 필수적으로 사용됩니다.

오늘은 Axios의 POST 요청을 기본 개념부터 고급 기능까지 완벽하게 마스터할 수 있도록 10가지 이상의 실전 예제를 소개하겠습니다.
각 예제마다 어떤 개념이 중요한지도 자세히 설명하겠습니다.
바로 시작해볼까요? 🚀

 

📌 1. Axios POST 요청의 기본 개념

▶️ POST 요청이란?

• POST 요청은 서버에 새로운 데이터를 생성하거나 전송할 때 사용됩니다.
• 예를 들어, 회원가입, 로그인, 댓글 작성, 데이터 추가 등이 이에 해당합니다.
• 요청 데이터를 **Body(본문)**에 포함시켜 전송하며, 서버는 이를 처리하여 응답을 반환합니다.

 

▶️ Axios의 기본 구조

axios.post(url, data, config);

• url → 데이터를 보낼 서버의 주소
• data → 서버로 전송할 데이터 (객체 형태)
• config → 요청에 대한 추가 설정 (예: headers, timeout 등)

 

📌 2. 가장 기본적인 Axios POST 요청

import axios from 'axios';

const postData = {
  name: 'John Doe',
  email: 'john@example.com',
  age: 30
};

axios.post('https://api.example.com/users', postData)
  .then(response => console.log('응답 데이터:', response.data))
  .catch(error => console.error('에러 발생:', error));

✅ 설명

✔️ postData 객체를 JSON 형식으로 서버에 전송
✔️ then() → 서버가 응답을 성공적으로 보내면 실행
✔️ catch() → 요청 중 에러가 발생하면 실행

 

📌 3. Axios POST 요청에 커스텀 헤더 추가하기

보안이나 인증이 필요한 경우, 헤더(Header) 값을 추가해야 합니다.

axios.post(
  'https://api.example.com/users',
  { name: 'Jane Doe', email: 'jane@example.com' },
  {
    headers: {
      Authorization: 'Bearer my-token',
      'Content-Type': 'application/json'
    }
  }
)
  .then(response => console.log('응답:', response.data))
  .catch(error => console.error('에러 발생:', error));

✅ 설명

✔️ Authorization 헤더를 추가하여 API 요청 시 인증 토큰 포함
✔️ Content-Type: application/json → JSON 형식의 데이터 전송

 

📌 4. Axios POST 요청을 async/await로 구현

async/await을 사용하면 비동기 코드의 가독성이 좋아지고, 가독성이 높아집니다.

const sendData = async () => {
  try {
    const response = await axios.post('https://api.example.com/data', {
      username: 'testuser',
      password: 'securepassword'
    });
    console.log('서버 응답:', response.data);
  } catch (error) {
    console.error('에러 발생:', error);
  }
};

sendData();

✅ 설명

✔️ async/await을 사용해 코드를 동기적으로 작성하여 가독성을 높임
✔️ try-catch 블록을 사용해 예외 처리를 간결하게 구현

 

📌 5. FormData를 활용한 파일 업로드 (이미지 포함)

파일을 업로드할 때는 FormData 객체를 사용해야 합니다.

const uploadFile = async (file) => {
  const formData = new FormData();
  formData.append('file', file);

  try {
    const response = await axios.post('https://api.example.com/upload', formData, {
      headers: { 'Content-Type': 'multipart/form-data' }
    });
    console.log('파일 업로드 성공:', response.data);
  } catch (error) {
    console.error('업로드 실패:', error);
  }
};

✅ 설명

✔️ FormData를 활용하여 파일 데이터를 서버에 전송
✔️ Content-Type: multipart/form-data 설정 필수

 

📌 6. POST 요청을 위한 Axios 인스턴스 설정 (재사용 가능)

반복되는 API 호출을 줄이기 위해 Axios 인스턴스를 생성합니다.

import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'https://api.example.com',
  headers: { 'Content-Type': 'application/json' }
});

apiClient.post('/users', { name: 'Alice', email: 'alice@example.com' })
  .then(response => console.log('응답:', response.data))
  .catch(error => console.error('에러 발생:', error));

✅ 설명

✔️ axios.create()를 사용해 기본 설정을 한 번만 적용
✔️ 여러 API 요청에서 반복되는 URL과 헤더 설정을 줄일 수 있음

 

📌 7. Axios 요청 취소 기능 (Cancel Token)

불필요한 요청을 취소할 수 있습니다.

import axios from 'axios';

const source = axios.CancelToken.source();

axios.post('https://api.example.com/data', { name: 'test' }, { cancelToken: source.token })
  .then(response => console.log('응답:', response.data))
  .catch(thrown => {
    if (axios.isCancel(thrown)) {
      console.log('요청이 취소되었습니다:', thrown.message);
    } else {
      console.error('에러 발생:', thrown);
    }
  });

// 특정 상황에서 요청 취소
source.cancel('사용자가 요청을 취소했습니다.');

✅ 설명

✔️ CancelToken을 사용하여 API 요청을 취소할 수 있음
✔️ 불필요한 네트워크 요청을 줄이고 성능 최적화 가능

 

📌 8. 다중 POST 요청을 한 번에 처리 (Concurrent Requests)

const request1 = axios.post('https://api.example.com/users', { name: 'John' });
const request2 = axios.post('https://api.example.com/orders', { order: 'Laptop' });

axios.all([request1, request2])
  .then(axios.spread((res1, res2) => {
    console.log('응답1:', res1.data);
    console.log('응답2:', res2.data);
  }))
  .catch(error => console.error('에러 발생:', error));

✅ 설명

✔️ 여러 개의 API를 동시에 호출하여 속도를 향상
✔️ axios.spread()를 사용해 응답을 개별 변수로 처리

 

🎯 마무리 - Axios POST 요청 마스터하기!

이제 Axios의 POST 요청을 완벽하게 이해하고 실전에서 활용할 준비가 되었습니다! 🚀

✅ 오늘 배운 것 정리
✔️ 기본적인 POST 요청
✔️ 요청 헤더 추가
✔️ async/await을 활용한 가독성 높은 코드
✔️ 파일 업로드 & 요청 취소 기능
✔️ 다중 요청 처리 & 인터셉터 활용

이제 Axios의 강력한 기능을 활용하여 더욱 효율적인 API 통신을 만들어 보세요! 🎉