React Query

출처

개발동기

React앱에는 data를 fetching하는 전형적인 방법이 존재하지 않아 개발자들이 다들 자기만의 방법으로 data를 fetching해 왔습니다. 그들은 React hooks의 state와 effect를 이용하여 하거나 좀 더 일반적인 목적의 상태관리 라이브러리를 이용하여 비동기데이터를 저장하였습니다.
React query는 가장 좋은 server 상태를 관리할 수 잇는 라이브러리 입니다. 이것은 아주 놀랍도록 잘 동작합니다. 정해진 틀에 따라, zero config 그리고 나의 앱이 크기에 따라 내마음대로 커스텀 가능하게 말이죠.

서두는 여기까지 하고 일단 코드를 봅시다.

import { QueryClient, QueryClientProvider, useQuery } from 'react-query'
 
const queryClient = new QueryClient()
 
export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Example />
 	</QueryClientProvider>
  )
}

function Example() {
  const { isLoading, error, data } = useQuery('repoData', () =>         
    fetch('https://api.github.com/repos/tannerlinsley/react-query')
    .then(res =>res.json()))

  if (isLoading) 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>
  )
}

코드를 보면 매우 간단하게 isLoading, error, data 처리의 변수를 useQuery를 통해 받아와서 간단하게 분기하여서 깔끔하게 코드를 작성 할 수 있습니다.

기본적으로 알고 있어야할 중요한 것들.

1. useQuery와 useInfiniteQuery는 기본적으로 캐쉬된 데이터를 신선하지 않다고 판단합니다.
   이 동작을 바꾸려면 staleTime에 옵션을 주어서 refetch의 빈도를 낮출 수 있습니다.

2. 개발을 하다보면 내가 예측하지 않은 refetch를 보게 될것 입니다. 그 이유는 내가 window그리고 react query가 refetchOnWindow에 따라 동작하기 때문입니다. 개발하면서 이것은 생각보다 더 자주 보일 것이고 특히 dev tools와 너의 앱도 fetch할 것이기 때문에 꼭 인지하고 있어야 합니다.

   이것을 함수적으로 해결하기 위해서는 refetchOnMoust, refetchOnWindowFocus, refetchOnReconnect 그리고 refetchInterval을 옵션으로 사용하면 됩니다.

3. useQuery그리고 useInfiniteQuery 혹은 query observers로 더 이상 새로 할당되지 않는 query results는 inactive로 라벨이 붙고 저장된 캐쉬를 사용합니다.

   inactive라벨이 붙은 쿼리는 기본값으로 5분후에 garbage collected가 됩니다.
   이 값을 변경하기 위해서는 cacheTime을 사용하여 변경할 수 있습니다.

4. react query는 api 요청에 실패할 경우 조용히 3번 더 요청을 합니다. 그 요청이 모두 실패할 경우 error 메시지를 보여줍니다.

   retry를 통해 몇 번더 요청할지, retryDelay를 통해 얼마의 텀을 두고 재요청을 할지 설정할 수 있습니다.

5. query results는 기본적으로 구조적으로 공유되여 데이터가 실제로 변했는지 감지합니다 혹은 변하지 않았다면 데이터 참조를 변경하지 않습니다. useCallback과 useMemo를 함께 고려하여 더 좋은 변수 안정화를 도울 수 있습니다. 이 컨셉이 좀 이상하게 들리더라도 걱정하기 마새요 99.9%의 확률로 이것이 안되게끔 제어할 필요가 없을것이고 이것은 너의 앱의 퍼포먼스를 zero-cost로 향상시킬 것입니다.

또 사용하면 좋은 것.

1. React Query dev tools
   데브툴즈를 통해 빠르게 디버깅할 수 있습니다.

간단하게 기본적인 것들만 Docs에서 공부하면서 해석해보았습니다. 영알못이라 해석이 정확하지 않을 수 있습니다. 개발하면서 본격적으로 사용하면서 더 깊이 공부하게 되면 심화과정으로다가 또 포스팅 하도록 하겠습니다.