[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 요청을 간단하고 효율적으로 수행할 수 있습니다.