부족한 개발자는 글을 눈으로만 읽어서는 중요한 지식을 머리에 남길 수 없기에
react-query 공식 문서의 내용 중 중요해 보이는 것들을 번역하며 정리하겠습니다.
의역 많아요!! 하지만 여러분들이 읽기에 정확한 번역보단 읽기 편한 번역이 좋지 않을까요??

🌟 메인 페이지

리액트를 위한 강력한 데이터 동기화

React와 React Native에서 전역 상태 변경 없이 데이터를 가져오고 캐싱하고 업데이트 하세요!

1. 선언적이면서 자동화 된 특징
   • 손으로 작성하는 데이터 페칭 로직은 이제 그만
   • react query에게 어디서 데이터를 가져오고 얼마나 최신의 데이터가 필요한지만 말하세요
   • 별다른 설정 없이도 나머지 대부분을 우리가 처리해줄게요
2. 간단하고 친숙한 특징
   • 당신이 promise만 다룰 수 있다면 당신은 이미 react-query를 마스터했다고 할 수 있습니다
   • 우리를 사용할 땐 글로벌 상태 관리나 리듀서 같이 복잡한 설정이 필요 없어요
   • 데이터를 처리할(그리고 에러를 처리할) 함수만 던져주세요
3. 다양한 조작이 가능해 강력한 특징
   • 쿼리의 모든 observer 객체마다 특별한 설정을 추가할 수 있어요
   • 강력한 개발자 도구 등이 있기에 리액트 쿼리와 함께라면 데이터 조작은 식은 죽 먹기라구요!
   • 그렇다고 너무 걱정은 마세요. 이런 것들은 다 우리가 이미 기본 세팅을 완료해두었으니까요!

공식 리액트 쿼리 강좌도 있어요! 링크

후원사 목록

적은 코드와 드문 희귀 케이스

• 복잡한 거 이거 저거 다 적을 필요가 없어요!
• 일단 한번 써보세요
• 얼마나 코드가 적어질 수 있는지 깜짝 놀라실 겁니다.

예제코드 SandBox

리액트 쿼리 하나로 모든 기능이 따라옵니다

• (다양한 기능들..)
• 병렬 쿼리 기능
• SSR 지원

✅ Docs 탭 (시작하기 - Getting Started)

개괄

개발 동기

• 리액트는 사실 정식으로 지원되는 데이터 fetching 방식이 없었다
• 그래서 많은 개발자들이 자기 만의 방식으로 개발하거나 상태 관리 라이브러리를 사용해야만 했다.
• 그런 상태 관리 라이브러리들이 대부분 훌륭하긴 했지만, 부족한 점도 많았다.
• 우선 클라이언트의 상태는 서버 상태와 근본적으로 구별된다는 점이 가장 큰 문제였다.
• 어떻게 어떻게 서버의 상태 관리를 컨트롤 할 수 있게 되었다 하더라도 더 큰 문제들이 많이 있을 것이다.
• 만약 이런 문제들이 별로 대단하게 느껴지지 않는다면, 당신은 분명히 누구나가 인정하는 킹왕짱 개발자일 것이다.
• 그러나 대부분의 사람들에게 이는 대단히 어려운 문제이다.
• 리액트 쿼리는 서버 상태 관리를 위한 대단히 훌륭한 최고의 라이브러리이다.

말은 됐고, 예제 코드 먼저 보여줄게!

 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>
   )
 }

설치

• yarn add react-query
• 최소 요구 조건 react v 16.8+

빠른 실행 (quick start)

 import {
   useQuery,
   useMutation,
   useQueryClient,
   QueryClient,
   QueryClientProvider,
 } from 'react-query'
 import { getTodos, postTodo } from '../my-api'
 
 // Create a client
 const queryClient = new QueryClient()
 
 function App() {
   return (
     // Provide the client to your App
     <QueryClientProvider client={queryClient}>
       <Todos />
     </QueryClientProvider>
   )
 }
 
 function Todos() {
   // Access the client
   const queryClient = useQueryClient()
 
   // Queries
   const query = useQuery('todos', getTodos)
 
   // Mutations
   const mutation = useMutation(postTodo, {
     onSuccess: () => {
       // Invalidate and refetch
       queryClient.invalidateQueries('todos')
     },
   })
 
   return (
     <div>
       <ul>
         {query.data.map(todo => (
           <li key={todo.id}>{todo.title}</li>
         ))}
       </ul>
 
       <button
         onClick={() => {
           mutation.mutate({
             id: Date.now(),
             title: 'Do Laundry',
           })
         }}
       >
         Add Todo
       </button>
     </div>
   )
 }
 
 render(<App />, document.getElementById('root'))

