React 앱에서 REST API 요청 최적화 및 중복 제거 방법

React 애플리케이션에서 REST API 요청을 효율적으로 관리하는 것은 성능 최적화와 사용자 경험 향상에 매우 중요합니다. 특히 중복 요청을 줄이고 불필요한 네트워크 트래픽을 막는 방법을 잘 구현하면 앱의 반응 속도가 크게 개선됩니다.

1. API 요청 중복 문제 이해하기

React 컴포넌트가 여러 번 렌더링되거나 동일한 요청이 여러 컴포넌트에서 발생할 때 중복 API 호출이 발생할 수 있습니다. 이는 서버에 불필요한 부하를 일으키고 클라이언트 성능에도 부정적 영향을 미칩니다.

2. 요청 최적화 전략

API 요청 중복을 예방하고 최적화하는 다양한 방법이 있습니다:

• 요청 캐싱 (Caching)
• 요청 취소 (Cancellation)
• 중앙 상태 관리 (Context API, Redux 등) 활용
• React Query 같은 라이브러리 사용

3. 중복 요청 방지 예제 - React Query 사용

React Query는 서버 상태 관리를 단순화하고 캐싱, 중복 요청 방지 기능을 기본 제공하여 매우 효과적입니다.

import { useQuery } from 'react-query';

function fetchUser(userId) {
  return fetch(`https://api.example.com/users/${userId}`).then(res => res.json());
}

function UserProfile({ userId }) {
  const { data, isLoading, error } = useQuery(['user', userId], () => fetchUser(userId), {
    staleTime: 5 * 60 * 1000, // 5분 동안 캐시 유지
    cacheTime: 10 * 60 * 1000,
  });

  if (isLoading) return <p>로딩 중...</p>;
  if (error) return <p>에러 발생</p>;

  return <div><h1>{data.name}</h1></div>;
}

이 코드에서 React Query는 동일한 키(['user', userId])를 가진 쿼리 요청을 자동으로 합치고, 캐시를 사용하여 불필요한 재요청을 방지합니다.

4. fetch 요청 직접 관리하기 - 요청 취소

fetch API에서는 AbortController를 사용해 요청을 취소할 수 있습니다. 컴포넌트가 언마운트 될 때 불필요한 요청을 취소하는 예제입니다.

import { useEffect, useState } from 'react';

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

  useEffect(() => {
    const controller = new AbortController();

    fetch(`https://api.example.com/users/${userId}`, { signal: controller.signal })
      .then(res => res.json())
      .then(data => setUser(data))
      .catch(err => {
        if (err.name !== 'AbortError') setError(err);
      });

    return () => {
      controller.abort();
    };
  }, [userId]);

  if (error) return <p>에러 발생</p>;
  if (!user) return <p>로딩 중...</p>;

  return <div><h1>{user.name}</h1></div>;
}

5. 결론

React 앱에서 REST API 요청을 최적화하고 중복을 제거하려면 상태 관리, 요청 캐싱, 그리고 취소 기능을 적극 활용해야 합니다. React Query와 같이 검증된 라이브러리를 사용하면 복잡도를 줄이고 생산성을 높일 수 있으니 적극 추천합니다.