React에서 Axios 사용법

 

React 애플리케이션에서 HTTP 요청을 보내기 위해 Axios를 사용하면 간단하고 강력한 기능을 활용할 수 있습니다.

이 글에서는 Axios의 설치부터 사용법, 추가 팁까지 상세히 정리하겠습니다.

---

1. Axios란?

Axios는 브라우저와 Node.js에서 사용할 수 있는 HTTP 클라이언트 라이브러리입니다. 주요 특징은 다음과 같습니다:

• Promise 기반으로 비동기 처리를 간단히 구현 가능
• JSON 데이터 자동 변환
• 요청 및 응답 인터셉터 제공
• 간단한 취소 요청 및 타임아웃 설정
• 브라우저 및 Node.js 환경 모두 지원

---

2. Axios 설치

Axios는 NPM이나 Yarn으로 설치할 수 있습니다.

# NPM
npm install axios

# Yarn
yarn add axios

---

3. 기본 사용법

3.1. GET 요청

GET 요청은 서버에서 데이터를 가져오는 데 사용됩니다.

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;

 

3.2. POST 요청

POST 요청은 서버에 데이터를 전송할 때 사용됩니다.

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. Axios와 async/await

async/await 문법을 사용하면 Axios의 비동기 처리를 더욱 간단히 구현할 수 있습니다.

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;

 

---

5. Axios 설정

Axios의 기본 설정을 통해 중복 코드를 줄이고 일관된 HTTP 요청을 관리할 수 있습니다.

5.1. Axios 인스턴스 생성

import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
  timeout: 1000,
  headers: { 'Authorization': 'Bearer YOUR_TOKEN_HERE' }
});

export default apiClient;

5.2. 인스턴스 사용

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;

---

6. 추가 팁

6.1. 요청 및 응답 인터셉터

Axios 인터셉터를 사용하면 요청 및 응답을 가로채 필요한 작업을 추가로 수행할 수 있습니다.

// 요청 인터셉터
axios.interceptors.request.use(config => {
  console.log('Request sent:', config);
  return config;
}, error => {
  return Promise.reject(error);
});

// 응답 인터셉터
axios.interceptors.response.use(response => {
  console.log('Response received:', response);
  return response;
}, error => {
  return Promise.reject(error);
});

6.2. 요청 취소

Axios의 취소 토큰을 사용하여 요청을 취소할 수 있습니다.

import axios from 'axios';

const source = axios.CancelToken.source();

axios.get('https://jsonplaceholder.typicode.com/posts', {
  cancelToken: source.token
}).then(response => {
  console.log('Response:', response);
}).catch(thrown => {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled:', thrown.message);
  } else {
    console.error('Error:', thrown);
  }
});

// 요청 취소
source.cancel('Operation canceled by the user.');

---

7. 결론

React에서 Axios는 간단하면서도 강력한 HTTP 클라이언트로, 다양한 요청을 쉽게 처리할 수 있습니다. 기본 사용법부터 고급 설정까지 잘 이해하고 활용하면 더 효율적인 네트워크 처리를 구현할 수 있습니다. 블로그를 통해 Axios를 익히고 프로젝트에 적용해 보세요!