react-query 이전에 사용한 Redux 의 경험

이전에 개인적으로, 그리고 현업에서도 사용해본 전역적으로 상태관리를 도와주는 라이브러리 Redux.
러닝커브가 크지만 그만큼 적응하면 쉽게 활용할 수 있으며 redux-saga, redux-thunk 와 같은 부족한 부분을 채워주는 추가적인 라이브러리도 있다.

Redux가 작동하는 방식은 Action -> Dispatcher -> Reducer -> Store 과 같이 단방향이다.
여기서 Redux의 작동방식에 대한 철학은 3가지가 있다.

https://redux.js.org/understanding/thinking-in-redux/three-principles

1. Single Source of truth

전역적인 상태관리를 오직 한가지의 Store 안에 저장된다. 하나의 Store는 어플리케이션을 디버깅하거나 흐름을 파악하는데 쉽게 만들어 준다.

2. State is read-only

Store안의 State는 오직 read-only고 Action에 의해서만 변경된다. 이것은 Redux의 단방향 흐름의 방식과 일치한다고 할 수 있다.

이러한 철학은 mutation 이나 async의 직접적인 상태변화를 막는다. 대신 상태를 변화시킬 것을 Action에 전달할 뿐이다. 또한 액션들이 객체이므로 가독성이 좋고, 직렬화되어 재사용성이 좋다고 할 수 있다.

3. Changes are made with pure functions

상태의 변화는 순수한 함수들로 만들어진다. 이를 변화시키는 것은 순수함수인 Reducer함수다.

순수 함수란
1. 동일한 인자가 들어오면 항상 같은 값을 리턴하는 함수
2. 외부의 상태에 영향(Side Effect, 부수 효과)을 주지 않는 함수

Reducer 이전의 State와 Action을 인자로 받고, 변화된 상태를 리턴한다. 여기서 중요한 점은 이전의 상태를 변화시키는 것 대신에 새로운 State 를 spread를 사용하여 새로운 상태를 만들어내는 것이다.

react-query를 사용하는 이유 및 개요

우리는 서버에서 데이터를 가져오면 진실한 정보(Source of truth)의 원천인 Store에 넣어놓고, 그 데이터를 업데이트 해가면서 사용했다. 하지만 여기서 Store는 정말로 진실한 정보의 원천일까? 그렇지 않다고 생각한다.

이는 이미 서버로부터 받은 데이터의 복사본일 뿐이다. 이미 서버로부터 받은 응답객체는 최신(fresh)한 상태가 아니라는 것이다. 그렇다고 해서 매번 매초 불필요한 데이터 요청을 보낼수도 없다.

이를 극복하기 위해서 전부터 사용해온 HTTP 통신의 Cache를 사용할 수 있다. 갱신되지 않았다는 가정하에 반복해서 받아올 필요가 없으므로 브라우저 캐시나 CDN등의 저장공간을 사용해 응답속도를 최적화 해왔다.

하지만 react-query를 사용하게 되면 주기적으로 서버 데이터의 상태들을 체크하며 Cache 방식을 가지고 있어 불필요하게 데이터를 받아올 필요가 없이 최적화가 가능하다.

react-query의 서버 데이터 상태 분류

• Stale: 서버 / 클라이언트의 정보가 신선하지 않은 상태, 즉 동일함을 보장할 수 없는 상태
• Fresh: 서버 / 클라이언트의 정보가 동일하다는 것이 보장됨, 하지만 default 설정으로는 staleTime이 0 이므로 보장되기는 어려움
• Fetching: 데이터를 서버에서 가져오는 중

react-query는 서버 상태를 관리하는 레이어 전체를 추상화 시켜 개발자가 관리하는 앱 내의 상태에서 서버 상태를 제외한 UI 상태 에만 집중하여 개발할 수 있도록 했다.

그렇다면 비동기 처리를 위한 thunk, saga 같은 미들웨어 라이브러리도 불필요 해지고, 동기적인 UI 상태만 관리할 거라면 redux를 쓸 필요가 사라질 경우가 생기는 것이다.

react-query 설치 및 devtools

npm i react-query

react-query 자체적으로 type definition을 지원하므로 @types 를 붙일 필요는 없다.
위의 설치는 v3 버전이고 가장 최신의 버전은 v4 버전이며

npm i @tanstack/react-query

@tanstack 을 붙여준다. 하지만 차후 포스트에서는 v3 기준으로 할 것이며 v4와 변경점은 크게 없으나 기능적인 부분에서 다른 차이점이 있기 때문에 따로 포스트할 예정이다.

또한 Redux-toolkit 과 같이 devtools를 지원한다.

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

따로 설치가 필요없이 선언만 해주면 브라우저 아래에 UI가 생긴다.