React-Query는 React 앱에서 비동기 로직을 쉽게 다루게 해주는 라이브러리입니다. 다만 아직 한국어 자료는 많이 없는것 같아 React-Query를 사용하시는 데 도움이 되었으면 하는 마음에서 몇 편의 내용으로 나눠 정리를 하게 되었습니다.

포스팅의 내용은 모두 React Query Docs의 내용과 제 사견으로 이루어져 있습니다. 이해하기에 부족하거나 빠진 내용이 있을 수 있을 수 있으므로 더 자세한 내용을 확인하시고 싶으시다면 공식 Doc 을 참고해 주시면 감사하겠습니다.

React Query

React Query가 보통은 누락된 데이터를 가져오는 라이브러리라고 생각하겠지만, React Query는 서버 데이터에 대한 다음과 같은 일을 수행합니다. fetching (가져오기) caching (캐싱) synchronizing and updating (동기화 및 업데이트)

동기

기본적으로 React 애플리케이션은 내부 구성 요소에서 데이터를 가져오거나 업데이트하는 방법을 제공하지 않으므로 개발자가 직접 데이터를 가져오는 방법을 구축해야합니다. 일반적으로 React hooks를 사용하여 컴포넌트 기반의 상태와 효과를 함께 결합하거나 범용적인 상태 관리 라이브러리를 사용하여 앱 전체에 비동기 데이터를 저장 및 제공하는 것을 의미합니다.

대부분의 기존 상태 관리 라이브러리는 클라이언트 상태 작업에 적합하지만, 비동기 또는 서버 상태 작업에는 그다지 뛰어나지 않습니다. 이것은 서버의 상태 완전히 다르기 때문입니다.

서버 상태:

• 사용자가 제어 또는 소유하지 않는 위치에 원격으로 유지된다.
• 가져오기(fetching) 및 업데이트(updating)를 위한 비동기 API 필요하다.
• 공유 소유권을 의미하며 사용자가 모르는 사이에 다른 사람에 의해 변경될 수 있다.
• 주의하지 않는다면 잠재적으로 애플리케이션에서 오래된(out of data) 상태가 될 수 있다.
  

애플리케이션에서 서버 상태의 특성을 파악하면 다음과 같은 더 많은 일을 할 수 있다.

• 캐싱 (프로그래밍에서 가장 어려운 일)
• 동일한 데이터에 대한 여러 요청을 단일 요청으로 중복 제거
• 백그라운드에서 오래된 데이터 업데이트
• 데이터가 “오래된(out of data)” 시기 파악
• 가능한 한 빨리 데이터에 대한 업데이트 반영
• 페이지 매김 및 지연로드 데이터와 같은 성능 최적화
• 서버 상태의 메모리 및 가지비 수집 관리
• 구조적 공유로 쿼리 결과 메모하기(기억하기)
  
  

React Query는 서버 상태를 관리하기위한 최고의 라이브러리중 하나입니다. 특별한 구성없이 바로 사용할 수 있으며, 애플리케이션내에서 특별하게 커스터마이징을 할 수 있습니다.

React Query를 사용하면 서버 상태의 까다로운 문제와 장애물을 없애고 극복하며, 앱 데이터가 제어를 시작하기 전에 제어 할 수 있습니다.

좀 더 기술적인 측면에서 React Query는 다음과 같은 가능성이 있습니다.

• 애플리케이션에서 여러줄의 복잡하고 잘못된 코드를 제거하고 몇 줄의 React Query 로직으로 교체할 수 있도록 도와준다.
• 새로운 서버 상태 데이터 소스를 연결하는 것에 대해 걱정하지 않고, 애플리케이션을 보다 쉽게 유지 관리하고 새로운 기능을 구축하기 쉽게 만든다.
• 애플리케이션이 그 어느때보다 더 빠르고 반응이 빨라지도록하여 최종 사용자에게 직접적인 영향을 미친다.
• 대역폭을 절약하고 메모리 성능을 높일 수 있다.
  
  
  

위에서 React-Query에 대해 충분히? 소개한것 같습니다. 그럼 아래 코드를 보세요!

