[React] React Query

등장 배경

• Redux 등을 사용한 기존의 전역적 비동기 상태 관리(서버 상태 관리)의 어려움, 복잡함을 극복하고자 등장
• Redux는 비동기 통신 상태에 따른 작업을 위해서 pending 액션, success 액션 등을 전부 만들어줘야 한다.

서버 상태 관리란
서버에 저장된 데이터들과의 동기화, 즉 CRUD를 의미한다

설치

$ npm i @tanstack/react-query

사용법

세팅

Provider를 만든다

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

const queryClient = new QueryClient()

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

Devtools

$ npm i @tanstack/react-query-devtools

(생략)

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

사용

const obj1 = useQuery(options)
const obj2 = useMutation(options)

안에 options 정보를 넣어주면 객체가 리턴되는 형태이다.
options 안에 들어갈 것과 obj 안에 들어가는 것은 정말 다양하다.
그 다양한, 복잡하게 처리해야 할 모든 것들을 tanstack query가 가운데에서 알아서 해주기 때문에 의미가 있는 것이다.

사용 (1) useQuery

데이터를 읽기 위해 사용하는 훅이다.

• queryKey, queryFn을 넣어준다

function Example() {
  const { isPending, error, data } = useQuery({
    queryKey: ['repoData'],
    queryFn: () =>
      fetch('https://api.github.com/repos/TanStack/query').then((res) =>
        res.json(),
      ),
  })

  if (isPending) return 'Loading...'

  if (error) return 'An error has occurred: ' + error.message

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.description}</p>
      <strong>👀 {data.subscribers_count}</strong>{' '}
      <strong>✨ {data.stargazers_count}</strong>{' '}
      <strong>🍴 {data.forks_count}</strong>
    </div>
  )
}

사용 (2) useMutation

데이터를 조작하기 위해 사용 (Create, Update, Delete)

• mutationFn을 넣어준다

const { mutate: deleteExpense } = useMutation({
  mutationFn: () => api.expense.deleteExpense(expenseId),
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ["expense"] });
    goHome();
  },
});