React Query의 특징

• 상태를 server state와 client state의 두가지 개념으로 나누어 바라봅니다.
• react-query 는 server state를 관리하는 것을 목적으로 합니다. 즉, client state에서 캐시 데이터를 관리하는데 사용되는 보일러 플레이트 코드들을 몇 줄의 코드로 대체하여 global client state에서 server state를 들어내는 데 효과적입니다.
• 5KB의 용량으로 2개의 hook과 1개의 유틸리티를 제공하며 다양한 설정값을 보내는 것만으로 사용이 가능하도록 준비가 되었습니다.
• 전역 상태를 쓰지 않고 리액트 내부 state와 context를 사용하여 서버 상태를 관리합니다. 즉, server state를 리액트다운 방식으로 처리하기 위한 라이브러리입니다.

React Query에서 제공하는 것

<aside> 📦 - 캐싱

• 중복 요청 제거
• 백그라운드 상태에서의 업데이트
• 데이터의 유효시간을 설정하고 유효 시간이 지난 것을 아는 것
• 병렬적 요청 수행
• GC(가비지 컬렉션, Garbage Collection)
• 페이지 네이션, lazy loading
• 편리한 디버깅 툴
• SSR, Next.js 지원

</aside>

어떻게 이러한 기능들을 사용하는지 핵심 개념 위주로 살펴보겠습니다.

1. QueryClient

*QueryClient는 쿼리와 쿼리 상태를 관리하는 메소드들을 포함한 객체입니다. 이를 context를 통해 앱의 상단에 위치시키면 사용 준비가 완료됩니다.*

import { QueryClient, QueryClientProvider, useQuery } from 'react-query'

const queryClient = new QueryClient()

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Example />
    </QueryClientProvider>
  )
}

2. Query Keys

*useQuery를 통해 컴포넌트 어디에서든 쿼리를 정의할수 있습니다. 이렇게 정의된 쿼리는 병렬적으로 서버에 요청됩니다.*

*query keys는 배열의 형태로 Promise 비동기 함수에 전달됩니다. 첫번째는 query string으로 유니크한 문자열로 제공해야 하며 이는 쿼리 데이터를 판별하는데 사용됩니다. 뒤에 살펴보겠지만 메소드에 query string을 제공하는 것만으로 많은 일들을 할 수 있습니다.*

배열의 형태로 제공되는 option은 옵션으로 제공이 가능하며 문자열, 객체 모두 가능합니다. 해당 인자를 받아 비동기 요청시 전달할 수 있습니다. (ex. api 요청 path 전달, ‘/user’)

여기서 todoList로 정의한 쿼리는 쿼리에 대한 모든 상태를 포함하는 객체입니다. isLoading, isError, data, error등이 있습니다.

*// 방법(1): useQuery(['query string', options], queryFn)*
const todoList = useQuery('todos', fetchTodoList)
const todoList = useQuery(['todos', options], fetchTodoList)

function fetchTodoList({ queryKey }){
  const [_key, options ] = queryKey
  return axios.post("url", {options})
}

*// 방법(2): 객체로 제공할 수도 있습니다.*
useQuery({
  queryKey: ['todo', 7],
  queryFn: fetchTodo,
  ...config,
})