[React] SWR과 React Query

목차

리액트에서 서버 상태 관리하기: SWR과 React Query 활용하기

안녕하세요, 현대 웹 애플리케이션을 개발하는 모든 분들! 오늘은 리액트 애플리케이션에서 서버 상태 관리를 위해 사용되는 두 가지 주요 라이브러리인 SWR과 React Query에 대해 알아보겠습니다. 이 라이브러리들은 데이터 패칭, 캐싱, 동기화 및 업데이트를 쉽고 효율적으로 관리하도록 도와줍니다. 각각의 특징을 비교하고 어떻게 활용할 수 있는지 살펴보겠습니다.

---

서버 상태 관리의 중요성

리액트 애플리케이션에서 클라이언트 상태 관리는 주로 Redux, Context API 등을 통해 이루어집니다. 그러나 서버 상태 관리는 이와 다르게 접근해야 하며, 효율적인 데이터 패칭과 캐싱 전략이 필요합니다. SWR과 React Query는 이러한 문제를 해결하기 위해 설계된 라이브러리로, 서버 상태와의 비동기 통신을 최적화하여 성능과 사용자 경험을 크게 향상시킵니다.

 

SWR

개요

SWR(Stale-While-Revalidate)은 Vercel에서 개발한 리액트 라이브러리로, 데이터를 패칭하는 작업을 간소화하고 자동화합니다. SWR의 이름은 "데이터가 만료되었을 때 재검증하라"는 HTTP 캐싱 메커니즘에서 유래되었습니다.

주요 특징

• 자동 재검증: 포커스가 다시 맞춰지거나 네트워크가 복구되는 등의 이벤트에 데이터가 자동으로 새로고침됩니다.
• 간편한 데이터 패칭: React Hooks를 사용하여 데이터 패칭 로직을 컴포넌트와 쉽게 통합할 수 있습니다.
• 옵티미스틱 UI 업데이트: 사용자 인터페이스를 즉각적으로 업데이트하고 백그라운드에서 데이터를 동기화합니다.

import useSWR from 'swr'

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

  if (error) return <div>Failed to load</div>
  if (!data) return <div>Loading...</div>
  return <div>Hello, {data.name}!</div>
}

 

React Query

개요

React Query는 서버 상태를 효율적으로 동기화하고 캐시할 수 있도록 도와주는 라이브러리입니다. 복잡한 서버 상태 관리 로직을 추상화하여 데이터 패칭, 캐싱, 동기화를 손쉽게 관리할 수 있게 해줍니다.

주요 특징

• 강력한 캐싱 제어: 캐시된 데이터에 쉽게 접근하고, 설정에 따라 자동으로 캐시를 만료시킬 수 있습니다.
• 백그라운드 업데이트: 애플리케이션이 백그라운드에서 실행되는 동안 데이터를 새로 고칠 수 있습니다.
• 쿼리 취소: 불필요한 요청을 취소하여 리소스를 절약합니다.

import { useQuery } from 'react-query'

function Todos() {
  const { data, error, isLoading } = useQuery('todos', fetchTodos)

  if (isLoading) return <span>Loading...</span>
  if (error) return <span>Error: {error.message}</span>
  return (
    <ul>
      {data.map(todo => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  )
}

 

마무리하며...

SWR과 React Query는 서버 상태 관리를 위한 현대적인 접근 방식을 제공하며, 각각의 도구는 특정 시나리오에서 유용하게 사용될 수 있습니다. 애플리케이션의 요구 사항과 개발 스타일에 맞게 적절한 라이브러리를 선택하여, 더욱 빠르고 반응적인 사용자 경험을 제공해 보세요.

---

Reference:

데이터 가져오기를 위한 React Hooks – SWR

 

TanStack | High Quality Open-Source Software for Web Developers