React에서 SWR과 React Query 비교로 보는 데이터 페칭 선택

개요

웹 애플리케이션에서 데이터 페칭은 사용자 경험에 큰 영향을 준다. 같은 목적을 가진 SWR과 React Query는 설계 철학과 기능에서 차이가 있다. 이 글은 react query vs swr 관점에서 두 라이브러리를 비교하고, swr 사용법 react 예제와 react-query 캐싱 전략을 함께 설명한다.

데이터 페칭에서 중요한 요소

우선 고려할 요소는 다음과 같다.

• 응답성: 데이터 최신성 유지 방식
• 캐싱: 네트워크 요청 최소화와 빠른 렌더링
• 동기화: 여러 탭이나 여러 컴포넌트 간 일관성
• 재요청(Refetch) 정책: 포커스, 네트워크 회복 등 조건

이 요소들은 라이브러리 선택에 직접적인 영향을 준다.

SWR 소개

SWR은 Vercel에서 만든 경량 라이브러리다. 설계 철학은 단순함과 작은 API surface다. 기본적으로 stale-while-revalidate 전략을 사용한다. 데이터는 먼저 캐시에서 반환되고, 백그라운드에서 재요청이 발생해 최신 데이터로 갱신된다.

SWR 장점

• 사용법이 직관적이고 학습 곡선이 낮다.
• 빠른 초기 렌더링과 자동 재검증 지원.
• 내장된 캐시와 동기화 기능으로 코드가 간결해짐.

SWR 기본 사용법 예제

다음은 swr 사용법 react 예제다.

import useSWR from 'swr'

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

export default function Users() {
  const { data, error } = useSWR('/api/users', fetcher)

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

  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  )
}

기본 설정만으로도 캐시 반환과 백그라운드 업데이트가 작동한다.

React Query 소개

React Query는 더 많은 기능을 제공하는 데이터 상태 관리 라이브러리다. 서버 상태를 강력히 관리하도록 설계되어 있다. 캐싱, 낙관적 업데이트, 쿼리 무효화, 페이징, 무한 스크롤 같은 고급 기능을 기본으로 지원한다.

React Query 장점

• 세밀한 캐싱 설정과 쿼리 무효화 기능.
• 서버 상태에 맞춘 다양한 훅과 유틸 제공.
• 대규모 애플리케이션에서 일관된 상태 관리에 유리.

React Query 기본 사용법 및 캐싱 옵션

react-query 캐싱 전략은 옵션으로 쉽게 제어할 수 있다. 아래는 기본 예제다.

import { useQuery } from 'react-query'

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

export default function Users() {
  const { data, error, isLoading } = useQuery('users', fetchUsers, {
    staleTime: 1000 * 60, // 1분 동안 fresh 상태 유지
    cacheTime: 1000 * 60 * 5, // 5분 후 캐시 제거
    refetchOnWindowFocus: true,
  })

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

  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  )
}

staleTime과 cacheTime으로 데이터 생명주기를 조절할 수 있다. 필요에 따라 refetchOnWindowFocus, refetchInterval 등을 활용하면 동기화를 강화할 수 있다.

react query vs swr: 핵심 비교

• 사용성: SWR은 단순하고 빠르게 적용 가능. React Query는 기능이 많아 설정이 다양하다.
• 캐싱 정책: SWR은 기본적으로 stale-while-revalidate. React Query는 세부 옵션으로 캐싱 전략을 구성 가능.
• 동기화: 둘 다 탭 간 동기화나 포커스 기반 리페치 지원. React Query는 무효화와 업데이트 제어에 강하다.
• 규모: 작은 프로젝트나 빠른 프로토타이핑은 SWR이 적합. 복잡한 서버 상태와 많은 상호작용이 필요한 앱은 React Query가 유리.

선택 체크리스트

• 간단한 페칭과 자동 재검증이면 SWR 우선 고려
• 세밀한 캐시 제어와 쿼리 무효화가 필요하면 React Query 선택
• 팀의 선호와 기존 인프라(예: 전역 상태 관리)도 고려

실무 팁 요약

• 초기에는 단순한 SWR로 빠르게 구축하고, 필요 시 React Query로 이전 가능
• 캐시 설정은 사용자 경험에 직접 영향. staleTime을 적절히 조정
• 쿼리 무효화와 낙관적 업데이트는 복잡한 CRUD에 유리

결론

SWR과 React Query는 목적이 겹치지만 사용성에서 차이가 있다. react query vs swr 비교를 통해 요구사항을 먼저 정리하면 선택이 명확해진다. 간단한 프로젝트나 빠른 반응성이 필요하면 swr 사용법 react처럼 가볍게 시작한다. 반면 서버 상태를 세밀하게 제어하고 싶다면 react-query 캐싱 전략을 활용하는 편이 바람직하다. 최종 선택은 기능 요구와 팀 환경을 기준으로 결정하면 된다.