React - React-Query

발췌 : https://react-query-v3.tanstack.com/overview

 

서론

 

React Query는 React에 빠진 기능 중 하나인 data-fetching을 위한 라이브러리로 자주 설명됩니다.

 

더 기술적으로 설명하자면, React 앱 내부의 fetching, cashing, synchronizing, updating server state를 수월하게 해줍니다

 

개발동기

 

React 앱은 컴포넌트로부터 데이터를 업데이트하거나 fetch하는데 권장되는 방법이 없습니다. 그래서 개발자들은 알아서 데이터를 fetch하는 방법을 만들어내 사용해왔습니다.

 

이 말은 주로 React hook을 이용해 컴포넌트 기반 state와 effect를 합쳐 사용해왔거나 앱을 위해 비동기적인 데이터를 저장하고 제공하기 위해 일반적인 state 관리 라이브러리를 사용해 왔다는 뜻입니다.

 

 

전통적인 state 관리 라이브러리들은 클라이언트 state를 다루는데 매우 적합했지만, 비동기적인 state 혹은 server state를 다루기엔 매우 부적합했습니다. Server state는 완전히 다르기 때문입니다.

 

Server state는

 

• 본인이 소유하지 못하고, 통제하지 못하는 위치에 유지됨
• fetch와 업데이트를 위해 비동기적인 API가 필요
• 다양한 유저들과 공유되고 모르는 사이에 변경될 수 있음
• 앱 내부에서 만료될 수 있음

 

앱에서 사용되는 server state의 특성을 이해했다면 더 많은 어려움이 있음을 알 수 있습니다. 

 

예로,

 

• Caching ( 프로그래밍에서 하기 가장 어려운 일)
• 동일한 데이터를 요구하는 중복된 요청들을 하나의 요청으로 만드는 일
• 백그라운드에서 만료된 데이터 업데이트
• 데이터가 만료되는 시기 알아내기
• 가능한 빠르게 업데이트 반영
• Lazy loading 데이터, pagination(페이지네이션) 등과 같은 퍼포먼스 최적화
• server state 메모리 관리와 가비지 컬렉션
• structural sharing을 이용한 쿼리 결과 메모이징(중복 계산을 막기 위해 메모리에 계산 결과 저장하는 일)

 

React Query는 server state를 관리하는 라이브러리들중 의심할 여지없이 최고의 라이브러리입니다. 아무 설정 없이 설치 후 바로 사용 가능하고, 앱이 커지면서 원하는대로 사용자화 할 수 있습니다.

 

 

React Query는 server state에 관련된 어려운 과제들과 허들을 뛰어넘게 해주고 앱이 개발자를 통제하기 전에 개발자가 앱을 통제할 수 있도록 도와줍니다.

 

 

React 쿼리는 

 

• 앱의 복잡하고 난해한 코드를 React Query 로직을 따르는 간단한 코드로 교체 가능하게합니다
• 앱의 유지보수를 간편하게하고 새로운 server state 데이터 소스를 꼬이게 할 걱정없이 새 기능을 추가하게합니다
• 앱이 빨라지고 반응성을 높여 사용자 경험을 더 좋게합니다
• 잠재적으로 대역폭을 줄이고 메모리 퍼포먼스를 높입니다

 

 

< 예시 코드 >

 

아래의 코드는 가장 간단한 React Query 코드로 React Query Github 프로젝트를 위해 Github stat을 읽어오는 코드입니다

 

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