React에서 API 연동하기: Fetch와 Axios를 사용한 데이터 처리

웹 애플리케이션에서 데이터를 외부 API로부터 가져오는 것은 매우 일반적인 작업입니다. 이번 포스팅에서는 React에서 데이터를 가져오기 위해 Fetch API와 Axios를 사용하는 방법에 대해 알아보겠습니다.

1. API란?

API(Application Programming Interface)는 서로 다른 소프트웨어 애플리케이션 간의 상호작용을 가능하게 해주는 인터페이스입니다. 웹 API는 주로 HTTP 프로토콜을 통해 데이터에 접근하거나 조작할 수 있게 해줍니다.

2. Fetch API 사용하기

Fetch API는 브라우저 내장 기능으로, 네트워크 요청을 만들기 위해 사용됩니다. 기본적인 사용법을 알아보겠습니다.

2.1 데이터 가져오기

먼저, 데이터를 가져오는 기본적인 예제를 살펴보겠습니다. 다음은 JSONPlaceholder라는 무료 API에서 데이터를 가져오는 코드입니다.

// src/App.js
import React, { useEffect, useState } from 'react';

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

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => {
        if (!response.ok) {
          throw new Error('네트워크 응답이 좋지 않습니다.');
        }
        return response.json();
      })
      .then(data => {
        setData(data);
        setLoading(false);
      })
      .catch(error => {
        console.error('Fetch 오류:', error);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <h2>로딩 중...</h2>;
  }

  return (
    <div>
      <h1>포스트 목록</h1>
      <ul>
        {data.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

 

 

2.2 에러 처리

Fetch API를 사용할 때는 네트워크 오류나 응답 오류를 처리하는 것이 중요합니다. 위의 코드에서는 .catch() 블록을 사용하여 오류를 처리하고 있습니다.

3. Axios 사용하기

Axios는 Promise 기반의 HTTP 클라이언트로, Fetch보다 더 많은 기능과 간편한 문법을 제공합니다. Axios를 사용하려면 먼저 패키지를 설치해야 합니다.

3.1 Axios 설치

npm install axios

3.2 데이터 가져오기

Axios를 사용한 데이터 가져오기 예제입니다.

// src/App.js
import React, { useEffect, useState } from 'react';
import axios from 'axios';

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

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then(response => {
        setData(response.data);
        setLoading(false);
      })
      .catch(error => {
        console.error('Axios 오류:', error);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <h2>로딩 중...</h2>;
  }

  return (
    <div>
      <h1>포스트 목록</h1>
      <ul>
        {data.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

3.3 Axios의 장점

• 기본 설정: Axios는 기본 URL이나 헤더를 설정할 수 있어 재사용이 간편합니다.
• 응답 데이터 포맷: Axios는 자동으로 JSON 응답을 변환해줍니다.
• 요청 취소: Axios는 요청을 취소하는 기능을 지원합니다.

4. 결론

이번 포스팅에서는 React에서 API와 연동하는 방법으로 Fetch API와 Axios를 비교해보았습니다. 두 방법 모두 데이터 요청을 쉽게 처리할 수 있지만, Axios는 더 많은 기능을 제공하므로 복잡한 요청을 다룰 때 유리합니다.