REACT Axios, fetch API, SWR, React Query 서버 통신 및 데이터 페칭 최적화 컴포넌트

REACT Axios, fetch API, SWR, React Query 서버 통신 및 데이터 페칭 최적화 컴포넌트

현대 웹 애플리케이션은 다양한 데이터를 서버와 주고받으며 동작합니다. 따라서, 효율적이고 안정적인 데이터 페칭은 사용자 경험과 애플리케이션 성능에 직접적인 영향을 미칩니다.

이번 포스팅에서는 REACT axios, fetch API, SWR, React Query 등 다양한 도구를 활용하여 서버와의 통신을 최적화하고, 데이터 페칭을 효과적으로 관리할 수 있는 컴포넌트 디자인 전략에 대해 자세히 알아보겠습니다.

---

REACT 서버 통신 및 데이터 페칭의 중요성

데이터 페칭 최적화는 여러 측면에서 중요합니다.

• 빠른 응답 속도: 서버와의 통신 지연 시간을 최소화하여, 사용자에게 빠른 피드백을 제공합니다.
• 네트워크 비용 절감: 필요한 데이터만 효율적으로 가져와 불필요한 네트워크 요청을 줄입니다.
• 데이터 일관성 유지: 최신 데이터 상태를 반영하고, 캐싱을 통해 중복 요청을 방지하여 데이터 일관성을 높입니다.
• 사용자 경험 개선: 로딩 상태 관리, 에러 처리 등을 통해 사용자가 원활하게 애플리케이션을 이용할 수 있도록 돕습니다.

---

주요 도구 및 라이브러리 소개

Axios와 Fetch API

두 도구는 모두 서버와의 HTTP 통신을 위한 라이브러리입니다.

• Axios: Promise 기반의 HTTP 클라이언트로, 요청 및 응답 인터셉터, 자동 JSON 변환, 요청 취소 등 다양한 기능을 제공합니다.
  • 장점: 직관적인 API, 에러 처리 및 인터셉터 기능, 브라우저와 Node.js 환경 모두 지원
  • 단점: 추가 라이브러리 설치 필요
• Fetch API: 내장 브라우저 API로, Promise 기반의 요청 기능을 제공하며 별도의 라이브러리 없이 바로 사용할 수 있습니다.
  • 장점: 브라우저에 기본 포함되어 있어 외부 라이브러리 불필요
  • 단점: 에러 처리 및 응답 파싱에 추가 코드가 필요, 일부 오래된 브라우저에서는 폴리필 필요

SWR과 React Query

두 라이브러리는 데이터 페칭을 더 효율적으로 관리하기 위해 만들어졌으며, 각각의 강점을 가지고 있습니다.

• SWR (stale-while-revalidate): Vercel에서 만든 경량 데이터 페칭 라이브러리로, 캐싱, 자동 재검증, 포커스 리페칭 등 다양한 기능을 제공하여 최신 데이터를 유지하면서도 빠른 응답 속도를 보장합니다.
  • 주요 기능:
    • 캐시와 재검증 전략:
    • stale-while-revalidate
    • 자동 데이터 갱신
    • 간결한 API 설계
• React Query: 데이터 페칭, 캐싱, 업데이트 및 동기화 기능을 매우 강력하게 지원하는 라이브러리로, 복잡한 데이터 상태 관리와 서버 상태 동기화를 쉽게 처리할 수 있습니다.
  • 주요 기능:
    • 캐싱, 백그라운드 업데이트
    • 쿼리 무효화와 재요청 관리
    • 전역 상태와 로컬 상태의 분리

---

컴포넌트 설계 전략

1. API 요청 및 응답 관리

API 요청 시 공통적인 에러 처리, 로딩 상태 관리, 데이터 변환 등을 위한 래퍼(wrapper)를 설계하는 것이 좋습니다. 예를 들어, Axios를 사용하여 요청 인터셉터와 응답 인터셉터를 설정하면, 모든 요청에 대해 일관된 에러 처리와 인증 토큰 갱신 로직을 중앙에서 관리할 수 있습니다.

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

const apiClient = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
});

