React에서 Axios로 API 데이터 요청하기

React 애플리케이션에서 외부 API와의 통신을 효과적으로 처리하는 방법에 대해 알아보겠습니다. 특히 Axios를 활용한 API 요청에 중점을 두어, Axios의 인터셉터를 통해 요청과 응답을 관리하는 방법을 상세히 설명하겠습니다. 이를 통해 개발자들은 API 호출 시 발생할 수 있는 오류를 줄이고, 효율적인 코드를 작성할 수 있습니다.

Axios란 무엇인가?

Axios는 HTTP 요청을 쉽게 처리할 수 있도록 돕는 JavaScript 라이브러리입니다. 이 라이브러리를 통해 사용자는 GET, POST, PUT, DELETE와 같은 다양한 HTTP 메서드를 손쉽게 사용할 수 있습니다. Promise 기반의 비동기 처리를 지원하기 때문에, API 요청 후에도 애플리케이션의 흐름을 중단하지 않고 처리할 수 있습니다.

React에서 Axios 사용하기

React 애플리케이션에서 Axios를 사용하기 위해서는 먼저 Axios 라이브러리를 설치해야 합니다. 터미널에서 다음 명령어를 실행하여 설치할 수 있습니다.

npm install axios

그 다음, Axios를 사용하여 API 요청을 작성해보겠습니다. 아래의 예시 코드에서는 JSONPlaceholder API에서 데이터를 요청하는 과정을 보여줍니다.

import axios from 'axios';
import { useEffect, useState } from 'react';
const MyComponent = () => {
 const [data, setData] = useState([]);
 useEffect(() => {
  const fetchData = async () => {
   try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
    setData(response.data);
   } catch (error) {
    console.error('API 요청 중 오류 발생:', error);
   }
  };
  fetchData();
 }, []);
 return (
  

   {data.map(item => (
    
{item.title}
   ))}
  
 );
};
export default MyComponent;

위 코드에서는 useEffect 훅을 활용하여 컴포넌트가 마운트될 때 API 요청을 실행합니다. 데이터가 성공적으로 반환되면, 상태를 업데이트하여 화면에 데이터를 표시하게 됩니다.

Axios 인터셉터의 활용

Axios의 인터셉터는 요청이나 응답이 처리되기 전에 특정 작업을 수행할 수 있도록 돕습니다. 예를 들어, 모든 API 요청에 공통적으로 사용하는 헤더 정보를 설정하거나, 오류 처리를 통합하는 데 매우 유용합니다.

요청 인터셉터 설정하기

요청 인터셉터를 설정하면, 모든 요청 전에 특정 설정을 추가할 수 있습니다. 아래는 요청 인터셉터를 사용하는 방법입니다.

axios.interceptors.request.use(config => {
 const token = 'YOUR_TOKEN'; // 여기에 실제 토큰 값을 넣습니다.
 if (token) {
  config.headers['Authorization'] = Bearer ${token};
 }
 config.headers['Content-Type'] = 'application/json';
 return config;
}, error => {
 return Promise.reject(error);
});

위의 코드 스니펫에서는 인터셉터를 통해 Authorization 헤더를 추가하고, 모든 요청에 JSON 형식의 Content-Type을 설정하고 있습니다.

응답 인터셉터 설정하기

응답 인터셉터를 사용하면, 서버에서 반환한 데이터에 대한 처리를 명확하게 관리할 수 있습니다. 예를 들어, 모든 응답 데이터를 통합적으로 가공할 수 있습니다.

axios.interceptors.response.use(response => {
 // 여기서 응답 데이터를 가공합니다.
 return response.data;
}, error => {
 // 오류 처리를 여기에 작성합니다.
 return Promise.reject(error);
});

응답 인터셉터를 사용함으로써, 각 API 호출에 대한 데이터 처리 로직을 간소화할 수 있습니다.

REST API와 Axios의 활용

React 애플리케이션에서 RESTful API와 통신할 때, Axios를 활용하면 매우 간편하게 요청을 처리할 수 있습니다. REST API는 자원(Resource) 중심의 API 구조로, 각 자원은 고유한 URI를 통해 식별됩니다. Axios를 통해 이러한 자원에 대한 CRUD(Create, Read, Update, Delete) 작업을 쉽게 수행할 수 있습니다.

• GET 요청: 자원 조회
• POST 요청: 자원 생성
• PUT 요청: 자원 전체 수정
• PATCH 요청: 자원 일부 수정
• DELETE 요청: 자원 삭제

각 요청은 Axios의 메서드를 사용하여 간단하게 실행할 수 있습니다:

// 데이터 읽기
const fetchPosts = async () => {
 const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
 console.log(response.data);
};
// 데이터 생성하기
const createPost = async () => {
 const response = await axios.post('https://jsonplaceholder.typicode.com/posts', {
  title: '새 게시물',
  body: '새로운 게시물 내용',
  userId: 1
 });
 console.log(response.data);
};

위 예시는 Axios를 통해 REST API와 상호작용하는 기본적인 방법을 보여줍니다.

결론

React에서 Axios는 API 요청을 간편하게 처리할 수 있는 강력한 도구입니다. 인터셉터를 활용하여 공통 설정을 손쉽게 관리할 수 있으며, REST API와의 통신을 통해 다양한 기능을 구현할 수 있습니다. 이러한 방법들을 통해 개발자는 코드의 재사용성을 높이고, 오류를 줄이면서 효율적인 애플리케이션을 개발할 수 있습니다.

이 글이 React 애플리케이션에서 Axios를 사용하는 데 도움이 되기를 바랍니다. 다양한 API와의 통신을 통해 더욱 풍부한 사용자 경험을 제공해보세요!

자주 물으시는 질문