React-Query가 뭘까?

프로젝트 도중 리엑트 리덕스만 알고 있던 내가 중간발표 이후 리엑트 상태관리의 다양한 툴에 대해서 알게 되었다. 그 중 하나가 리액트 쿼리였는데 대체 이게 뭔지 항해 수료 후 공부해보자 해서 여러 레퍼런스들을 찾아봤다.

1. 정의

• 내가 이해한 것은 뭔가 상태를 전역으로만 나눠 놓고 보는게 아닌, 클라이언트 상태와 서버 상태로 나눠서 관리해보자 하는 취지에서 나온 것으로 그 유래가 그렇다고 한다. 레퍼런스들을 보면 다음과 같다.

"React Query는 데이터 Fetching, 캐싱, 동기화, 서버 쪽 데이터 업데이트 등을 쉽게 만들어 주는 React 라이브러리입니다. 기존에 Redux, Mobx, Recoil과 같은 다양하고 훌륭한 상태 관리 라이브러리들이 있긴 하지만, 클라이언트 쪽의 데이터들을 관리하기에 적합할 순 있어도 서버 쪽의 데이터들을 관리하기에는 적합하지 않은 점들이 있어서 등장하게 되었습니다.

예를 들어, 관리자 화면에서 동시에 두 명의 관리자가 같은 페이지를 바라보고 있는 상황에서 한 관리자가 유저의 데이터를 변경하면, 다른 관리자도 그 유저의 변경된 데이터를 바라볼 수 있어야 합니다. 이러한 유저의 데이터는 클라이언트 쪽보다는 서버 쪽에 좀 더 적합하다고 볼 수 있습니다."

카카오테크 참고 링크

즉 데이터 가져오기, 캐싱, 동기화, 서버 쪽 데이터 업데이트를 조금 더 간편하게 할 수 있는 라이브러리로 서버 쪽 데이터를 조금 더 간단하게 다루기 위해 나온 상태 관리 라이브러리라고 할 수 있다.

2. 쓰는 이유

위 블로그를 참고하면 다음과 같다고 한다.

1. 프로젝트 구조가 기존보다 단순해졌습니다.
2. 캐싱 처리가 더 간단해졌습니다.
3. 직접 만들어서 사용했던 기타 기능들을 옵션으로 지원합니다.
4. Redux와 Redux-Saga를 사용할 때는 Success, Failure 값을 useEffect의 deps로 전달해서 처리해야 하는 과정이 필요했었는데, 이 과정을 onSuccess와 onError로 간단하게 처리할 수 있었습니다.

내가 실제로 프로젝트에 녹여봤다면 어땠을까? 가정해보자

나는 리덕스를 이용해서 상태관리를 했다. 전역 상태관리를 하다 보니 규모가 커지고 액션, 디스패치 등 다양한 루트를 거쳐야만 했다. 하지만 리액트-쿼리를 사용했다면 이 과정이 조금은 더 단순해지지 않았을까 싶다. 코드 사용량도 줄고 말이다.

3. 참고 코드로 이해하는 리액트 쿼리

import { QueryClient, QueryClientProvider, useQuery } from 'react-query'
// 설치는 yarn, npm 모두 가능
 
 const queryClient = new QueryClient()
 
 // 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()
       // 아마 여기서 데이터가 fetching 되는 듯
     )
   )
 
   if (isLoading) return 'Loading...'
 
   if (error) return 'An error has occurred: ' + error.message
   // 로딩과 에러처리
 
   return (
     // 여기는 jsx 문으로 동일
     <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>
   )
 }

4. 소회

• todolist 등을 실제로 만들어봐야 알겠지만 (아직 예시가 없어서 못 해 봄) 타입스크립트와 기타 등등 다양한 것들과도 잘 어울린다고 한다.
• 기회가 되면 꼭 사용해보고 싶은 라이브러리다.