[React] 리액트쿼리(React Query)란?

팀프로젝트를 진행하면서 리액트쿼리를 사용하게 됐다.

초반에 개인 프로젝트를 진행하면서 zustand를 사용해보고 관련 영상을 찾아보다가 우연히 우아콘 영상을 보고 리액트쿼리에 관심을 가지고 있던차에 사용해 볼 수 있었다. 

 

✨ 참고로 제가 봤던 영상은 이 영상입니다! 

 

간단하게 어떻게 사용하는지 정리해두고 보면서 익숙하게 사용할 수 있도록 하려고한다. 

 

---

📌

TanStack Query Docs

 

리액트 쿼리(React Query)란?

리액트 쿼리는 서버의 상태를 불러오고 캐싱하며 서버 데이터의 동기화 및 업데이트를 보다 쉽게 할 수 있도록 도와주는 라이브러리이다. 

 

리액트 쿼리 기능

• 쿼리(Query) - 데이터를 가져오는 요청으로 서버나 로컬 캐시에서 데이터를 가져올 수 있다. 
• 뮤테이션(Mutation) - 데이터를 변경하는 요청으로 서버에 데이터를 추가, 수정 또는 삭제할 때 사용된다.
• 캐시(Cache) - 데이터를 캐싱하여 동일한 요청이 다시 수행될 때 서버로부터 데이터를 다시 가져오지 않고 캐시된 데이터를 사용할 수 있다. 
• 인피니트 스크롤링(Infinite Scrolling) - 사용자가 스크롤할 때 추가 데이터를 동적으로 로드하여 페이지를 계속 확장하는 기능이다. (무한스크롤 구현)
• 서버 사이드 렌더링(Server Side Rendering, SSR) - 서버에서 데이터를 미리 가져올 수 있다. 
• 최적화(Optimizations) - 데이터를 효율적으로 가져오고 관리하기 위한 다양한 최적화 기능을 제공한다. 

 

리액트 쿼리 장점

• 단순성 - 간단하고 직관적인 API를 제공하여 사용자가 쉽게 데이터를 가져오고 관리할 수 있게 한다. 
• 유연성 - 다양한 데이터 가져오기 및 관리를 하기위한 유연성을 제공한다. 
• 성능 - 캐싱 및 최적화 기능을 통해 성능을 향상시킨다.
• 상태 - 가져온 데이터의 상태 관리를 통해 컴포넌트가 데이터의 상태 변화에 대응할 수 있도록 한다.  

 

리액트쿼리 사용하기

설치

npm i @tanstack/react-query
pnpm add @tanstack/react-query
yarn add @tanstack/react-query

 

기본설정

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import Todos from './pages/Todos'

const queryClient = new QueryClient()

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Todos />
    </QueryClientProvider>
  )
}

• queryClient를 사용해 각종 상태를 저장하고 부가 기능을 제공
• QueryClientProvider로 감싸서 사용

 

useQuery

리액트쿼리에서 useQuery Hook은 HTTP 메서드에서 GET 요청과 같이 서버에 저장되어 있는 상태, 즉 데이터를 가져올 때 사용한다. 

 

function Todos() {
  const { isPending, isError, data, error } = useQuery({
    queryKey: ['todos'],
    queryFn: fetchTodoList,
  })

  if (isPending) {
    return <span>Loading...</span>
  }

  if (isError) {
    return <span>Error: {error.message}</span>
  }

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

• queryKey  
  • Query 요청에 대한 응답 데이터를 캐시할 때 사용할 Unique Key (✨필수)
  • useQuery Hook은 요청마다 구분되는 고유한 key를 필요로 하는데 리액트쿼리는 이 queryKey로 서버 상태를 로컬에 캐시하고 관리
• queryFn 
  • Query 요청을 수행하기 위한 Promise를 리턴하는 함수 (✨필수)

 

💡 만약 함수의 queryKey가 변수에 의존하는 경우에는 어떻게 할까? 

function Todos({ todoId }) {
  const result = useQuery({
    queryKey: ['todos', todoId],
    queryFn: () => fetchTodoById(todoId),
  })
}

• Todos 컴포넌트는 각각의 아이템이 가지고 있는 todoId라는 props을 받고 useQuery를 사용해서 해당 todoId의 아이템을 가져온다. 
• 이때 queryKey는 쿼리를 고유하게 식별하는 문자열 배열이 포함되는데 위와 같이 'todos'는 쿼리의 종류나 데이터 유형을 식별하는 문자열이고 todoId는 각 아이템을 식별하는 변수이다. 
• queryKey에 변수가 포함되면서 변수의 데이터를 캐시하고, 변경될 때마다 자동으로 다시 가져오게 된다. 

 

 

📌

카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유