아래 예제에서 React Query GitHub 프로젝트 자체에 대한 GitHub 통계를 가져오는데 사용되는 가장 기본적이고 간단한 형태의 React Query 코드중 하나입니다.

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

설치

여러분은 NPM, Yarn 또는 good ol’ <script> unpkg.com을 통해 React Query를 설치할 수 있습니다.

NPM

$ npm i react-query
# or
$ yarn add react-query

React Query는 React v16.8 +와 호환되며 ReactDOM 및 React Native와 함께 작동합니다.

CDN

모듈 번들로 또는 패키지 관리자를 사용하지 않는 것은 unpkg.com CDN 에서 호스팅되는 글로벌 (“UMD”) 빌드도 있습니다. <script> HTML 파일 하단에 다음 태그를 추가하기만 하면 됩니다.

<script src="https://unpkg.com/react-query/dist/react-query.production.min.js"></script>

이것을 추가하면 window.ReactQuery개체 및 내보내기에 액세스 할 수 있습니다.

빠른 시작

아래 예제에서는 React Query의 3가지 핵심 개념을 간략하게 설명합니다.

• Queries (쿼리)
• Mutations (변이)
• Query Invalidation (쿼리 무효화)

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 Query의 핵심 기능의 대부분을 구성합니다. 다음 섹션에서 이러한 각 핵심 개념에 대해 설명하겠습니다.

DevTools

React Query는 전용 개발 도구와 함께 제공됩니다.

React Query를 시작할 때 이러한 devTools가 필요합니다. 그들은 React Query의 모든 내부 작업을 시각화하는 데 도움이되며 문제가 발생할 경우 디버깅 시간을 절약 할 수 있습니다.

DevTools 가져오기

devtools는 react-query/devtools 패키지에 포함되어 있습니다. 추가로 설치할 필요가 없습니다.

import { ReactQueryDevtools } from 'react-query/devtools'

기본적으로 React Query Devtools 는 process.env.NODE===’production’ 일때 프로덕션 번들에 포함되지 않습니다. 따라서 프로덕션 빌드 중에 devtools를 제외시키는 것에 대해 걱정할 필요가 없습니다.

Floating Mode

Floating Mode는 개발 도구를 앱에 고정된 플로팅 요소로 마운트하고, 개발 도구를 표시하거나 숨기도록 화면 구석에 토글을 제공합니다. 이 토글 상태는 다시 로드되는 동안 로컬 저장소에 저장되고 기억됩니다.

다음 코드를 리액트 앱에서 최대한 높은 위치에 정의하세요. 페이지 루트에 가까울수록 더 잘 작동합니다.

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

Options

initialIsOpen: Boolean

• 개발 도구를 기본적으로 열도록 하려면 이 값을 true 로 설정합니다.

panelProps: PropsObject

• 패널에 props를 추가할 수 있습니다. 예를들어 className, style (기본 스타일 병합 및 재정의) 등을 추가할 수 있습니다.

closeButtonProps: PropsObject

• 닫기 버튼에 props를 추가할 수 있습니다. 예를들어 className, style (기본 스타일 병합 및 재정의), 클릭 시(기본 핸들러 확장)등을 추가할 수 있습니다.

toggleButtonProps: PropsObject

• 토글 버튼에 props를 추가할 수 있습니다. 예를들어 className, style (기본 스타일 병합 및 재정의), 클릭 시(기본 핸들러 확장)등을 추가할 수 있습니다.

position?: "top-left" | "top-right" | "bottom-left" | "bottom-right"

• 기본값은 bottom-left 입니다.
• React Query 로고가 개발 도구 패널을 열고 닫을 위치입니다.
  
  
  
  

Embedded Mode

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

Options

이 옵션을 사용하여 개발 도구의 스타일을 지정할 수 있습니다.

styles: StyleObject

• 인라인 스타일로 구성 요소의 스타일을 지정하는데 사용되는 표준 React 스타일 개체

className: string

• 클래스가 있는 구성요소의 스타일을 지정하는데 사용되는 표준 React className 속성

다음편에 계속..