실무에서 자주 쓰는 HTTP 클라이언트, Axios 완벽 이해하기

실무에서 자주 쓰는 HTTP 클라이언트, Axios 완벽 이해하기

프론트엔드와 백엔드 개발을 하다 보면, 서버와 데이터를 주고받는 일이 정말 많습니다.
특히 Node.js 환경이나 React 같은 프론트엔드 프레임워크에서는 REST API와의 통신이 필수죠.
이때 가장 많이 쓰는 도구가 바로 Axios입니다.

이번 글에서는 실전 예시와 함께, Axios를 어떻게 활용하는지
그리고 각 요청 방식의 정확한 개념과 코드를 쉽게, 하지만 전문 용어는 놓치지 않고 설명해 드릴게요.

---

Axios란 무엇인가?

Axios는 Promise 기반의 HTTP 클라이언트 라이브러리입니다.
즉, 서버와 데이터를 주고받을 때(REST API 호출 등) 복잡한 코드를
짧고 간결하게 만들어주는 도구입니다.

• Promise 기반이기 때문에 async/await, then/catch로 비동기 처리가 쉽습니다.
• GET, POST, PATCH, DELETE 등 다양한 HTTP 요청을 간단하게 보낼 수 있습니다.
• JSON 데이터 자동 변환, 요청/응답 인터셉터, 요청 취소, 헤더 설정 등 다양한 기능을 제공합니다.

---

실전 예시로 배우는 Axios

아래 예시는 실제로 많이 쓰이는 할 일(Todo) 앱 코드에서
axios가 어떻게 활용되는지 보여줍니다.

1. 할 일 목록 불러오기 (GET 요청)

const res = await axios.get(`${API_URL}?user=${encodeURIComponent(name)}`);
setTodos(res.data);

• axios.get(url) : 서버에서 데이터를 조회할 때 사용합니다.
• 이 코드는 특정 사용자의 할 일만 받아오기 위해 쿼리스트링을 활용합니다.
• 받아온 데이터는 res.data에 들어 있고, 이를 상태로 저장합니다.

2. 할 일 추가하기 (POST 요청)

const res = await axios.post(API_URL, newTodo);
setTodos([...todos, res.data]);

• axios.post(url, data) : 서버에 새 데이터를 보낼 때 사용합니다.
• 새 할 일(newTodo)을 서버에 저장하고, 서버가 응답한 데이터를 기존 목록에 추가합니다.

3. 할 일 상태 변경 (PATCH 요청)

const res = await axios.patch(`${API_URL}/${id}`, { completed: !todo.completed });
setTodos(todos.map((t) => (t.id === id ? { ...t, completed: res.data.completed } : t)));

• axios.patch(url, data) : 데이터의 일부만 수정할 때 사용합니다.
• 할 일의 완료 상태(completed)를 바꾸고, 응답 결과로 상태를 업데이트합니다.

4. 할 일 삭제 (DELETE 요청)

await axios.delete(`${API_URL}/${id}`);
setTodos(todos.filter((t) => t.id !== id));

• axios.delete(url) : 데이터를 삭제할 때 사용합니다.
• 서버에서 삭제가 완료되면, 프론트엔드에서도 해당 항목을 목록에서 제거합니다.

---

표로 정리하는 Axios의 주요 메서드

기능	axios 메서드	예시 코드	설명
할 일 불러오기	axios.get	axios.get(${API_URL}?user=${name})	서버에서 데이터 조회
할 일 추가하기	axios.post	axios.post(API_URL, newTodo)	새 데이터 서버에 저장
할 일 상태 변경	axios.patch	axios.patch(${API_URL}/${id}, { completed: ... })	일부 데이터만 수정
할 일 삭제하기	axios.delete	axios.delete(${API_URL}/${id})	데이터 삭제

---

실무에서 왜 Axios를 쓰는가?

• 코드가 간결하고 직관적입니다.
  복잡한 XMLHttpRequest 코드를 쓸 필요 없이, 한 줄로 원하는 요청을 보낼 수 있습니다.
• Promise 기반이라 async/await와 완벽하게 어울립니다.
• 에러 처리가 쉽고, 요청/응답을 가로채는 인터셉터 등 고급 기능도 지원합니다.
• 프론트엔드와 백엔드 모두에서 동일한 코드로 사용할 수 있습니다.