개발 도구

• 우리가 진짜 좋은 개발 도구 만들어 놨다구!
• 근데 아직 react native 용은 없어ㅠ(22년 4월 25일 기준)
• import { ReactQueryDevtools } from 'react-query/devtools'
• 리액트 쿼리 개발도구는 process.env.NODE_ENV === 'development'일때만 번들링 되니까 따로 걱정 말라고~
• 'Floating Mode'라고 해서 클라이언트 페이지에 띄워두고 쓸 수도 있어~

import { ReactQueryDevtools } from 'react-query/devtools'
 
 function App() {
   return (
     <QueryClientProvider client={queryClient}>
       {/* The rest of your application */}
       <ReactQueryDevtools initialIsOpen={false} />
     </QueryClientProvider>
   )
 }

• 'Embedded Mode'로 하면 페이지에 정식 컴포넌트로 개발도구를 넣을 수도 있어

 import { ReactQueryDevtoolsPanel } from 'react-query/devtools'
 
 function App() {
   return (
     <QueryClientProvider client={queryClient}>
       {/* The rest of your application */}
       <ReactQueryDevtoolsPanel style={styles} className={className} />
     </QueryClientProvider>
   )
 }

다른 라이브러리들과의 비교 (SWR, Apollo 등)

• 자세한 건 직접 들어가 보세요~
• 링크

타입스크립트

• 우리꺼 타입스크립트 지원합니다
• 다만 최소한 3.8 버전보다 높아야 합니다
• 그리고 리턴 값에 대해서도 잘 적용하려면 4.1 보다 높아야 합니다
• 타입 변경은 patch로 취급되어 계속 자동으로 업데이트 됩니다. (Semver 기준)
• 그래서 우리는 리액트 쿼리 패키지를 고정된 버전으로 사용하시기를 추천드려요
• 커스텀 훅 만들 때는 아래처럼..

 function useGroups() {
   return useQuery<Group[], Error>('groups', fetchGroups)
 }

GraphQL

• 사실 우리는 어떠한 비동기 데이터 Fetching 클라이언트와도 같이 쓸 수 있어요!
• 그런데 주의할 점이 하나 있어요
• 우리는 normalized caching은 지원하지 않아요.
• 대부분의 경우에 필요가 없는 기능이지만 만약 당신에게는 이 기능이 꼭 필요하다면 주의하세요

React Native

• 3rd party Flipper plugin을 써보세요 링크
• 온라인 상태 관리

 import NetInfo from '@react-native-community/netinfo'
 import { onlineManager } from 'react-query'
 
 onlineManager.setEventListener(setOnline => {
   return NetInfo.addEventListener(state => {
     setOnline(state.isConnected)
   })
 })

• 앱 포커스 때 Refetch

 import { focusManager } from 'react-query'
 import useAppState from 'react-native-appstate-hook'
 
 function onAppStateChange(status: AppStateStatus) {
   if (Platform.OS !== 'web') {
     focusManager.setFocused(status === 'active')
   }
 }
 
 useAppState({
   onChange: onAppStateChange,
 })

• 스크린 포커스 때 새로고침

 import React from 'react'
 import { useFocusEffect } from '@react-navigation/native'
 
 export function useRefreshOnFocus<T>(refetch: () => Promise<T>) {
   const firstTimeRef = React.useRef(true)
 
   useFocusEffect(
     React.useCallback(() => {
       if (firstTimeRef.current) {
          firstTimeRef.current = false;
          return;
       }
 
       refetch()
     }, [refetch])
   )
 }