[240528 TIL] Axios

오늘은 리액트에서 HTTP 요청을 보내는 방법 중 Axios 에 대해 알아보려고 합니다.

Axios는 비동기적으로 데이터를 가져오거나 서버에 데이터를 보내는 데 유용한 HTTP 클라이언트 라이브러리입니다.
아래에 Axios를 리액트 프로젝트에 통합하여 사용하는 방법을 단계별로 정리합니다.

1. Axios 설치

먼저, Axios를 프로젝트에 설치합니다. 터미널에서 다음 명령어를 실행합니다.

npm install axios

또는 Yarn을 사용하는 경우:

yarn add axios

2. Axios 설정

필요한 경우, Axios 인스턴스를 설정하여 기본 URL이나 공통 헤더 등을 설정할 수 있습니다. 하지만 간단한 사용을 위해 기본 설정을 사용해 보겠습니다.

3. 간단한 GET 요청 예시

리액트 컴포넌트에서 Axios를 사용하여 데이터를 가져오는 예제 입니다. 여기서는 간단히 Jsonplaceholder 를 사용합니다.

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

const DataFetching = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 데이터 가져오기
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then((response) => {
        setData(response.data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error);
        setLoading(false);
      });
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {data.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default DataFetching;

4. POST 요청 예시

서버에 데이터를 보내는 POST 요청의 예제입니다.

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

const CreatePost = () => {
  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');
  const [response, setResponse] = useState(null);

  const handleSubmit = (e) => {
    e.preventDefault();

    const postData = {
      title: title,
      body: body,
    };

    axios.post('https://jsonplaceholder.typicode.com/posts', postData)
      .then((response) => {
        setResponse(response.data);
      })
      .catch((error) => {
        console.error('There was an error creating the post!', error);
      });
  };

  return (
    <div>
      <h1>Create Post</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label>Title:</label>
          <input
            type="text"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
          />
        </div>
        <div>
          <label>Body:</label>
          <textarea
            value={body}
            onChange={(e) => setBody(e.target.value)}
          ></textarea>
        </div>
        <button type="submit">Create</button>
      </form>
      {response && (
        <div>
          <h2>Response:</h2>
          <pre>{JSON.stringify(response, null, 2)}</pre>
        </div>
      )}
    </div>
  );
};

export default CreatePost;

5. Axios 인스턴스 사용

반복적으로 사용되는 설정을 위한 Axios 인스턴스를 생성하여 사용할 수 있습니다.

import axios from 'axios';

// 기본 URL 및 기타 설정을 포함한 인스턴스 생성
const axiosInstance = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
  timeout: 1000,
  headers: { 'X-Custom-Header': 'foobar' }
});

export default axiosInstance;

그 후, 컴포넌트에서 인스턴스를 사용하여 요청을 보낼 수 있습니다.

import React, { useState, useEffect } from 'react';
import axiosInstance from './axiosInstance';

const DataFetching = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    axiosInstance.get('/posts')
      .then((response) => {
        setData(response.data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error);
        setLoading(false);
      });
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {data.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default DataFetching;

요약

1. Axios 설치: npm install axios 또는 yarn add axios
2. GET 요청: axios.get(url)을 사용하여 데이터 가져오기
3. POST 요청: axios.post(url, data)을 사용하여 데이터 전송
4. Axios 인스턴스: 반복적인 설정을 위한 Axios 인스턴스 생성 및 사용

이렇게 하면 리액트 프로젝트에서 Axios를 사용하여 간편하게 HTTP 요청을 보낼 수 있습니다. 필요에 따라 더 복잡한 설정이나 요청 처리 로직을 추가할 수 있습니다.