[Dseok의 코딩스터디] React에서 Axios 한방에 끝내기 | 실전 예제와 고급 활용법
오늘은 React에서 널리 사용되는 HTTP 클라이언트 라이브러리인 Axios에 대해 깊이 있게 알아보겠습니다.
이 글을 통해 Axios의 기본 사용법부터 다양한 실전 예제, 그리고 네트워크와의 연관성까지 전문가 수준으로 이해하실 수 있도록 도와드리겠습니다. 🚀
📌 목차
- Axios란 무엇인가?
- Axios의 주요 특징
- Axios 설치 및 기본 사용법
- 다양한 HTTP 요청 메서드 사용 예제
- 실전에서 많이 사용되는 Axios 활용 예제
- Axios와 네트워크의 관계
- 마무리
Axios란 무엇인가?
Axios는 브라우저와 Node.js 환경에서 모두 사용할 수 있는 Promise 기반의 HTTP 클라이언트 라이브러리입니다. 이를 통해 개발자는 간단하고 효율적으로 서버와의 비동기 통신을 구현할 수 있습니다.
Axios의 주요 특징
- 간단한 API: HTTP 요청을 보내고 응답을 처리하는 것이 매우 직관적입니다.
- 자동 JSON 데이터 변환: 서버로부터 받은 응답을 자동으로 JSON으로 변환해줍니다.
- 요청 및 응답 인터셉터: 요청이나 응답을 가로채서 중간에 로직을 추가하거나 헤더를 수정할 수 있습니다.
- 에러 처리 기능 제공: 다양한 에러 처리 기능을 제공하여 안정적인 네트워크 통신을 보장합니다.
- 요청 취소 기능: 취소 토큰을 사용하여 불필요한 네트워크 요청을 방지할 수 있습니다.
Axios 설치 및 기본 사용법
설치 방법
Axios는 다양한 방법으로 설치할 수 있습니다.
- npm을 통한 설치:
npm install axios- yarn을 통한 설치:
yarn add axios- CDN을 통한 설치:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
기본 사용법
Axios를 사용하여 HTTP 요청을 보내는 기본적인 방법은 다음과 같습니다:
import axios from 'axios';
// GET 요청
axios.get('https://api.example.com/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('에러 발생:', error);
});
// POST 요청
axios.post('https://api.example.com/data', {
key1: 'value1',
key2: 'value2'
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('에러 발생:', error);
});다양한 HTTP 요청 메서드 사용 예제
Axios는 다양한 HTTP 메서드를 지원하며, 각 메서드에 대한 사용 예제는 다음과 같습니다
1. GET 요청
데이터를 조회할 때 사용합니다.
axios.get('https://api.example.com/items')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('에러 발생:', error);
});2. POST 요청
데이터를 생성하거나 전송할 때 사용합니다.
axios.post('https://api.example.com/items', {
name: 'NewItem',
description: 'This is a new item.'
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('에러 발생:', error);
});3. PUT 요청
데이터를 전체 수정할 때 사용합니다.
axios.put('https://api.example.com/items/1', {
name: 'UpdatedItem',
description: 'This item has been updated.'
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('에러 발생:', error);
});4. PATCH 요청
데이터를 부분 수정할 때 사용합니다.
axios.patch('https://api.example.com/items/1', {
description: 'This item description has been updated.'
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('에러 발생:', error);
});5. DELETE 요청
데이터를 삭제할 때 사용합니다.
axios.delete('https://api.example.com/items/1')
.then(response => {
console.log('삭제 성공:', response.data);
})
.catch(error => {
console.error('에러 발생:', error);
});실전에서 많이 사용되는 Axios 활용 예제
다양한 환경에서 Axios를 활용하는 예제를 살펴보겠습니다.
1. React 컴포넌트에서 데이터 가져오기
React 컴포넌트가 마운트될 때 데이터를 가져오는 예제입니다.
import React, { useState, useEffect } from 'react';
import axios from 'axios';
function DataFetchingComponent() {
const [data, setData] = useState([]); // 데이터를 저장하는 상태
const [loading, setLoading] = useState(true); // 로딩 상태 관리
const [error, setError] = useState(null); // 에러 상태 관리
useEffect(() => {
const fetchData = async () => {
try {
const response = await axios.get('https://api.example.com/data');
setData(response.data); // 데이터 상태 업데이트
} catch (error) {
setError(error); // 에러 상태 업데이트
} finally {
setLoading(false); // 로딩 상태 해제
}
};
fetchData();
}, []);
if (loading) return <p>⏳ 데이터 로딩 중...</p>;
if (error) return <p>❌ 에러 발생: {error.message}</p>;
return (
<div>
<h2>📌 가져온 데이터 목록</h2>
<ul>
{data.length > 0 ? (
data.map((item) => <li key={item.id}>{item.name}</li>)
) : (
<p>📭 데이터가 없습니다.</p>
)}
</ul>
</div>
);
}
export default DataFetchingComponent;2. Axios 인스턴스 설정 (기본 URL & 헤더 설정)
Axios 인스턴스를 만들어 반복되는 설정을 줄이고, 코드의 재사용성을 높이는 방법입니다.
import axios from 'axios';
// Axios 인스턴스 생성
const apiClient = axios.create({
baseURL: 'https://api.example.com', // 기본 URL 설정
headers: {
'Content-Type': 'application/json', // 기본 요청 헤더 설정
Authorization: 'Bearer my-token' // 토큰 추가 (인증 필요 시)
},
timeout: 5000, // 요청 타임아웃 (5초)
});
// 사용 예제: GET 요청
apiClient.get('/users')
.then(response => console.log(response.data))
.catch(error => console.error('에러 발생:', error));✅ 이점
✔️ API 호출 시 반복되는 URL과 헤더 설정을 줄일 수 있음
✔️ baseURL을 설정하여 요청 URL을 줄일 수 있음
✔️ 인증 토큰이나 기본 설정을 쉽게 관리할 수 있음
3. Axios 요청 인터셉터 & 응답 인터셉터 활용
Axios의 인터셉터(interceptor)를 사용하면, 요청을 보내기 전에 헤더를 추가하거나, 응답을 받기 전에 데이터를 가공할 수 있습니다.
import axios from 'axios';
// Axios 인스턴스 생성
const apiClient = axios.create({
baseURL: 'https://api.example.com',
headers: { 'Content-Type': 'application/json' }
});
// 요청 인터셉터 추가
apiClient.interceptors.request.use(
config => {
console.log('요청이 전송되었습니다:', config);
return config;
},
error => Promise.reject(error)
);
// 응답 인터셉터 추가
apiClient.interceptors.response.use(
response => {
console.log('응답을 받았습니다:', response);
return response;
},
error => {
console.error('응답 에러:', error);
return Promise.reject(error);
}
);
// 테스트 요청
apiClient.get('/test');✅ 이점
✔️ 모든 요청에 자동으로 특정 로직을 적용 가능 (예: 토큰 추가, 로깅)
✔️ 응답 데이터를 가공하여 불필요한 데이터 제거 가능
✔️ 에러 로깅 및 공통 에러 처리 로직 추가 가능
4. Axios 요청 취소 (Cancel Token)
비동기 요청이 실행 중일 때, 사용자가 빠르게 다른 작업을 수행할 경우 불필요한 네트워크 요청을 취소하는 기능입니다.
import axios from 'axios';
const source = axios.CancelToken.source();
axios.get('https://api.example.com/data', { 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('사용자가 요청을 취소했습니다.');✅ 이점
✔️ 사용자가 화면을 이동하면 불필요한 API 요청을 취소하여 성능을 최적화
✔️ 이전 요청을 취소하고 새로운 요청을 실행할 때 유용 (예: 검색 자동완성)
5. 파일 업로드 및 다운로드
Axios를 사용하면 파일을 업로드 및 다운로드할 수도 있습니다.
📌 파일 업로드
import axios from 'axios';
const uploadFile = (file) => {
const formData = new FormData();
formData.append('file', file);
axios.post('https://api.example.com/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
.then(response => console.log('업로드 성공:', response.data))
.catch(error => console.error('업로드 실패:', error));
};📌 파일 다운로드
axios({
url: 'https://api.example.com/download/file.pdf',
method: 'GET',
responseType: 'blob' // 바이너리 데이터를 다운로드하기 위해 필요
}).then(response => {
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'file.pdf');
document.body.appendChild(link);
link.click();
});✅ 이점
✔️ 파일을 쉽게 업로드하고 다운로드 가능
✔️ FormData 객체를 사용하여 파일을 서버로 전송
고급 Axios 활용 예제
이전 글에서 다루지 않았던 실전에서 자주 사용되는 Axios 활용 예제를 추가로 소개해 드리겠습니다.
1. 동시 요청 처리 (Concurrent Requests)
여러 개의 API 요청을 동시에 보내고, 모든 요청이 완료된 후에 처리하는 방법입니다.
import axios from 'axios';
const request1 = axios.get('https://api.example.com/data1');
const request2 = axios.get('https://api.example.com/data2');
axios.all([request1, request2])
.then(axios.spread((response1, response2) => {
console.log('데이터 1:', response1.data);
console.log('데이터 2:', response2.data);
}))
.catch(error => {
console.error('에러 발생:', error);
});이점:
- 여러 API를 병렬로 호출하여 응답 시간을 단축할 수 있습니다.
- 모든 요청이 완료된 후에 데이터를 처리할 수 있어 코드의 가독성이 향상됩니다.
2. 요청 시 데이터 직렬화 (Serialization)
Axios는 기본적으로 params 객체를 URL 쿼리 문자열로 자동 변환하지만, 커스텀 직렬화가 필요한 경우 paramsSerializer를 활용할 수 있습니다.
import axios from 'axios';
import qs from 'qs';
axios.get('https://api.example.com/data', {
params: {
filter: 'recent',
limit: 10
},
paramsSerializer: params => {
return qs.stringify(params, { arrayFormat: 'brackets' });
}
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('에러 발생:', error);
});이점:
- 복잡한 쿼리 파라미터를 유연하게 관리할 수 있습니다.
- 서버에서 요구하는 특정 형식에 맞춰 쿼리 문자열을 커스터마이징할 수 있습니다.
3. 프로그램에서 Axios 모듈화 및 재사용성 향상
Axios 인스턴스를 생성하여 모듈화하고, 다양한 API 호출에 재사용할 수 있습니다.
// apiClient.js
import axios from 'axios';
const apiClient = axios.create({
baseURL: 'https://api.example.com',
headers: {
'Content-Type': 'application/json'
}
});
export default apiClient;
// 다른 파일에서 사용
import apiClient from './apiClient';
apiClient.get('/users')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('에러 발생:', error);
});이점:
- 코드의 재사용성과 유지보수성이 향상됩니다.
- API 호출에 대한 중앙 집중식 관리가 가능해집니다.
4. Axios와 Fetch API 비교
fetch API와 비교하여 Axios의 장점을 이해하면, 상황에 맞게 올바른 도구를 선택할 수 있습니다.
// Fetch API 사용 예제
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('네트워크 응답에 문제가 있습니다.');
}
return response.json();
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error('에러 발생:', error);
});
// Axios 사용 예제
import axios from 'axios';
axios.get('https://api.example.com/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('에러 발생:', error);
});Axios의 장점:
- 자동 JSON 변환: Axios는 응답 데이터를 자동으로 JSON으로 변환합니다.
- 인터셉터 지원: 요청 및 응답을 가로채서 처리할 수 있습니다.
- 광범위한 브라우저 지원: 구형 브라우저에서도 호환성이 좋습니다.
Axios와 네트워크의 관계
Axios는 네트워크 요청을 다룰 때 반드시 이해해야 하는 몇 가지 개념이 있습니다.
1️⃣ HTTP 프로토콜
Axios는 HTTP 요청과 응답을 처리하는 라이브러리입니다.
HTTP는 **클라이언트(프론트엔드)**와 **서버(백엔드)**가 데이터를 주고받는 기본적인 통신 프로토콜입니다.
2️⃣ RESTful API
대부분의 Axios 요청은 RESTful API와 연관됩니다.
RESTful API는 GET, POST, PUT, DELETE 등의 HTTP 메서드를 통해 서버와 데이터를 주고받습니다.
3️⃣ CORS (Cross-Origin Resource Sharing)
Axios를 사용할 때 CORS(Cross-Origin Resource Sharing) 오류가 발생할 수 있습니다.
이는 다른 도메인 간 요청이 제한되기 때문이며, 서버에서 Access-Control-Allow-Origin을 설정해야 해결됩니다.
4️⃣ 비동기 통신 (Asynchronous Communication)
Axios는 **비동기 통신(AJAX)**을 수행하는 라이브러리입니다.
이는 서버에서 데이터를 가져오는 동안 UI가 멈추지 않고 사용자가 다른 작업을 계속할 수 있도록 도와줍니다.
즉, 비동기 통신을 통해 React에서 부드러운 사용자 경험(UX)을 제공할 수 있습니다.
🎯 마무리 – Axios 완벽 활용!
이제 여러분은 Axios를 완벽하게 이해하고, 실전에서 활용할 준비가 되었습니다! 🚀
Axios는 HTTP 요청을 간편하게 만들고, API 데이터 호출을 최적화하며, 네트워크 통신을 효율적으로 다룰 수 있도록 도와주는 라이브러리입니다.
👉 이번 글에서 배운 내용 정리
✔️ Axios의 주요 기능과 특징
✔️ HTTP 요청 메서드(GET, POST, PUT, PATCH, DELETE) 활용
✔️ Axios 인스턴스 설정 & 인터셉터 적용
✔️ 요청 취소(Cancel Token) 및 파일 업로드/다운로드
✔️ 네트워크 개념 (HTTP, REST API, CORS, 비동기 통신)과의 연관성
이제 Axios를 활용하여 React 프로젝트에서 더욱 효율적인 API 요청을 만들어보세요! 💡
이 글이 도움이 되셨다면 좋아요 & 댓글 부탁드립니다! 😊
