react-query (1)

react-query 란?

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

서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 보다 쉽게 다룰 수 있도록 도와주며 클라이언트 상태와 서버 상태를 명확히 구분하기 위해서 만들어진 라이브러리이다. react-query 에서 기존 상태 관리 라이브러리(redux, mobX)는 클라이언트 상태 작업에 적합하지만 비동기 또는 서버 상태 작업에는 그다지 좋지 않다고 말하고 있다.

 

클라이언트 상태(Client State) 와 서버 상태(Server State)

클라이언트 상태는 컴포넌트에서 관리하는 각각의 input 값으로 예를 들 수 있고
서버 상태는 database에 저장되어있는 데이터로 예를 들 수 있다.

 

애플리케이션에서 서버 상태의 특성을 파악하면 다음과 같은 더 많은 일을 할수 있다.

- 캐싱 ( 프로그래밍에서 가장 어려운 일 )
- 동일한 데이터에 대한 여러 요청을 단일 요청으로 중복 제거
- 백그라운드에서 오래된 데이터 업데이트
- 데이터가 "오래된( out of data )" 시기 파악
- 가능한 한 빨리 데이터에 대한 업데이트 반영
- 페이지 매김 및 지연로드 데이터와 같은 성능 최적화
- 서버 상태의 메모리 및 가비지 수집 관리
- 구조적 공유 쿼리 결과 메모하기 ( 기억하기 )

 

기술적인 측면

- 애플리케이션에서 여러줄의 복잡하고 잘목된 코드를 제거하고 몇 줄의 rq로직으로 교체할 수 있도록 도와준다.
- 새로운 서버 상태 데이터 소스를 연결하는 것에 대해 걱정하지 않고, 애플리케이션을 보다 쉽게 유지 관리하고 새로운 기능을 구축하기 쉽게 만든다.
- 애플리케이션이 그 어느때보다 더 빠르고 반응이 빨라지도록하여 최종 사용자에게 직접적인 영향을 미친다.
- 대역폭을 절약하고 메모리 성능을 높일 수 있다.

---

React Query의 라이프 사이클

• fetching - 데이터 요청 상태
• fresh - 데이터가 프레시한(만료되지 않은) 상태.
  • 컴포넌트의 상태가 변경되더라도 데이터를 다시 요청하지 않는다.
  • 새로고침 하면 다시 fetching 한다.
• stale - 데이터가 만료된 상태.
  • 데이터가 만료되었다는 것은 서버에서 한번 프론트로 데이터를 주면 그 사이에 다른 유저가 데이터를 추가, 수정, 삭제 등등 할 수 있기 때문에 만료되었다고 한다. (최신화가 필요한 데이터)
  • 컴포넌트가 마운트, 업데이트되면 데이터를 다시 요청합니다.
  • fresh에서 stale로 넘어가는 시간 -> 기본값 
• inactive - 사용하지 않는 상태.
  • 일정 시간이 지나면 가비지 콜렉터가 캐시에서 제거함
  • 기본값 5분
• delete - 가비지 콜렉터에 의해 캐시에서 제거된 상태.

• A 쿼리 인스턴스가 mount 됨
• 네트워크에서 데이터 fetch 하고 A라는 query key로 캐싱함
• 이 데이터는 fresh 상태에서 staleTime(기본값 0) 이후 stale 상태로 변경됨
• A 쿼리 인스턴스가 unmount 됨
• 캐시는 cacheTime(기본값 5min) 만큼 유지되다가 가비지 콜렉터로 수집됨
• 만일 cacheTime이 지나기 전에 A 쿼리 인스턴스가 새롭게 mount되면, fetch가 실행되고 fresh한 값을 가져오는 동안 캐시 데이터를 보여줌

Stale

리액트 쿼리는 기본적으로 캐시된 데이터를 stale한 상태로 여긴다.
stale이란 최신화가 필요한 데이터라는 의미로
stale한 상태가 되면 다음의 경우에 refetch 된다.

 

- 새로운 query 인스턴스가 마운트될 때
  (useQuery가 처음 호출될 때, Whenever a new component that calls useQuery mounts, React Query will do a revalidation)

- 브라우저 화면을 이탈했다가 다시 포커스할 때

- 네트워크가 다시 연결될 때

- 특별히 설정한 refetch interval에 의해서 (refetchInterval) 

 

refetchOnWindowFocus 옵션 등으로 기본 refetch 설정을 막을 수 있고
staleTime 옵션으로 설정한 시간 동안 데이터가 stale 되지 않도록 해 refetch를 막을 수도 있다.

query에 별다른 action이 없으면 inactive 상태로 캐시에 남아 있다가 5분 뒤에 메모리에서 사라진다.
cacheTime 옵션을 설정해서 이 시간을 조정할 수 있다.

staleTime

• 데이터가 fresh -> stale 상태로 변경되는데 걸리는 시간
• fresh 상태일때는 쿼리 인스턴스가 새롭게 mount 되어도 네트워크 fetch가 일어나지 않는다.
• 데이터가 한번 fetch 되고 나서 staleTime이 지나지 않았다면 unmount 후 mount 되어도 fetch가 일어나지 않는다.

cacheTime

• 데이터가 inactive 상태일 때 캐싱된 상태로 남아있는 시간
• 쿼리 인스턴스가 unmount 되면 데이터는 inactive 상태로 변경되며, 캐시는 cacheTime만큼 유지된다.
• cacheTime이 지나면 가비지 콜렉터로 수집된다.
• cacheTime이 지나기 전에 쿼리 인스턴스가 다시 마운트 되면, 데이터를 fetch하는 동안 캐시 데이터를 보여준다.
• cacheTime은 staleTime과 관계없이, 무조건 inactive 된 시점을 기준으로 캐시 데이터 삭제를 결정한다.

---

참고

https://maxkim-j.github.io/posts/react-query-preview

React-Query 살펴보기

https://oyg0420.tistory.com/entry/React-Query-%EC%98%88%EC%A0%9C%EB%A1%9C-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0

[React Query] Query / Mutation 이해하기

https://thinkforthink.tistory.com/340

React Query 기본