useSWR을 이용한 데이터 패칭

최근 MERN 스택으로 Todo 프로젝트를 진행하면서 클라이언트에서 데이터를 효율적으로 가져오기 위해 useSWR을 사용했습니다.

이 글에서는 useSWR을 활용하여 데이터를 패칭하는 방법과 mutate를 이용한 데이터 조작을 다뤘습니다.

---

1. useSWR이란?

useSWR은 SWR 라이브러리의 React 훅으로, 클라이언트에서 데이터를 패칭하고 관리하는 데 유용했습니다.

주요 특징은 다음과 같습니다.

• 자동 데이터 갱신 (revalidation)
• 캐싱을 활용한 성능 최적화
• 데이터 요청을 최소화하는 deduplication
• mutate를 통한 로컬 상태 업데이트

---

2. useSWR 기본 사용법

useSWR을 사용하면 쉽게 데이터를 가져올 수 있습니다.

import useSWR from 'swr';
import { API_BASE_URL } from '@/config';
import { fetchWithAuth } from '@/utils/fetchWithAuth';
import { Todo } from '@/utils/types';

const fetcher = (url: string, options: RequestInit = {}) => {
    return fetchWithAuth(url, {
        method: options.method || 'GET',
        headers: { 'Content-Type': 'application/json' },
        body: options.body,
    });
};

export default function useTodos(accessToken: string | null) {
  const {
    data: todos,
    error,
    mutate,
    isLoading,
  } = useSWR<Todo[]>(
    accessToken ? `${API_BASE_URL}/api/todos` : null,
    fetcher
  );

  return { todos, error, isLoading, mutate };
}

2-1 useSWR의 인자

• 첫 번째 인자: 데이터를 요청할 URL (null이면 요청하지 않음)
• 두 번째 인자: 데이터를 가져올 fetcher 함수

---

3. mutate를 활용한 데이터 조작

mutate를 사용하면 서버 요청 후 데이터를 갱신할 수 있습니다.

mutate는 비동기 함수로 실행되며, 최적화된 상태 업데이트를 위한 여러 옵션을 제공했습니다.

3-1. 예시

async function addTodo(title: string) {
  if (!title.trim().length) {
    toast.error('할 일을 입력해주세요!');
    return;
  }

  const newTodo = {
    title: `${title} adding...`,
    _id: Date.now().toString(),
    isCompleted: false,
  };

  await mutate(
    async () => {
      const response = await fetcher(`${API_BASE_URL}/api/todos`, {
        method: 'POST',
        body: JSON.stringify({ title }),
      });

      if (response.error) {
        throw new Error(response.error);
      }
      return [...(todos || []), response];
    },
    {
      optimisticData: [...(todos || []), newTodo],
      revalidate: true,
      rollbackOnError: true,
    }
  );
}

3-2. mutate의 옵션

• optimisticData: 요청이 완료되기 전에 UI에 미리 반영할 데이터 (로딩 속도를 향상시킴)
• revalidate: 요청 후 서버에서 최신 데이터를 다시 가져올지 여부 (true이면 자동 갱신)
• rollbackOnError: 요청 실패 시 이전 데이터로 롤백할지 여부 (true이면 실패 시 원래 상태로 복구)