React의 Axios

Axios는 React 애플리케이션에서 API 호출을 쉽게 수행하기 위해 널리 사용되는 JavaScript 라이브러리입니다. HTTP 요청을 보내고 응답을 처리하기 위한 도구로, RESTful API와의 통신이나 백엔드 서버와의 데이터를 주고받는 데 자주 사용됩니다. Axios는 다음과 같은 장점을 가지고 있습니다:

1. Promise 기반: Axios는 Promise API를 기반으로 하여 비동기 요청을 간단하게 다룰 수 있습니다.

2. 간결한 코드: fetch와 비교하여 구문이 간결하고 이해하기 쉬우며, 더 많은 기능을 제공합니다.

3. 요청 및 응답 데이터 자동 변환: JSON을 자동으로 변환하여 응답을 더 쉽게 사용할 수 있습니다.

4. 인터셉터 지원: 요청이나 응답을 가로채어 특정 작업을 수행할 수 있습니다.

5. 에러 핸들링: 요청 실패 시 쉽게 에러를 처리할 수 있습니다.

 

Axios 설치

 

Axios를 사용하려면, 프로젝트에 Axios를 설치해야 합니다. 아래 명령어로 설치할 수 있습니다:

npm install axios

 

기본 사용법

 

1. GET 요청

 

데이터를 가져오기 위해 axios.get() 메서드를 사용할 수 있습니다. 예를 들어, 사용자의 정보를 가져오는 요청은 다음과 같이 작성할 수 있습니다:

import axios from 'axios';

function fetchUserData() {
  axios.get('https://jsonplaceholder.typicode.com/users/1')
    .then(response => {
      console.log(response.data);
    })
    .catch(error => {
      console.error('Error fetching data:', error);
    });
}

 

2. POST 요청

 

데이터를 서버로 전송할 때는 axios.post() 메서드를 사용할 수 있습니다. 주로 데이터를 새로 생성하거나 등록하는 데 사용됩니다.

function createUser(data) {
  axios.post('https://jsonplaceholder.typicode.com/users', data)
    .then(response => {
      console.log('User created:', response.data);
    })
    .catch(error => {
      console.error('Error creating user:', error);
    });
}

// 예시 호출
createUser({
  name: 'John Doe',
  email: 'john.doe@example.com'
});

 

3. PUT 및 DELETE 요청

 

• PUT 요청: 데이터 업데이트

• DELETE 요청: 데이터 삭제

// PUT 요청
function updateUser(userId, updatedData) {
  axios.put(`https://jsonplaceholder.typicode.com/users/${userId}`, updatedData)
    .then(response => {
      console.log('User updated:', response.data);
    })
    .catch(error => {
      console.error('Error updating user:', error);
    });
}

// DELETE 요청
function deleteUser(userId) {
  axios.delete(`https://jsonplaceholder.typicode.com/users/${userId}`)
    .then(() => {
      console.log('User deleted');
    })
    .catch(error => {
      console.error('Error deleting user:', error);
    });
}

 

Axios와 React에서의 활용 예시

 

React에서는 일반적으로 useEffect와 함께 Axios를 사용하여 컴포넌트가 마운트될 때 데이터를 불러옵니다.

import React, { useEffect, useState } from 'react';
import axios from 'axios';

function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/users')
      .then(response => {
        setUsers(response.data);
        setLoading(false);
      })
      .catch(error => {
        console.error('Error fetching users:', error);
        setLoading(false);
      });
  }, []);

  if (loading) return <p>Loading...</p>;

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

 

Axios의 고급 기능

 

1. 요청과 응답에 인터셉터 적용

 

인터셉터를 사용하여 모든 요청과 응답에 대해 전처리와 후처리를 할 수 있습니다. 예를 들어, 인증 토큰을 헤더에 자동으로 추가하는 경우입니다.

axios.interceptors.request.use(
  config => {
    config.headers.Authorization = `Bearer YOUR_ACCESS_TOKEN`;
    return config;
  },
  error => Promise.reject(error)
);

 

2. 기본 URL 설정

 

기본 URL을 설정해 두면, 각 요청 시 URL을 반복하지 않아도 됩니다.

const api = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com'
});

// 기본 URL 사용
api.get('/users').then(response => console.log(response.data));

 

3. async와 await을 사용한 비동기 처리

 

React에서 async와 await을 사용하면 더 간단하고 읽기 쉬운 코드를 작성할 수 있습니다.

async function fetchData() {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/users');
    console.log(response.data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

 

Axios와 React의 비동기 요청 요약

 

React에서 Axios는 API와의 비동기 통신을 간편하게 처리할 수 있도록 도와줍니다. 또한, Promise를 기반으로 하여 직관적인 에러 처리와 async/await과의 조합을 통해 가독성 높은 비동기 코드를 작성할 수 있습니다. Axios의 고급 기능을 통해 애플리케이션의 효율성을 높이고, 더 나은 사용자 경험을 제공할 수 있습니다.