[React] 스럽의 React Query 전환기

2차 MVP 개발을 시작하며 프론트엔드 파트에서 가장 고민한 부분은 서버 상태(Server State) 관리였습니다. 본 포스팅에서는 왜 스럽이 서버 상태 관리를 위해 React Query를 선택했으며, React-Query를 어떻게 사용하고 있는지에 대해 공유해보려 합니다. 

 

React-Query란?

React Query는 데이터 Fetching, 캐싱, 동기화, 서버 쪽 데이터 업데이트 등을 쉽게 만들어 주는 React 라이브러리입니다. 

React-Query를 사용하면 애플리케이션에서 서버 데이터를 가져오는 데 필요한 로직을 분리할 수 있으므로, 코드가 더 간결하고 유지 보수가 용이해집니다. 또한, 캐싱을 사용하면, 동일한 데이터를 반복해서 가져와야 할 경우, 서버에 불필요한 요청을 보내지 않고 빠르게 결과를 반환할 수 있습니다.

React-Query는 axios, fetch 등 다양한 HTTP 클라이언트와 함께 사용할 수 있으며, React Native 및 Next.js와 같은 다양한 환경에서도 사용할 수 있습니다.

 

React-Query 적용 방법

1. React-Query 설치 및 기본세팅

react-query와 react-query-devtools 의존성을 설치합니다. 

참고로, @tanstack/react-query-devtools는 @tanstack/react-query와 함께 사용하는 개발 도구입니다. React-Query를 통해 캐시된 데이터와 관련된 상태를 보여주고 디버깅 할 수 있는 기능을 제공합니다. 

npm i @tanstack/react-query @tanstack/react-query-devtools

 

src/index.tsx에 react-query과 관련된 세팅을 진행합니다. 

import React, { StrictMode } from 'react'
import ReactDOM from 'react-dom/client'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
import App from './App'

const queryClient = new QueryClient()

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render(
  <StrictMode>
    <QueryClientProvider client={queryClient}>
      <ReactQueryDevtools initialIsOpen />
      <App />
    </QueryClientProvider>
  </StrictMode>,
)

 

2. useQuery 

useQuery는 React-Query 라이브러리에서 제공하는 대표적인 React Hook 중 하나로, 데이터를 패칭(fetching)하는 비동기 작업에 사용됩니다. useQuery Hook은 API 요청을 수행하고 캐시된 데이터를 반환합니다. 

import { useQuery } from "react-query";
// 주로 사용되는 3가지 return 값입니다. 
const { data, isLoading, error } = useQuery(queryKey, queryFn, options)

 

queryKey

• React-Query를 통해 캐시된 데이터를 식별하는 데 사용되는 값입니다. 
• 배열 또는 문자열로 지정할 수 있습니다. 
• queryKey를 배열로 지정하는 경우 배열의 요소들은 캐시 키로 사용되며, 배열의 요소는 문자열, 숫자, 객체 등 어떤 값이든 될 수 있습니다. 
• queryKey 배열의 내용이 변경되면, useQuery 훅은 해당 캐시 키를 사용하여 데이터를 새로 가져옵니다. 

Query Key가 중복되지 않게 관리해야 캐싱을 활용할 수 있기 때문에 queryKey의 중복 이슈를 해결하는 것이 중요합니다. 스럽에서는 객체 형태로 queryKey를 관리하여 중복문제를 해결합니다. 

// /src/config/queryKeys.ts
export const queryKeys = {
  itemCategory: ['itemCategory'] as const,
}

 

 

 

참고자료

https://tanstack.com/query/v4/docs/react/reference/useQuery

useQuery | TanStack Query Docs