[React-Query] React-Query가 뭔데요?

프론트엔드 개발자로 성장하기 위해서 큐시즘이라는 동아리에서 개발을 달리게 되는데 당장이라도 React-Query 등 안써본 개념들을 써봐야하기에 공부를 시작! 

🖌️React-Query란?

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

➡️ *ContextAPI를 기반으로 동작 
*ContextAPI란 ? 
 : 리액트의 내장 API / 컴포넌트에게 props를 사용하지 않고 필요한 데이터를 쉽게 공유할 수 있게 해줌 
    ➡️ 모든 컴포넌트에서 사용할 수 있는 데이터를 전달하는데 유용

 

➡️ React-Query를 활용해 비동기 데이터를 불러오는 과정 중 발생하는 문제들을 해결해줌

🖌️Caching : 캐싱

React-Query는 캐싱을 통해 동일한 데이터에 대한 반복적인 비동기 데이터 호출을 방지 
➡️ 불필요한 API 콜을 줄여 서버에 대한 부하를 줄임

 

데이터를 갱신해야하는 시기 

1. 화면을 보고 있을 때 

2. 페이지 전환이 일어났을 때

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

[Refetch 트리거]

- refetchOnWindowFocus

default : true / 브라우저에 포커스가 들어온 경우

- refetchOnMount
default : true / 새로운 컴포넌트 마운트가 발생한 경우

- refetchOnReconnect
default : true / 네트워크 재연결이 발생한 경우

--------------------------------------------------------------

- staleTime

default : 0 / 데이터가 *fresh -> stale 상태로 변경되는데 걸리는 시간 
*최신의 데이터 : fresh 
 기존의 데이터 : stale
+) React-Query에서 받아온 데이터의 생명주기 : fetching - fresh - stale- inactive- delete 

▪️fresh 상태일 때는 Refetch 트리거가 발생해도 Refetch가 일어나지 않음 

▪️기본값이 0이므로 따로 설정해주지 않는다면 Refetch 트리거가 발생했을 때 무조건 Refetch 발생

- cacheTme

default : 5분 / 데이터가 inactive한 상태일 때 캐싱된 상태로 남아있는 시간

▪️특정 컴포넌트가 unmount (ex. 페이지 전환 등으로 화면에서 사라질 때 ) 되면 사용된 데이터는 inactive상태로 바뀜

    ➡️ 이 때 데이터는 cacheTime만큼 유지됨

▪️만일 cacheTime이 지나지 않았는데 해당 데이터를 사용하는 컴포넌트가 다시 mount되면 새로운 데이터를 fetch해오는 동안 캐싱된 데이터를 보여줌

  ➡️ 캐싱된 데이터를 계속 보여주는게 아니라 fetch 하는 동안 임시로 보여주는 거임

💿Client 데이터와 Server 데이터 간의 분리

Client Data ex) 모달 관련 데이터 , 페이지 관련 데이터 .. 
  ➡️ Redux, Recoil 등과 같은 전역 상태 관리 라이브러리를 통해 관리 

Server Data ex) 사용자 정보  ..

 

➡️ Client Data는 상태 관리 라이브러리가 관리 / Server Data는 React-Query가 관리하는 구조
    = Client Data 와 Server Data를 온전하게 분리 가능 

💻useQuery

- 첫 번째 파라미터로 unique key를 포함한 배열이 들어감 + 동일한 쿼리를 불러올 때 유용하게 사용됨
- 첫 번째 파라미터에 들어가는 배열의 첫 요소 : unique key 
  두 번째 요소부터는 query함수 내부의 파라미터로 값 전달 
- 두 번째 파라미터로 실제 호출하고자 하는 비동기 함수 들어감 + 이 때 함수는 promise를 반환 
- 최종 반환값 : API의 성공 , 실패 여부 , 반환값을 포함한 객체 
enabled 옵션을 사용 ➡️ 비동기 함수를 동기적 사용 가능 

💻useQueries

 : 여러 개의 useQuery를 실행하고 하는 경우 , 기존의 Promise.all() 처럼 묶어서 실행할 수 있도록 함 

💻useMutation

 : PUT , UPDATE, DELETE와 같이 값을 변경할 때 사용하는 API 

- 최종 반환값 : API의 성공 , 실패 여부 , 반환값을 포함한 객체 
useMutation의 첫 번째 파라미터 : 비동기 함수
                          두 번째 파라미터 : 상황 별 분기 설정이 들어간다는 점 
➡️ 실제 사용 시에는 mutation.mutate 메서드 사용 / 첫 번째 파라미터로 API 호출 시에 전달해주어야하는 데이터 넣음