[React]API를 호출하는 세 가지 방법

본 포스팅은 React에서 API를 호출하는 세 가지 방법을 소개합니다.

개요

React는 싱글 페이지 어플리케이션을 구축하는 JavaScript 라이브러리로, 다른 서비스나 데이터에 접근하기 위해 API 호출이 빈번하게 발생할 수 있다. 본 포스팅은 React에서 API를 호출할 수 있는 세 가지 방법을 소개하며, 개발자는 프로젝트 요구사항에 따라 API 호출 방식을 적절하게 선택할 수 있어야 한다.

1. XMLHttpRequest

XMLHttpRequest는 JavaScript에서 제공하는 내장 객체로, 서버로 데이터를 요청하고 응답을 받아오는 기능을 수행한다. 그러나 XMLHttpRequest는 밑에서 소개하는 fetch API나 Axios에 비해 사용하기 복잡하고 낮은 수준의 인터페이스를 제공하므로 React에서 XMLHttpRequest를 사용하는 것은 권장하지 않는다.

다음은 React의 컴포넌트에서 클릭 이벤트가 발생했을때, XMLHttpRequest를 사용하여 응답 데이터를 state를 할당하고 웹 페이지에 표시하는 예시다.

import React, { useState } from "react";

export default function App() {
  const [data, setData] = useState([]);
  
  const handleButtonClick = () => {
    // 순서 1. XMLHttpRequest 객체 생성
    const xhr = new XMLHttpRequest();
    
    // 순서 2. open() 메서드를 사용하여 요청 방식 및 URL 설정
    xhr.open("GET", "https://jsonplaceholder.typicode.com/posts");
    
    // 순서 3. onload() 메서드에서 응답 데이터를 처리하는 로직 작성
    // onload() 메서드는 send() 메서드 호출 후 서버로부터 응답을 받으면 동작한다.
    xhr.onload = () => {
      if (xhr.status === 200) {
        setData(JSON.parse(xhr.responseText));
      } else {
        console.error("API 요청에 실패하였습니다.");
      }
    };
    
    // 순서 4. onerr() 메서드에서 네트워크 에러를 처리하는 로직 자성
    xhr.onerror = () => {
      console.error("Network error 발생");
    };
    
    // 순서 5. send() 메서드를 사용하여 API 요청 전송
    xhr.send();
  };
  
  return (
    <div>
      <button onClick={handleButtonClick}>{`데이터 가져오기`}</button>
      {data && (
        <ul>
          {data.map((item) => (
            <li key={item.id}>{item.title}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

2. Fetch API

fetch() 함수는 JavaScript의 전역 객체인 window에 window.fetch와 같이 내장되어 있으며, 네트워크 요청을 보내고 서버의 응답을 Promise 객체로 반환한다.

다음은 React의 컴포넌트에서 클릭 이벤트가 발생했을때, Fetch API를 사용하여 데이터를 state에 할당하고 웹 페이지에 표시하는 예시다.

import React, { useState } from "react";

export default function App() {
  const [data, setData] = useState(null);
  
  const handleButtonClick = () => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then((response) => {
        if (!response.ok) {
          console.error("API 요청에 실패하였습니다.");
        }
        return response.json();
      })
      .then((json) => setData(json))
      .catch((error) => console.error(error));
  };
  
  return (
    <div>
      <button onClick={handleButtonClick}>{`데이터 가져오기`}</button>
      {data && (
        <ul>
          {data.map((item) => (
            <li key={item.id}>{item.title}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

fetch() 함수는 응답을 Promise 객체로 반환하므로 then() 메서드를 사용하여 응답 데이터를 처리할 수 있다. 응답 데이터는 다양한 방식으로 처리할 수 있으며, 위 예시는 json() 메서드를 사용하여 JSON 형식으로 된 응답 데이터를 파싱한다.

대부분의 개발자들은 XMLHttpRequest보다 Fetch를 선호하는데 이유는 아래와 같다.

문법과 인터페이스: XMLHttpRequest를 사용하려면 new 키워드를 사용하여 객체를 생성하고 여러 메서드(send, open 등)와 여러 이벤트 리스너(onload, onerror 등)를 등록해야 한다. 하지만, fetch() 함수는 객체를 생성할 필요가 없으며 Promise 객체를 반환하므로 XMLHttpRequest보다 코드가 간결하고 응답 데이터를 처리하기 쉽다.
데이터 변환: fetch() 함수는 응답 데이터에 json(), text(), blob() 등의 메서드를 사용하여 데이터 형식을 쉽게 변환할 수 있다. 반면에, XMLHttpRequest는 응답 데이터 분석 후 데이터 형식을 변환해야하고 형식이 맞지 않으면 오류가 발생할 수 있다.

이러한 이유로 많은 개발자들은 XMLHttpRequest 대신 Fecth API를 사용한다. Fetch API를 통해 API를 호출할 수 있고 XMLHttpRequest보다 가독성 있는 코드를 작성할 수 있다.

3. Axios

Axios는 FrontEnd 혹은 Node.js에서 Http 통신을 처리하기 위해 사용되는 JavaScript 라이브러리다. Axios는 간결하고 직관적인 API를 제공하고 fetch API와 마찬가지로 응답을 Promise 객체로 반환한다.

먼저 Axios를 사용하기 위해 터미널에서 yarn 혹은 npm 명령어를 사용하여 Axios를 설치한다.

npm install axios

다음은 fetch API에서 보여준 예시를 Axios로 작성한 예시다.

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

export default function App() {
  const [data, setData] = useState([]);
  
  const handleButtonClick = () => {
    axios
      .get("https://jsonplaceholder.typicode.com/posts")
      .then((response) => {
        setData(response.data);
      })
      .catch((error) => console.error(error));
  };
  
  return (
    <div>
      <button onClick={handleButtonClick}>{`데이터 가져오기`}</button>
      {data && (
        <ul>
          {data.map((item) => (
            <li key={item.id}>{item.title}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

Fetch API와 Axios는 모두 Http 통신을 처리하기 위해 사용되지만, 몇 가지 차이점이 존재한다.

Axios는 JavaScript 라이브러리이므로 웹 브라우저와 Node.js에서 사용하려면 패키지를 설치해야 한다. Fetch API는 웹 브라우저에서 패키지를 설치하지 않고 사용할 수 있지만, Node.js에서 사용하려면 패키지를 설치해야 한다.
Axios는 응답 데이터를 기본적으로 JSON 형식으로 처리하므로 응답 데이터 뒤에 json() 메서드를 호출하지 않아도 된다. 따라서, JSON 형식의 응답 데이터를 처리하는 코드가 Fetch API보다 간결하다. 만약, Axios에서 응답 데이터를 다른 형식으로 처리하고 싶은 경우 reponseType을 설정한다.
Axios는 timeout(허용 시간)을 기능을 내장하고 있다. 반면에, Fetch API는 timeout 기능이 존재하지 않으므로 setTimeout() 함수와 조합하여 timeout을 설정해야 한다.

위 내용 이외에도 Axios와 Fetch API는 여러 차이점이 존재한다. Axios가 Fetch API보다 사용하기 편리하고 많은 기능을 내장하고 있지만, 웹 페이지에서 Axios 라이브러리를 불러와야하므로 웹 애플리케이션 크기가 커지거나 페이지 여는 시간이 약간 늘어날 수 있다는 단점이 존재한다.

Conclusion

XMLHttpRequest, Fetch API, Axios 모두 React에서 API를 호출하기 위해 사용할 수 있다. 개발자는 프로젝트의 요구사항에 따라 API 호출 방식을 적절하게 선택할 수 있어야 한다.