React 개발 시 서버 상태 관리 방법: React Query 및 SWR 활용

React에서 서버 상태 관리를 마스터하기 (React Query와 SWR 활용)

서버 상태 관리는 현대의 React 애플리케이션에서 매우 중요한 역할을 하며, 데이터 페칭, 캐싱, 서버와 클라이언트 간 동기화를 원활하게 합니다. 이번 포스트에서는 서버 상태 관리를 효율적으로 처리하는 두 가지 인기 라이브러리인 React Query와 SWR을 소개하고, 이들이 제공하는 기능과 각각의 장단점을 비교해 보겠습니다.

React 개발 시 서버 상태 관리 방법

1. 서버 상태 관리 개요

React에서 서버 상태를 관리한다는 것은 API를 통해 데이터를 가져오고, 이 데이터를 UI와 동기화하는 것을 의미합니다. 서버 상태 관리를 잘하면 성능을 최적화할 수 있고, 사용자 경험이 크게 향상됩니다. React Query와 SWR은 이러한 작업을 보다 쉽게 처리할 수 있도록 도와주는 라이브러리입니다.

2. React Query: 개요 및 주요 기능

React Query는 서버 사이드 데이터 페칭, 캐싱, 동기화 작업을 매우 효율적으로 처리할 수 있는 도구입니다. 복잡한 데이터 페칭 요구 사항이 있는 애플리케이션에서 유용하게 사용됩니다.

React Query의 주요 기능:

• 자동 캐싱: API에서 가져온 데이터를 자동으로 캐싱하고, 필요할 때마다 효율적으로 다시 가져옵니다.
• 백그라운드 데이터 페칭: React Query는 데이터를 백그라운드에서 가져오며, UI는 계속해서 반응형으로 유지됩니다.
• 강력한 Mutation 관리: 데이터를 생성, 수정, 삭제하는 Mutation 작업을 쉽게 관리할 수 있으며, 서버 상태와 UI를 동기화할 수 있습니다.

import { useQuery } from 'react-query';

function fetchPosts() {
  return fetch('/api/posts').then((res) => res.json());
}

function Posts() {
  const { data, error, isLoading } = useQuery('posts', fetchPosts);

  if (isLoading) return <p>로딩 중...</p>;
  if (error) return <p>게시글을 불러오는 중 오류가 발생했습니다.</p>;

  return (
    <ul>
      {data.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

3. SWR: 단순성과 성능

SWR(stale-while-revalidate)은 Vercel에서 개발한 데이터 페칭 라이브러리로, 성능 최적화와 재사용성을 중시합니다. 간결하고 효율적인 데이터 페칭이 필요한 애플리케이션에 적합합니다.

SWR의 주요 기능:

• Stale-While-Revalidate: 캐시된 데이터를 우선순위로 사용하고, 백그라운드에서 새로운 데이터를 가져와 화면을 업데이트합니다.
• 자동 재검증: 사용자가 페이지로 돌아왔을 때 자동으로 데이터를 재검증하여 최신 상태를 유지합니다.
• 간편한 사용: SWR의 간단한 API 덕분에 빠르게 적용할 수 있습니다.

import useSWR from 'swr';

function fetcher(url) {
  return fetch(url).then((res) => res.json());
}

function Profile() {
  const { data, error } = useSWR('/api/user', fetcher);

  if (error) return <p>프로필을 불러오는 중 오류가 발생했습니다.</p>;
  if (!data) return <p>로딩 중...</p>;

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

4. React Query vs SWR 비교

React Query와 SWR은 서버 상태 관리에 매우 유용한 도구들이지만, 사용 목적과 복잡성 면에서 차이가 있습니다.

특징	React Query	SWR
캐싱 전략	고급 캐싱 제어 기능	Stale-While-Revalidate 기반의 단순한 캐싱
에러 처리	세부적인 에러 관리 가능	간단한 에러 처리
성능 최적화	복잡한 애플리케이션에 적합	단순한 애플리케이션에 적합
개발 도구	강력한 디버깅 및 상태 추적 기능 제공	간단한 디버깅 제공
주 사용 사례	복잡한 데이터 페칭과 캐싱 요구 사항	간단한 데이터 패칭 및 자동 갱신이 필요한 프로젝트

5. 결론

복잡한 데이터 페칭과 캐싱을 효율적으로 관리해야 하는 애플리케이션에서는 React Query가 매우 유용합니다. 반면에, 간단한 데이터 페칭 및 자동 갱신이 필요한 경우 SWR이 더 적합할 수 있습니다. 두 라이브러리 모두 프로젝트의 특성에 맞춰 적절히 선택하여 사용할 수 있습니다.

React Query와 SWR의 실제 사용 예시

// React Query 예제 (Mutation과 함께)
import { useMutation, useQueryClient } from 'react-query';

function updateData(newData) {
  return fetch('/api/update', {
    method: 'POST',
    body: JSON.stringify(newData),
  });
}

function MyComponent() {
  const queryClient = useQueryClient();
  const mutation = useMutation(updateData, {
    onSuccess: () => {
      queryClient.invalidateQueries('data'); // 데이터 업데이트 후 다시 불러오기
    },
  });

  const handleClick = () => {
    mutation.mutate({ newData: '업데이트 완료!' });
  };

  return <button onClick={handleClick}>데이터 업데이트</button>;
}

// SWR 예제
import useSWR, { mutate } from 'swr';

function fetcher(url) {
  return fetch(url).then((res) => res.json());
}

function DataComponent() {
  const { data, error } = useSWR('/api/data', fetcher);

  const handleClick = () => {
    mutate('/api/data', { newData: '업데이트 완료!' }, false); // 로컬 데이터 업데이트
    fetch('/api/update', { method: 'POST', body: JSON.stringify({ newData: '업데이트 완료!' }) });
  };

  if (error) return <div>오류 발생!</div>;
  if (!data) return <div>로딩 중...</div>;

  return <button onClick={handleClick}>데이터 업데이트</button>;
}