React에서 API 호출하기: Axios를 활용한 예제

 

React 애플리케이션에서 백엔드 서버와의 통신은 자주 발생합니다.

React 애플리케이션에서 API를 호출하는 방법에 대해 알아보겠습니다.

우리는 Axios 라이브러리를 사용하여 백엔드 서버에 HTTP 요청을 보내고 응답을 처리할 것입니다.

 

Axios 소개

Axios는 JavaScript 및 TypeScript를 위한 강력한 HTTP 클라이언트 라이브러리입니다. 우리는 이 라이브러리를 사용하여 간편하게 서버에 요청을 보내고 응답을 처리할 수 있습니다.

yarn add axios

 

예제: React 애플리케이션에서 Axios 사용하기

아래의 예제를 통해 Axios를 사용하여 React 애플리케이션에서 서버 API를 호출하는 방법을 살펴볼 것입니다.

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

const API_URL = "https://moneyfulpublicpolicy.co.kr";

const App = () => {
  const [userData, setUserData] = useState(null);
  
  // 회원가입 함수
  const signup = async () => {
    try {
      const response = await axios.post(`${API_URL}/signup`, {
        username: 'example_user',
        password: 'example_password',
        email: 'example@email.com'
      });
      console.log("회원가입 결과:", response.data);
    } catch (error) {
      console.error("회원가입 에러:", error);
    }
  };
  
  // 로그인 함수
  const login = async () => {
    try {
      const response = await axios.post(`${API_URL}/login`, {
        username: 'example_user',
        password: 'example_password'
      });
      console.log("로그인 결과:", response.data);
      const token = response.data.token;
      // 로그인 성공 시 토큰 저장 및 회원정보 확인
      getUserInfo(token);
    } catch (error) {
      console.error("로그인 에러:", error);
    }
  };

  // 회원정보 확인 함수
  const getUserInfo = async (token) => {
    try {
      const response = await axios.get(`${API_URL}/user_info`, {
        headers: {
          Authorization: `Bearer ${token}`
        }
      });
      console.log("회원정보 확인 결과:", response.data);
      setUserData(response.data);
    } catch (error) {
      console.error("회원정보 확인 에러:", error);
    }
  };

  // 회원가입 및 로그인 버튼 클릭 핸들러
  const handleButtonClick = async () => {
    await signup();
    await login();
  };

  return (
    <div>
      <h1>API 호출 예제</h1>
      <button onClick={handleButtonClick}>회원가입 및 로그인</button>
      {userData && (
        <div>
          <h2>회원정보</h2>
          <p>Username: {userData.username}</p>
          <p>Email: {userData.email}</p>
        </div>
      )}
    </div>
  );
};

export default App;

 

위 예제는 React 함수형 컴포넌트를 사용하여 작성되었습니다.

useState 훅을 사용하여 회원정보를 상태로 관리합니다.

Axios를 사용하여 회원가입, 로그인 및 회원정보 확인을 수행하는 함수들을 작성합니다.