React에서 API 통합 처리하기

현대 웹 애플리케이션에서는 다양한 외부 서비스와 데이터를 통합하여 유기적으로 작동하는 기능이 필수적입니다. API(Application Programming Interface)는 이를 구현하는 데 핵심적인 역할을 합니다. 특히 React 애플리케이션에서 API를 효율적으로 처리하면 동적인 사용자 경험과 높은 성능을 동시에 구현할 수 있습니다.

이번 글에서는 React에서 API 통합 처리를 위한 방법과 베스트 프랙티스를 살펴보고, 예제를 통해 실용적인 접근법을 제시하겠습니다.

---

API 통합의 주요 개념

API 통합은 외부 서비스와 통신하여 데이터를 가져오거나 서버로 데이터를 전송하는 작업을 포함합니다. React에서 API 통합을 효율적으로 처리하기 위해 다음의 주요 개념을 이해해야 합니다:

1. HTTP 요청: fetch 또는 axios와 같은 라이브러리를 사용하여 API 호출을 수행합니다.
2. 비동기 작업: React에서 비동기적으로 데이터를 가져오기 위해 async/await 또는 Promise를 사용합니다.
3. 상태 관리: React의 useState 또는 상태 관리 라이브러리(Redux, Recoil 등)를 사용하여 API에서 가져온 데이터를 관리합니다.
4. 에러 처리: 네트워크 오류나 서버 오류를 처리하여 안정적인 사용자 경험을 제공합니다.

---

React에서 API 호출 기본 구조

fetch를 사용한 API 호출

fetch는 브라우저 내장 함수로, 간단하게 API 요청을 처리할 수 있습니다. 예를 들어, 특정 사용자 데이터를 가져오는 API 호출은 다음과 같이 작성할 수 있습니다:

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

const UserComponent = () => {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchUser = async () => {
      try {
        const response = await fetch('https://api.example.com/user');
        if (!response.ok) {
          throw new Error('Failed to fetch user');
        }
        const data = await response.json();
        setUser(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchUser();
  }, []);

  if (loading) return

Loading...

;
  if (error) return

Error: {error}

;

  return (

{user.name}

Email: {user.email}

  );
};

export default UserComponent;

axios를 사용한 API 호출

axios는 더 많은 기능을 제공하는 HTTP 클라이언트 라이브러리로, 에러 처리와 요청 구성을 더 간단히 처리할 수 있습니다:

npm install axios

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

const UserComponent = () => {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchUser = async () => {
      try {
        const response = await axios.get('https://api.example.com/user');
        setUser(response.data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchUser();
  }, []);

  if (loading) return

Loading...

;
  if (error) return

Error: {error}

;

  return (

{user.name}

Email: {user.email}

  );
};

export default UserComponent;

---

React에서 API 통합의 베스트 프랙티스

1. API 요청 분리하기

컴포넌트와 API 요청 로직을 분리하면 코드 재사용성과 유지보수성을 높일 수 있습니다. 아래는 API 호출 로직을 별도 파일로 분리한 예제입니다:

// api.js
import axios from 'axios';

const API_BASE_URL = 'https://api.example.com';

export const fetchUser = async () => {
  const response = await axios.get(`${API_BASE_URL}/user`);
  return response.data;
};

// UserComponent.js
import React, { useEffect, useState } from 'react';
import { fetchUser } from './api';

const UserComponent = () => {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const getUser = async () => {
      try {
        const userData = await fetchUser();
        setUser(userData);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    getUser();
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>Email: {user.email}</p>
    </div>
  );
};

export default UserComponent;

2. 상태 관리 라이브러리 사용하기

대규모 애플리케이션에서는 Redux, Zustand, Recoil 같은 상태 관리 라이브러리를 사용하여 API 데이터를 전역 상태로 관리할 수 있습니다. 예를 들어 Redux Toolkit을 활용하면 API 데이터 페칭과 상태 관리를 한 곳에서 처리할 수 있습니다.

3. 캐싱과 SWR 사용

동일한 데이터를 반복적으로 요청하는 경우, SWR이나 React Query 같은 라이브러리를 사용하여 캐싱을 구현할 수 있습니다. 이로 인해 API 호출 횟수를 줄이고 사용자 경험을 향상시킬 수 있습니다.

npm install swr

import useSWR from 'swr';
import axios from 'axios';

const fetcher = (url) => axios.get(url).then((res) => res.data);

const UserComponent = () => {
  const { data, error } = useSWR('https://api.example.com/user', fetcher);

  if (!data) return

Loading...

;
  if (error) return

Error: {error.message}

;

  return (

{data.name}

Email: {data.email}

  );
};

export default UserComponent;

---

결론

React에서 API를 통합 처리하는 것은 효율적인 데이터 관리와 사용자 경험 향상을 위한 필수적인 작업입니다. fetch와 axios를 활용한 기본적인 API 호출부터, SWR과 같은 고급 라이브러리를 사용한 캐싱까지 다양한 접근법을 통해 애플리케이션의 성능과 확장성을 높일 수 있습니다. 여러분의 프로젝트에 맞는 방식을 선택해 보세요!