[React] Axios로 API 호출하기

MinJae·2024년 11월 2일

React

목록 보기

20/21

리액트에는 HTTP Client 내장 클래스가 존재하지 않습니다. 서버와 데이터를 주고받기 위한 HTTP 통신을 하는 방법 중 Axios에 대해 알아보겠습니다.

💡 Axios란?

Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 비동기로 HTTP 통신을 할 수 있으며 return을 Promise 객체로 해주기 때문에 response 데이터를 다루기 쉽습니다.

Axios 장점

fetch에는 없는 response timeout 처리 방법이 존재합니다.
Promise 기반이기 때문에 데이터를 다루기 편리합니다.
브라우저 호환성이 좋습니다.
response를 자동으로 JSON 형식으로 변환합니다.
요청이나 응답을 보내기 전에 중간에서 추가적인 작업이 가능합니다.

⚙️ React에서 Axios 구현하기

1. Axios 설치

// npm 
npm install axios

// yarn
yarn add axios

2. Axios 사용하기

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

const UserProfile = () => {
  const [user, setUser] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 컴포넌트가 마운트될 때 사용자 데이터를 가져옵니다.
    axios.get('/user?ID=12345')
      .then((response) => {
        setUser(response.data); // 성공 시 사용자 데이터 상태 업데이트
      })
      .catch((error) => {
        setError(error); // 에러 발생 시 에러 상태 업데이트
      });
  }, []);

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  if (!user) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>User Profile</h1>
      <p>ID: {user.ID}</p>
      <p>Name: {user.name}</p>
    </div>
  );
};

export default UserProfile;

위 예제에서 axios 부분만 살펴보겠습니다.

  useEffect(() => {
  
    axios.get('/user?ID=12345')
      .then((response) => {
        setUser(response.data);
      })
      .catch((error) => {
        setError(error);
      });
  }, []);

비동기 요청: 컴포넌트가 마운트될 때 입력된 경로로 GET 요청을 보냅니다.
then(): 요청이 성공하면 응답 데이터를 유저 상태로 업데이트합니다.
catch(): 요청 중 에러가 발생하면 에러 상태로 업데이트합니다.

📌 결론

Axios는 리액트 애플리케이션에서 API와의 통신을 간편하게 만들어주는 유용한 라이브러리입니다. 비동기 요청, 에러 핸들링, 데이터 변환과 같은 기능을 통해 개발자에게 많은 편리함을 제공합니다. 위에서 살펴본 코드 예제를 바탕으로 Axios를 활용해 사용자 데이터를 가져오는 방법을 익혔습니다.

이제 여러분의 프로젝트에서도 Axios를 도입하여 효율적으로 HTTP 통신을 구현해보세요. 다양한 설정과 기능을 활용하여 더 나은 사용자 경험을 제공할 수 있을 것입니다.