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를 통해 받아와서 간단하게 분기하여서 깔끔하게 코드를 작성 할 수 있습니다.
useQuery와 useInfiniteQuery는 기본적으로 캐쉬된 데이터를 신선하지 않다고 판단합니다.
이 동작을 바꾸려면 staleTime
에 옵션을 주어서 refetch의 빈도를 낮출 수 있습니다.
개발을 하다보면 내가 예측하지 않은 refetch를 보게 될것 입니다. 그 이유는 내가 window그리고 react query가 refetchOnWindow
에 따라 동작하기 때문입니다. 개발하면서 이것은 생각보다 더 자주 보일 것이고 특히 dev tools와 너의 앱도 fetch할 것이기 때문에 꼭 인지하고 있어야 합니다.
이것을 함수적으로 해결하기 위해서는 refetchOnMoust
, refetchOnWindowFocus
, refetchOnReconnect
그리고 refetchInterval
을 옵션으로 사용하면 됩니다.
useQuery그리고 useInfiniteQuery 혹은 query observers로 더 이상 새로 할당되지 않는 query results는 inactive
로 라벨이 붙고 저장된 캐쉬를 사용합니다.
inactive
라벨이 붙은 쿼리는 기본값으로 5분후에 garbage collected가 됩니다.
이 값을 변경하기 위해서는 cacheTime
을 사용하여 변경할 수 있습니다.
react query는 api 요청에 실패할 경우 조용히 3번 더 요청을 합니다. 그 요청이 모두 실패할 경우 error 메시지를 보여줍니다.
retry
를 통해 몇 번더 요청할지, retryDelay
를 통해 얼마의 텀을 두고 재요청을 할지 설정할 수 있습니다.
query results는 기본적으로 구조적으로 공유되여 데이터가 실제로 변했는지 감지합니다 혹은 변하지 않았다면 데이터 참조를 변경하지 않습니다. useCallback과 useMemo를 함께 고려하여 더 좋은 변수 안정화를 도울 수 있습니다. 이 컨셉이 좀 이상하게 들리더라도 걱정하기 마새요 99.9%의 확률로 이것이 안되게끔 제어할 필요가 없을것이고 이것은 너의 앱의 퍼포먼스를 zero-cost로 향상시킬 것입니다.
간단하게 기본적인 것들만 Docs에서 공부하면서 해석해보았습니다. 영알못이라 해석이 정확하지 않을 수 있습니다. 개발하면서 본격적으로 사용하면서 더 깊이 공부하게 되면 심화과정으로다가 또 포스팅 하도록 하겠습니다.