🔄 16. API 호출 최적화 — SWR vs React Query 완전 비교 정리

프론트엔드 개발을 하다 보면 API 데이터 가져오기가 너무나 기본적인 작업인데,
직접 fetch만 써서 관리하려고 하면 생각보다 관리할 게 많다. (로딩 상태, 에러 처리, 캐싱 등)
그래서 등장한 게 바로 SWR과 React Query 같은 데이터 패칭 라이브러리!
이번 글에서는 두 라이브러리를 실제 써보고 느낀 차이와 선택 기준을 정리해봤다.

---

✅ SWR이란?

SWR = Stale-While-Revalidate
(조금 오래된 데이터를 먼저 보여주고, 백그라운드에서 최신 데이터를 가져오는 전략)

• Vercel에서 만든 오픈소스
• "항상 신선한 데이터를 보여주자"는 철학
• 사용법이 매우 심플하고 직관적임

---

SWR 기본 사용법

import useSWR from 'swr'

const fetcher = (url: string) => fetch(url).then(res => res.json())

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

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

  return <div>안녕하세요, {data.name}님</div>
}

---

SWR 주요 특징

• 기본적으로 자동 캐싱 + 재검증을 지원
• mutate로 캐시 직접 수정 가능
• 실시간 업데이트가 필요한 데이터(예: 프로필, 대시보드)에 적합
• API를 직접 fetcher로 만들어서 자유롭게 조정 가능

---

✅ React Query란?

React Query = "서버 상태 관리"를 위한 도구
클라이언트 상태(useState)처럼 서버 데이터를 관리해준다.

• 데이터 패칭 + 캐싱 + 에러 처리 + 리트라이 + 인피니티 스크롤까지 지원
• 더 복잡하고 다양한 상황에 대응 가능
• 현재는 TanStack Query라는 이름으로 발전

---

React Query 기본 사용법

import { useQuery } from '@tanstack/react-query'

const fetchUser = async () => {
  const res = await fetch('/api/user')
  return res.json()
}

function Profile() {
  const { data, error, isLoading } = useQuery({
    queryKey: ['user'],
    queryFn: fetchUser
  })

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

  return <div>안녕하세요, {data.name}님</div>
}

---

React Query 주요 특징

• API 호출 상태를 useQuery, useMutation으로 구분 관리
• 자동 재시도(retry), 에러 핸들링, 백그라운드 refetch까지 내장
• 쿼리 key를 통한 강력한 캐싱 전략 적용
• 페이지네이션이나 무한 스크롤 기능도 기본 제공

---

✅ SWR vs React Query 비교

항목	SWR	React Query
만든 곳	Vercel	Tanner Linsley (TanStack)
주요 목적	간단한 데이터 fetch + 캐싱	서버 상태 관리 전체
코드 복잡도	심플, 최소 설정	다양한 기능에 따라 복잡도 상승
기능 확장성	기본 fetch + 캐시 관리	Mutation, Pagination, etc.
자동 리패치	지원	더 세밀한 설정 가능
SSR 지원	직접 fetch 조정 필요	공식적으로 SSR 지원 강화
무한스크롤 지원	직접 구현 필요	기본 지원

---

✅ 개인적인 사용 경험 정리

프로젝트 성격	추천 라이브러리
간단한 데이터 fetch 위주	SWR
CRUD가 많고, 서버 상태를 통합 관리해야 함	React Query
SEO, SSR 고려 필요	React Query

---

✅ 실전 팁

• Next.js에서는 SWR이 더 간편할 때가 많다. (특히 Client Components에서)
• 대형 프로젝트에서는 React Query를 쓴다. (Mutation 관리가 중요하기 때문)
• API 스펙이 복잡하고 서버 상태가 복잡한 앱이라면 무조건 React Query가 좋다.

---

📝 내가 느낀 점

처음에는 "둘 다 똑같이 fetch만 해주는 거 아냐?"라고 생각했는데,
써보니까 SWR은 단순한 fetch + 캐싱,
React Query는 아예 서버 상태(state)를 관리하는 수준이었다.
특히 에러 리트라이, 옵티미스틱 업데이트, 쿼리 무효화(invalidate) 같은 기능이
진짜 복잡한 상황에서 엄청 큰 도움이 된다는 걸 몸으로 느꼈다.

---

🎯 "SWR은 가벼운 오토바이, React Query는 풀 옵션 SUV다. 프로젝트 크기에 맞춰 고르자!"