[ReactJS] Axios 이해하기, 사용하기

Axios 이해하기

Axios는 브라우저와 Node.js 환경에서 사용할 수 있는 HTTP 클라이언트 라이브러리이다. 리액트에서 Axios를 사용하면 REST API와 통신하거나 외부 서버로부터 데이터를 가져오고, 데이터를 전송하는 작업을 간단히 처리할 수 있다.

 

특히, AJAX(Asynchronous JavaScript and XML) 요청을 쉽게 만들 수 있도록 도와주며, 그 결과를 다루는 데 편리하다. Axios는 Promise 기반으로 비동기 처리를 지원하고, 요청과 응답에서 JSON 데이터를 자동으로 처리하는 기능을 제공한다. 또한, 다른 비동기 통신 API(예: fetch)보다 사용하기 간편하고, 다양한 기능(인터셉터, 요청 취소, 타임아웃 설정 등)을 제공해 백엔드와의 통신을 효율적으로 관리할 수 있다.

 

Axios의 주요 특징

• Promise 기반으로 then과 catch를 사용하거나, async/await 문법으로 비동기 처리를 쉽게 구현할 수 있다.
• Axios는 요청을 취소할 수 있는 기능을 제공한다.
• 요청 또는 응답을 처리하기 전에 특정 작업을 실행할 수 있다.( Interceptors )
• 자동 JSON 변환해 JSON 데이터를 쉽게 처리할 수 있다.
• 브라우저와 Node.js 모두 지원하여 클라이언트와 서버 양쪽에서 사용이 가능하다.

React에서 Axios 사용하기

먼저 Axios를 리액트 프로젝트에 설치한다. Axios를 설치하려면 npm 또는 yarn을 사용한다.

*npm으로 설치했는데 문제가 생겼을 때에는 yarn으로 재설치를 하면 해결된다.

npm install axios
# 또는
yarn add axios

 

yarn을 쓰려면 설치해야하는데 아래 코드를 터미널에 입력하여 설치한다.

npm install -g yarn

 

 

 

 Axios 구조

const response = await axios.post(url, data, options);

• axios.post : POST 요청을 보냄
• await : 비동기 함수 안에서 응답을 기다림 (응답이 올 때까지 다음 줄 실행 안 함)
• url : 요청을 보낼 주소
• data : 서버로 보낼 데이터 (본문)
• options : 추가 설정 (예: 쿠키 사용, 헤더 등)

 

 

Axios 기본 사용법

리액트 컴포넌트에서 axios를 사용하여 데이터를 가져오거나 전송할 수 있다.

 

GET 요청 예제

리액트에서 axios를 사용할 때는 주로 useEffect와 함께 사용한다. axios는 비동기 HTTP 요청을 보내는 라이브러리인데, 리액트의 useEffect 훅은 컴포넌트가 렌더링된 후에 특정 작업을 실행할 수 있게 해주기 때문에 API 요청 같은 비동기 작업을 처리할 때 유용하다.

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

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then(response => {
        setData(response.data); // 서버에서 받은 데이터를 상태에 저장
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  }, []);

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

export default App;

 

useEffect와 axios를 함께 사용하는 이유

useEffect는 컴포넌트가 렌더링된 후 한 번 또는 특정 값이 바뀔 때마다 실행되기 때문에, 데이터를 불러오는 작업을 처리하는 데 적합하며, axios로 데이터를 받아오는 것은 비동기 작업이기 때문에, 이 작업이 완료되기 전에 렌더링이 끝날 수 있도록 비동기 처리가 필요하다.

 

 

POST 요청 예제

axios로 POST 요청을 보낼 때는 useEffect를 꼭 사용해야 하는 것은 아니다. useEffect는 컴포넌트가 마운트될 때, 특정 상태가 변경될 때 자동으로 실행되어야 하는 작업을 처리할 때 사용한다.

 

하지만 POST 요청은 일반적으로 사용자가 버튼을 클릭하거나, 폼을 제출하는 등 특정 이벤트에 반응하여 발생하기 때문에 useEffect와는 별도로 이벤트 핸들러 안에서 직접 axios.post()를 호출하는 경우가 많다.

import React from 'react';
import axios from 'axios';

function App() {
  const handleSubmit = () => {
    axios.post('https://jsonplaceholder.typicode.com/posts', {
      title: 'New Post',
      body: 'This is the content of the new post.',
      userId: 1
    })
      .then(response => {
        console.log('Post created:', response.data);
      })
      .catch(error => {
        console.error('Error creating post:', error);
      });
  };

  return (
    <div>
      <h1>Create a Post</h1>
      <button onClick={handleSubmit}>Create Post</button>
    </div>
  );
}

export default App;

 

 

 

Axios 실제 사용 예제

const response = await axios.post(getApiUrl('/admin_dashboard_insert_service'), serviceData, {
    withCredentials: true,
    headers: {
      'Content-Type': 'application/json'
    }
});

 

getApiUrl('/admin_dashboard_insert_service')

요청을 보낼 URL을 만드는 함수이다.
getApiUrl('/admin_dashboard_insert_service')가 /api/admin_dashboard_insert_service 같은 전체 URL을 만들어 줄 수 있다.

serviceData
서버에 보낼 데이터이다. { name: "세탁 서비스", price: 10000 } 같은 객체일 수 있다. 이 데이터는 요청의 body에 JSON으로 담겨 전송된다.

withCredentials: true
브라우저가 쿠키, 인증 정보를 포함해서 요청을 보내도록 한다. 서버와 클라이언트가 서로 인증 정보를 공유할 때 필요하다. 예를 들어 로그인 상태 유지 시 사용된다(세션 쿠키 전송 등).

headers: { 'Content-Type': 'application/json' }
요청 본문이 JSON 형식이라는 걸 서버에 알린다. 기본적으로 axios는 객체를 보내면 JSON으로 변환해주지만, 명시적으로 설정해주는 것이 좋다.