// 요청 인터셉터
apiClient.interceptors.request.use(
  config => {
    // 예: 인증 토큰 추가
    const token = localStorage.getItem('authToken');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => Promise.reject(error)
);

// 응답 인터셉터
apiClient.interceptors.response.use(
  response => response,
  error => {
    // 에러 로깅 및 처리
    console.error('API Error:', error);
    return Promise.reject(error);
  }
);

export default apiClient;

이와 같이 공통 로직을 분리하면, 각 컴포넌트에서는 데이터 페칭 로직에 집중할 수 있어 코드의 가독성과 유지보수성이 향상됩니다.

2. 캐싱과 재검증 전략

SWR과 React Query는 캐싱 및 자동 재검증 기능을 제공하여, 사용자 인터랙션에 따라 최신 데이터를 유지하면서도 불필요한 네트워크 요청을 줄입니다.

SWR 사용 예제

// UserProfile.jsx
import React from 'react';
import useSWR from 'swr';
import apiClient from './apiClient';

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

const UserProfile = () => {
  const { data, error } = useSWR('/user/profile', fetcher, {
    refreshInterval: 30000, // 30초마다 자동 갱신
  });

  if (error) return <div>에러 발생: {error.message}</div>;
  if (!data) return <div>로딩 중...</div>;

  return (
    <div>
      <h2>{data.name}님의 프로필</h2>
      <p>이메일: {data.email}</p>
    </div>
  );
};

export default UserProfile;

위 예제는 SWR을 사용하여 /user/profile API를 호출하고, 30초마다 데이터를 자동 갱신합니다. SWR은 캐시된 데이터를 즉시 반환한 후, 백그라운드에서 최신 데이터를 요청하여 UI를 최신 상태로 유지합니다.

React Query 사용 예제

// OrderList.jsx
import React from 'react';
import { useQuery } from 'react-query';
import apiClient from './apiClient';

const fetchOrders = async () => {
  const { data } = await apiClient.get('/orders');
  return data;
};

const OrderList = () => {
  const { data, error, isLoading } = useQuery('orders', fetchOrders, {
    refetchOnWindowFocus: true, // 창 포커스 시 데이터 재요청
  });

  if (isLoading) return <div>로딩 중...</div>;
  if (error) return <div>에러 발생: {error.message}</div>;

  return (
    <div>
      <h2>주문 목록</h2>
      <ul>
        {data.map(order => (
          <li key={order.id}>
            주문 번호: {order.id}, 금액: {order.amount}원
          </li>
        ))}
      </ul>
    </div>
  );
};

export default OrderList;

React Query는 'orders'라는 쿼리 키로 데이터를 캐싱하고, 창 포커스 시 데이터를 자동 재요청하는 기능을 제공합니다. 이를 통해 사용자가 언제나 최신 데이터를 확인할 수 있도록 지원합니다.

3. 전역 상태와 로컬 상태의 분리

서버에서 받아온 데이터는 일반적으로 전역 상태로 관리하기보다는, 각 컴포넌트 내부에서 로컬 상태로 관리하는 것이 좋습니다. React Query와 SWR은 서버 상태를 별도의 캐시 스토어로 관리하기 때문에, 전역 상태 관리 라이브러리(Redux, MobX 등)와 분리하여 사용할 수 있습니다. 이렇게 하면, 클라이언트의 UI 상태와 서버에서 가져온 데이터 상태가 독립적으로 관리되어 유지보수가 쉬워집니다.

4. 데이터 페칭 최적화를 위한 코드 스플리팅

대규모 애플리케이션에서는 각 페이지별로 필요한 API 호출을 분리하고, 코드 스플리팅을 통해 초기 로딩 시 불필요한 데이터 요청을 최소화하는 것이 중요합니다. Next.js와 같은 프레임워크를 사용하면, 페이지별로 데이터 페칭 함수를 분리하여 서버 사이드 렌더링(SSR)이나 정적 사이트 생성(SSG)을 활용할 수 있습니다.

// pages/orders.js (Next.js 예제)
import React from 'react';
import OrderList from '../components/OrderList';

const OrdersPage = () => {
  return (
    <div>
      <h1>주문 내역</h1>
      <OrderList />
    </div>
  );
};

export async function getServerSideProps() {
  // SSR을 통해 초기 데이터 페칭 가능 (예: React Query의 prefetch 사용)
  // 이 예제에서는 간단하게 빈 props를 반환
  return { props: {} };
}

export default OrdersPage;

Next.js를 사용하면, 페이지 전환 시 필요한 데이터만 서버에서 미리 로드할 수 있으므로 초기 로딩 시간을 단축하고 SEO에도 긍정적인 효과를 줄 수 있습니다.

---

결론

서버 통신과 데이터 페칭 최적화는 웹 애플리케이션의 성능과 사용자 경험에 지대한 영향을 미칩니다. Axios나 fetch API를 통해 기본적인 HTTP 통신을 관리하고, SWR과 React Query와 같은 데이터 페칭 라이브러리를 도입하면, 캐싱, 자동 재검증, 백그라운드 업데이트 등 다양한 기능을 통해 최신 데이터를 안정적으로 관리할 수 있습니다.

핵심 전략은 다음과 같습니다.

• 공통 API 클라이언트 설계: Axios 인터셉터를 활용한 공통 요청 관리로, 에러 처리와 인증 등의 로직을 중앙에서 관리합니다.
• 데이터 캐싱 및 재검증: SWR과 React Query를 활용하여 불필요한 네트워크 요청을 줄이고, 사용자에게 항상 최신 데이터를 제공합니다.
• 전역 상태와 로컬 상태 분리: 서버에서 가져온 데이터는 전역 상태와 분리하여 각 컴포넌트에서 독립적으로 관리함으로써, 유지보수성을 높입니다.
• 코드 스플리팅 및 SSR 활용: Next.js와 같은 프레임워크를 통해 페이지별 데이터 페칭을 최적화하고, 초기 로딩 속도와 SEO를 개선합니다.

이와 같은 전략을 통해 데이터 페칭을 효과적으로 관리하면, 사용자에게 빠르고 안정적인 인터랙션을 제공할 수 있으며, 개발자는 보다 유지보수하기 쉬운 코드를 작성할 수 있습니다. 앞으로 리액트 애플리케이션을 개발할 때, 서버 통신 및 데이터 페칭 최적화 전략을 적극 도입하여, 전반적인 성능과 사용자 만족도를 크게 향상시키시길 바랍니다.