[React/ReactQuery] 사용목적 from 공문

React Query

Overview

TanStack Query (FKA React Query) is often described as the missing data-fetching library for web applications, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your web applications a breeze.

탄스택 쿼리(FKA React 쿼리)는 흔히 웹 애플리케이션을 위한 데이터 가져오기 라이브러리로 설명되지만, 보다 기술적인 측면에서 보면 웹 애플리케이션에서 서버 상태(state)를 쉽게 가져오기, 캐싱, 동기화 및 업데이트할 수 있게 해줍니다.

 

왜 만들었는가?

While most traditional state management libraries are great for working with client state, they are not so great at working with async or server state. This is because server state is totally different.

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

 

 

여러 개 영상을 좀 보면서 확인해보니 크게 3가지로 많이 사용하는 것 같음.

1. 데이터 fetching 및 loading and Error.

2-1. 데이터 업데이트를 위한 mutation.

2-2. 데이터 업데이트 및 caching.

 

React Query

re-rendering

제일 먼저 React Query는 리렌더링을 할 때마다 queryFn을 실행하지 않습니다. staleTime의 기본값이 0이어도 말이죠. 어플리케이션은 다양한 이유로 언제든지 리렌더링할 수 있습니다.

https://highjoon-dev.vercel.app/blogs/1-practical-react-query

 

option 1

staleTime: 쿼리가 신선한 상태에서 신선하지 않은 상태로 변할 때 까지의 소요 시간입니다. 

gcTime: 비활성화된 쿼리가 캐시로부터 제거되기까지의 소요 시간입니다. 기본값은 5분 입니다. 쿼리는 등록된 옵저버가 더이상 없을때 즉, 해당 쿼리를 사용하는 모든 컴포넌트가 언마운트되면 비활성화 상태로 전환됩니다.

이 설정을 바꾸고 싶다면 대부분의 경우 staleTime을 수정하면 됩니다. gcTime을 조작하는 일은 거의 없었어요.

 

queryKey의 역할

우아한테크

 

아래 영상을 보면 조금은 쉽게 이해할 수 있는 내용

https://www.youtube.com/watch?v=n-ddI9Lt7Xs

 

개인적으로 이 친구의 React Query totorial이 좀 좋았음.

https://www.youtube.com/watch?v=k1tus-TmqCE

 

ps-

가장 중요한 건 역시 공홈 문서인데, 영어가 종종 헷갈림.