현대의 웹 애플리케이션은 대부분 외부 서버와 데이터를 주고받는 방식으로 작동합니다. 이를 통해 사용자는 실시간으로 정보를 얻고, 서버는 클라이언트의 요청에 대해 동적으로 데이터를 제공합니다. 이번 글에서는 React를 활용한 API와 서버 간의 통신 방법에 대해 자세히 다루어 보겠습니다. 특히, fetch API와 Axios 라이브러리를 사용하여 실제 서버에서 데이터를 요청하고 처리하는 방법을 소개하겠습니다.
1. API와 서버 통신의 기본 개념
API(Application Programming Interface)는 서로 다른 소프트웨어 애플리케이션 간의 상호작용을 위해 정의된 프로토콜입니다. 대부분의 웹 서비스에서는 REST(Representational State Transfer) 아키텍처를 따라 HTTP 프로토콜을 사용하여 API를 구현합니다. 이러한 API를 통해 클라이언트 애플리케이션은 서버로부터 데이터를 요청하거나 서버에 데이터를 전송할 수 있습니다.
1.1 HTTP 메서드
API와의 통신에서 자주 사용되는 HTTP 메서드는 다음과 같습니다:
- GET: 서버로부터 데이터를 가져올 때 사용합니다.
- POST: 서버에 데이터를 전송할 때 사용합니다.
- PUT: 서버의 기존 데이터를 수정할 때 사용합니다.
- DELETE: 서버의 데이터를 삭제할 때 사용합니다.
2. Fetch API
fetch API는 브라우저에서 제공하는 내장 API로, 네트워크 요청을 수행하는 간편한 방법을 제공합니다. fetch는 기본적으로 Promise를 반환하여, 비동기적으로 서버와 통신할 수 있도록 도와줍니다.
2.1 기본 사용법
다음은 fetch API를 사용하여 데이터 요청을 수행하는 예제입니다.
javascript
const fetchData = async () => {
try {
const response = await fetch('https://api.example.com/data');
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.json();
console.log(data);
} catch (error) {
console.error('Fetch error:', error);
}
};
fetchData();
2.2 GET 요청
다음은 GET 요청을 통해 데이터를 가져오는 예제입니다.
javascript
const fetchData = async () => {
const response = await fetch('https://api.example.com/items');
const items = await response.json();
console.log(items);
};
fetchData();
2.3 POST 요청
서버에 데이터를 전송하려면 POST 요청을 활용할 수 있습니다. 다음은 데이터를 전송하는 예제입니다.
javascript
const postData = async () => {
const response = await fetch('https://api.example.com/items', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ name: 'Item Name', price: 100 }),
});
const result = await response.json();
console.log(result);
};
postData();
3. Axios
Axios는 HTTP 요청을 단순화하고, API 호출을 더 간편하게 만들어주는 Promise 기반의 라이브러리입니다. fetch에 비해 직관적인 API를 제공하며, 설정이 용이하고 요청과 응답을 쉽게 가공할 수 있습니다.
3.1 Axios 설치
먼저, Axios를 프로젝트에 설치합니다.
bash
npm install axios
3.2 기본 사용법
Axios를 사용하여 데이터를 가져오는 기본적인 예시는 다음과 같습니다.
javascript
import axios from 'axios';
const fetchData = async () => {
try {
const response = await axios.get('https://api.example.com/items');
console.log(response.data);
} catch (error) {
console.error('Axios error:', error);
}
};
fetchData();
3.3 POST 요청
Axios를 사용하여 서버에 데이터를 전송하는 방법은 다음과 같습니다.
javascript
const postData = async () => {
try {
const response = await axios.post('https://api.example.com/items', {
name: 'Item Name',
price: 100,
});
console.log(response.data);
} catch (error) {
console.error('Axios error:', error);
}
};
postData();
4. Fetch vs Axios
fetch와 Axios는 모두 서버와 API 통신을 위한 도구입니다. 그렇지만 몇 가지 차이점이 있습니다:
- 기본 API: Fetch는 내장 API이며, Axios는 외부 라이브러리입니다.
- Promise: Fetch는 기본적으로 Promise를 반환하지만, 응답을 처리하는 데 약간의 추가 작업이 필요합니다.
- 응답 처리: Axios는 자동으로 JSON 응답을 변환해주므로 코드가 더 깔끔해집니다.
- Error 처리: Fetch는 HTTP 오류 상태코드에 대한 처리를 하지 않으므로 수동으로 확인해야 합니다. 반면, Axios는 HTTP 오류도 Promise를 reject하여 오류로 간주합니다.
5. 비동기 처리 및 React와의 통합
React 컴포넌트와 API 통신을 통합하기 위해 useEffect 훅을 사용하여 데이터를 가져오고 상태를 관리할 수 있습니다.
javascript
import React, { useEffect, useState } from 'react';
import axios from 'axios';
const App = () => {
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/items');
setData(response.data);
} catch (error) {
setError('Error fetching data.');
} finally {
setLoading(false);
}
};
fetchData();
}, []);
if (loading) return Loading...;
if (error) return {error};
return (
{data.map(item => (
- {item.name}
))}
);
};
export default App;
6. 결론
API와의 통신은 React 애플리케이션에서 매우 중요한 부분입니다. fetch와 Axios를 활용하여 서버와 데이터를 주고받는 방법을 이해함으로써, 더 강력하고 기능이 풍부한 애플리케이션을 구축할 수 있습니다. 각각의 특징과 상황에 맞는 도구를 선택하여 사용할 수 있는 능력을 키워 보세요.