[React] 리액트에서 Axios를 사용하는 방법과 동작 방식
반응형
React에서 Axios를 사용하는 방법과 동작 방식에 대해 설명드릴게요. Axios는 브라우저와 Node.js에서 사용할 수 있는 HTTP 클라이언트 라이브러리로, 비동기 처리를 간단하게 구현할 수 있습니다. 다음은 Axios를 사용하는 방법과 동작 방식에 대한 설명입니다.
1. Axios 설치
먼저 Axios를 설치해야 합니다. NPM이나 Yarn을 사용하여 설치할 수 있습니다:
bash
npm install axios
# 또는
yarn add axios
2. 기본 사용법
Axios를 사용하여 GET 요청을 보내는 예제를 보겠습니다:
javascript
import React, { useEffect, useState } from 'react';
import axios from 'axios';
function App() {
const [data, setData] = useState(null);
useEffect(() => {
axios.get('https://jsonplaceholder.typicode.com/posts')
.then(response => {
setData(response.data);
})
.catch(error => {
console.error('Error fetching data:', error);
});
}, []);
return (
<div>
<h1>Data</h1>
{data ? (
<ul>
{data.map(item => (
<li key={item.id}>{item.title}</li>
))}
</ul>
) : (
<p>Loading...</p>
)}
</div>
);
}
export default App;
이 예제에서는 Axios를 사용하여 서버에서 데이터를 가져오고, 그 데이터를 상태에 저장하여 화면에 표시합니다.
3. POST 요청
POST 요청을 보내는 방법도 비슷합니다:
javascript
function submitData() {
const payload = {
title: 'New Post',
body: 'This is a new post.',
userId: 1
};
axios.post('https://jsonplaceholder.typicode.com/posts', payload)
.then(response => {
console.log('Data submitted:', response.data);
})
.catch(error => {
console.error('Error submitting data:', error);
});
}
이 예제에서는 서버에 데이터를 전송하고, 응답을 로그에 출력합니다.
4. async/await 사용법
비동기 처리를 더 간단하게 하기 위해 async/await 문법을 사용할 수 있습니다:
javascript
import React, { useEffect, useState } from 'react';
import axios from 'axios';
function App() {
const [data, setData] = useState(null);
useEffect(() => {
const fetchData = async () => {
try {
const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
setData(response.data);
} catch (error) {
console.error('Error fetching data:', error);
}
};
fetchData();
}, []);
return (
<div>
<h1>Async/Await Example</h1>
{data ? (
<ul>
{data.map(item => (
<li key={item.id}>{item.title}</li>
))}
</ul>
) : (
<p>Loading...</p>
)}
</div>
);
}
export default App;
이 예제에서는 async/await를 사용하여 비동기 처리를 구현합니다.
5. Axios 인스턴스 생성
Axios의 기본 설정을 통해 중복 코드를 줄이고 일관된 HTTP 요청을 관리할 수 있습니다:
javascript
import axios from 'axios';
const apiClient = axios.create({
baseURL: 'https://jsonplaceholder.typicode.com',
timeout: 1000,
headers: {
'Authorization': 'Bearer YOUR_TOKEN_HERE'
}
});
export default apiClient;
이 인스턴스를 사용하여 요청을 보낼 수 있습니다:
javascript
import React, { useEffect, useState } from 'react';
import apiClient from './apiClient';
function App() {
const [data, setData] = useState(null);
useEffect(() => {
apiClient.get('/posts')
.then(response => {
setData(response.data);
})
.catch(error => {
console.error('Error fetching data:', error);
});
}, []);
return (
<div>
<h1>Custom Axios Instance</h1>
{data ? (
<ul>
{data.map(item => (
<li key={item.id}>{item.title}</li>
))}
</ul>
) : (
<p>Loading...</p>
)}
</div>
);
}
export default App;
Axios를 사용하면 React 애플리케이션에서 HTTP 요청을 간단하고 효율적으로 수행할 수 있습니다.
반응형
'낙서장[1] > 1. React' 카테고리의 다른 글
| [React] JSX 사용법 (1) | 2025.02.07 |
|---|---|
| [React] 컴포넌트 간에 데이터를 전달할 때 사용되는 Props (0) | 2025.02.06 |
| [React] app.jsx, main.jsx, package.json, api.js 파일설명 (0) | 2025.02.06 |
| [React] 리액트 JSX (0) | 2025.02.06 |
| [React] Axios Interceptor (0) | 2025.02.05 |