React Query

: fetching, caching, 서버 데이터와의 동기화를 지원해주는 라이브러리

사용하는 이유

React App에서 서버 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고, 업데이트하는 작업 도와주는 라이브러리

복잡하고, 장황한 코드가 필요한 다른 데이터 불러오기 방식과 달리 React Component 내부에서 간단하고, 직관적으로 API 사용 가능

캐싱, Window Focus Refetching 등 다양한 기능으로 API 요청 관련된 번잡한 작업 없이 핵심 로직에 집중 가능

*캐싱

: 특정 데이터의 복사본을 저장해 이후 동일한 데이터의 재접근 속도 향상 => React Query의 장점 중 하나

동일 데이터에 대한 반복적인 비동기 데이터 호출을 방지하고, 불필요한 API 콜을 줄여 서버에 대한 부하를 줄이는 좋은 결과를 가져옴

생각해 볼 수 있는 문제점

만일 서버 데이터를 불러와 캐싱 후, 실제 서버 데이터를 확인 시 서버 상에서 데이터의 상태가 변경되어 있다면, 사용자는 실제 데이터가 아닌 변경 전의 데이터를 바라볼 수 밖에 없게 된다

=> 이는 사용자에게 잘못된 정보를 보여주는 에러

• fresh 데이터 : 최신의 데이터
• stale 데이터 : 기존의 데이터
  
  

데이터 갱신 3가지 경우

1. 화면을 보고 있을 때

2. 페이지 전환이 발생했을 때

3. 페이지 전환 없이 이벤트가 발생해 데이터 요청할 때

React Query 기본적 옵션

refetchOnWindowFocus (default : true)

refetchOnMount (default : true)

refetchOnReconnect (default : true)

staleTime (default : 0)

• 데이터가 fresh -> stale 상태로 변경되는데 걸리는 시간
• fresh 상태일 때는 Refetch 트리거(위의 3가지)가 발생해도 Refetch 발생x
• 기본 값 0이므로 따로 설정해주지 않으면 Refetch 트리거 발생 시 무조건 발생

cacheTime (default : 5분)

• 데이터가 inactive한 상태일 때 캐싱된 상태로 남아있는 시간
• 특정 컴포넌트가 unmount(화면에 사라질 때)되면 사용된 데이터는 inactive되고, 이때 데이터는 cacheTime만큼 유지
• cacheTime 이후 데이터는 가비지 콜렉터로 수집되어 메모리에서 해제
• cacheTime 지나지 않았는데 해당 데이터를 사용하는 컴포넌트가 다시 mount되면, 새로운 데이터를 fetch해오는 동안 캐싱된 데이터 보여줌
• 캐싱된 데이터를 계속 보여주는게 아니라 fetch하는 동안 임시로 보여주는 것

Refetching 시점

1. 브라우저에 포커스가 들어온 경우

2. 새로운 컴포넌트 마운트가 발생한 경우

3. 네트워크 재연결이 발생한 경우

Client vs Server

Client : 모달 관련 데이터, 페이지 관련 데이터 등

Server : 사용자 정보, 비즈니스 로직 관련 정보 등

Redux, Recoil, mobX 등 전역 상태 관리 라이브러리들로 Client 데이터 관리에 도움이 되지만 Server데이터까지도 관리를 해야하는 상황 발생

비동기 함수 처리 로직, 서드 파티 라이브러리 지원에도 완벽히 둘을 분리해 관리하기에는 충분치는 않음

⇒ 이에 대한 해결책을 제시해주는 것이 React-Query

⇒ Client 데이터는 상태 관리 라이브러리, Server 데이터는 React-Query가 관리하는 구조

기능

useQuery (GET)

1. import, provider 설정

import 리스트

• queryClient를 실행해주기 위한 QueryClient
• queryClient를 실행하기위한 provider
• useQuery 사용을 위한 useQuery

const queryClient = new QueryClient() 선언으로 queryClient 객체 생성

상위 컴포넌트(App)에 provider로 감싸기

2. useQuery 사용

첫 번째 파라미터로 unique key를 포함한 배열, 이후 동일한 쿼리를 불러올 때 사용

• 배열의 첫 요소는 unique key, 두 번째 요소부터는 query함수 내부의 파라미터로 값

두 번째 파라미터로 실제 호출하고자 하는 비동기 함수

• 이 함수는 Promise를 반환하는 형태

최종 반환 값은 API 성공, 실패 여부, 반환값을 포함한 객체

동기적 실행

enabled 옵션 사용으로 비동기 함수인 useQuery를 동기적으로 사용 가능

3 번째 인자로 다양한 옵션 값들이 들어가는데, 여기에 enabled 대입

• true일 때 useQuery를 동기적으로 실행
  
  

동시 실행

여러 useQuery를 한 번에 실행하고자 한다면 Promise.all()처럼 묶어서 실행

useMutation (PUT, UPDATE, DELETE)

반환 값은 useQuery와 동일

첫 번째 파라미터에 비동기 함수 (사진에서는 POST)

두 번째 파라미터로 상황 별 분기 설정

실제 mutation 사용시에는 mutation.mutate메소드 사용

• 첫 번째 인자로 API 호출 시 전달해주어야 하는 데이터
  
  

버전 v4

1. 달라진 import 라이브러리 이름

기존 원래는 react-query 라이브러리 이름으로 import

v4 부터는 @tanstack/react-query로 진행

• React에만 국한되지 않은 범용 프론트엔드 라이브러리로 개선
• tanstack 오픈 소스 SW 프로젝트 하위의 라이브러리
  
  

2. Query key에 배열

첫 번째 인자로 unique key 선정

v4 부터는 입력 값이 하나만 있더라도 무조건 배열의 형태로 선언

3. 여러 쿼리를 넘길 때 queries 명시

기존 useQueries 사용 시 인자로 바로 쿼리 정보를 담은 배열

v4 부터는 이를 묶어서 queries라는 파라미터로 전달

4. undefined -> Error 반환

기존 query가 오류로 결괏값 undefined 반환

v4 부터는 React-Query 자체적으로 이를 감지하고, API 호출을 Failed 표시 후 Error 반환

---

Reference

https://velog.io/@kandy1002/React-Query-푹-찍어먹기