React Query 란 ?
패스트캠퍼스 x 야놀자 웹 프론트엔드 부트캠프 파이널 프로젝트를 준비중인데, 팀원 중 한 분이 상태관리로 React Query를 쓰는 것이 어떻겠냐고 하셔서 React Query가 무엇인지 공부하고 정리하고자 한다.
React Query 란 ?
공식 문서에 따르면, 아주 강력한 비동기 상태를 관리하는 툴이라고 한다.
그럼 이 상태가 무엇인지 알아보자.
상태(State) 란 ?
주어진 시간에 대한 시스템을 표현한 것
문자열, 배열, 객체 등 다양한 형태로 Application에 저장된 데이터
이를 프론트 개발자 입장에서 본다면,
페이지가 로드되거나 렌더링된 이후 사용자가 수행한 모든 동작에 대한 결과라 할 수 있다.
사용자가 액션을 취하면 그 액션에 따라 상태(state)가 바뀔거고 변경된 상태에 따라 View(웹페이지 화면)이 바뀜. 그러면 사용자가 바뀐 View를 보고 또 액션을 취함. 이 사이클을 관리하는 것이 State Management 임.
React Query 외의 다른 상태 관리 라이브러리는 ?
Redux, Zustand, Recoil 등이 있지만 리액트 쿼리가 이것들과 무엇이 다른지 알아보자.
공식문서에 따르면, 위 사진의 다른 상태 관리 라이브러리들은 비동기 및 서버 상태 관리에는 적합하지 않다.
그러면 이제 또 비동기 및 서버 상태란 무엇인지에 대한 의문이 들텐데, 무엇인지 알아보자.
서버 상태(server state) 란 ?
클라이언트에서 제어하지 않거나 소유하지 않은 위치에서 관리됨
fetching 및 updating 을 위해 비동기 API 필요
소유권이 공유되므로 사용자가 모르는 사이에 다른 사용자가 변경할 수 있음
주의하지 않으면 어플리케이션에서 'out of date' 상태가 될 수 있음
서버 상태들을 관리하다보면 필연적으로 발생하는 문제들이 있음
- 캐싱
- 같은 데이터 요청 중복 제거
- 언제 out of date 되는지 알아내기
- out of date 된 데이터 백그라운드에서 업데이트
- 최대한 빠르게 업데이트 반영
- pagination, lazy loading 등 성능 최적화
- 서버 상태의 메모리, garbage collection 관리
- structural sharing 으로 쿼리 결과 memoizing
이러한 여러 문제들에 대해, 리액트 쿼리 공식 문서에서는 '리액트 쿼리는 서버 상태를 관리하기 위한 가장 좋은 라이브러리 중 하나다' 라고 소개하고 있다.
리액트 쿼리와 캐싱
stale-while-revalidate 란 ?
react query 에 사용되는 캐싱 매커니즘
즉, 캐싱된 데이터를 사용자에게 제공하면서 비동기적으로 콘텐츠를 서버에 revalidate
그림으로 상세하게 살펴보자.
캐싱되지 않았을 경우 서버에 요청을 보내면, 개발자가 미리 설정한 로딩 스피거나 나오거나 아무것도 안나올 것이고 그 이후에,
패칭이 끝나면 새로운 데이터로 업데이트가 될 것이다.
근데, 만약에 리액트 쿼리를 써서 캐싱이 된 데이터를 쓸 겅우,
fecthing 을 하면 로딩 스피너가 나오지 않고 미리 캐싱된 데이터를 사용자에게 보여주고 fetching이 끝나면 새로운 데이터를 보여준다.
즉, 오래된 데이터가 데이터가 없는 것 보다는 낫다는 것이다.
Query 상태 흐름도
먼저 fetching 을 하면 데이터가 fresh 된 상태로 바뀜
그 이후에 staleTime에 따라, staleTime이 지나면 stale 상태로 바뀜
기본값은 0이고 예를 들어 3초라고 설정하면, 3초 후에 stale 상태가 됨(상한 상태, 오래된 상태)
그리고 이 상태에서 다시 데이터를 fetching 해야 할 경우 다시 fetching을 하고 fresh 상태가 됨
그렇지 않고 화면에서 사용하지 않을 경우 inactive 상태로 변경이 됨
inactive 상태에서도 또 다른 타이머(gcTime- 가비지컬렉터 타임) 가 들어가는데, 기본값은 5분으로 설정되어 있음
예시로 3초라고 생각하면, 3초를 기다리고 화면에서 사용하지 않는다라고 판단하게 되면 캐시에 delete 됨
React Query 사용법
QueryClient 란 ?
모든 쿼리에 대한 상태 및 캐시를 가지고 있는 클래스
react query 를 사용하기 위해서는 필수적으로 생성해줘야 함
예시처럼, queryClient 를 선언하고 QueryClient 의 props 로 queryClient를 전달해주면 하위 컴포넌트(Todos) 에서 QueryClient 에 접근할 수 있다.
QueryClient 에서는 전역적으로 옵션을 선택할 수 있는데, defaultOption 을 보면 queries 와 mutations 에 대한 옵션을 설정해주는 것을 알 수 있다.
Queries 란 ?
비동기적 데이터의 선언적 의존성으로, 쉽게 말하면 서버에서 데이터를 받아올 때 사용하는 기능이다.
useQuery 를 사용함으로써 query 를 사용할 수 있다.
주의할 점은, v5 부터는 인자를 사진과 같이 객체 형태로 전달해야 한다는 것이다.
인자로 전달되는 key 와 queryFn 옵션에는 어떤 값이 들어가는지 알아보자.
queryKey 란 ?
캐시를 관리하기 위한 키값으로, 배열 형태로 사용
리액트 쿼리에서는 쿼리 키를 string 형태로 해쉬해 key 와 data 를 mapping 시켜 관리
queryFn 란 ?
promise 를 반환하는 함수(fetch, axios 등)
data 를 resolve 하고 error 를 던짐
queryKey, queryFn 외의 옵션
Queries 가 최종적으로 반환하는 값
데이터와 에러를 반환함
Mutations 란 ?
Mutations 는 CRUD 중 RUD 에 해당하는 기능으로 서버의 데이터를 수정할 때 사용하는 기능
useMutation 함수를 선언함으로써 Mutations 기능을 사용할 수 있음
Queries 와는 달리, 필수값에 key 가 들어가지 않음
Mutations 옵션
Mutations 가 최종적으로 반환하는 값
useSuspenseQuery 란 ?
react의 Suspense for Data Fetching API 를 사용하기 위한 hook
(Suspense : 데이터를 불러오는 동안 fallback UI 를 대신 보여주는 기능)
useQuery 는 어떻게 데이터를 저장할까 ?
context 를 사용해 전역적으로 데이터 사용 가능
context API 를 사용해 useClientProvider 하위에 써놓은 Query 들을 서로 공유해서 사용할 수 있음
컴포넌트에서 useQuery 가 실행되면 생성된 Query 인스턴스와 함께 key 값으로 mapping 시키는 과정을 거침
그리고 fetch 된 데이터를 query 객체 내부에 저장함으로써 캐시를 관리함
context 를 사용했기 때문에 저장된 캐시값은 다른 컴포넌트에서도 사용 가능하게 됨