리액트 심화 - 리액트 쿼리1 (react-query 1) - 수정할 것...

 

- 상태의 종류

 

프론트엔드에서 다루는 상태는 크게 나누면 두 종류 => 클라이언트 상태와 서버 상태

 

클라이언트 상태 : 뷰를 위한 데이터

한 유저만을 위한 데이터 (세션간 지속될 필요없는 데이터)

예시) input 입력 값을 state로 관리(렌더링에 반영하기 위한 데이터)

 

서버 상태 : 서버에서 가지고 오는 데이터

여러 유저가 공유해야하는 데이터 (세션간 지속되어야 하는 데이터)

예시) 게시물 리스트(DB에 저장되어 있는 데이터)

 

 

- React Query

 

- 서버 상태를 잘 관리하기 위한 상태 관리 라이브러리

 

우리가 어떤 데이터를 서버에 요청하고 나서 부터 요청을 받은 후까지

데이터를 받아오기 전까지 참조 못하게 하기,

게시글 목록 중 한 데이터 수정 api를 호출했다면 게시글 목록 자체를 리패칭하기 등 직접할 일이 참 많음

=> 리액트 쿼리는 이런 비동기 처리를 편히 할 수 있도록 굉장히 많은 기능을 제공

 

 

- React Query 상태 관리 흐름 => API 요청을 보내는 것에 특화

 

1. 클라이언트가 데이터 요청을 하는 것부터 시작

  fetching : 데이터 요청을 하는 흐름

 

2. fetching을 다 하면 응답을 줌 => 응답 데이터를 갓 받아온 그 상태

  fresh : 데이터를 갓 받아온 직후 / 컴포넌트의 상태가 변하더라도 데이터 재요청 하지 않음

 

  데이터가 언제까지 fresh 할 지는 알기 어려움

  받아온 응답 데이터와 기존의 데이터가 언제까지고 같진 않을 거라고 생각

  기존의 데이터가 바뀌면서 받아온 응답 데이터가 상해 있을 거라고 생각함

 

3. 일정 시간이 지나고 나면 받아온 응답 데이터가 상함(stale이 됨)

  stale : 데이터 만료 / 최신화가 필요한 데이터

  그래도 여기까지는 아직 데이터를 쓰는 중이라고 볼 수  있음(active)

 

4. 데이터를 더이상 쓰지 않는 상태(inactive)

  inactive : 쿼리가 언마운트 된 상태 (쿼리를 더는 사용하지 않는 상태)

  !주의! 쿼리가 언마운트된다고 해서 비동기 요청이 취소되는 것은 아님.

  프라미스가 일단 만들어지고 언마운트된 거라면 데이터는 캐시에 살아 있을 수 있음

 

5. 캐시데이터가 메모리에서까지 완전히 삭제

  delete : 완전히 삭제된 상태(캐시 데이터가 메모리에서 삭제!)

 

 

- 주요 개념

 

- query : query key + query function

- query key : 쿼리를 구분하기 위한 특정 값. 문자, 배열, 딕셔너리 등을 넣을 수 있음

- query function : 서버에서 데이터를 요청하고 Promise를 리턴하는 함수(= 비동기 요청)

- data : 쿼리 함수가 리턴한 Promise에서 resolve된 데이터

- staleTime : 쿼리 데이터가 fresh 에서 stale로 전환되는데 걸리는 시간. 기본값은 0

- cacheTime : unused 또는 inactive 캐시 데이터가 메모리에서 유지될 시간 기본값은 5분이며

설정한 시간을 초과하면 메모리에서 제거

 

Parallel queries(병렬 쿼리)는 후에 배워볼 suspense 모드에서 동작하지 않음
첫번째 쿼리가 프라미스를 만들면(서버 요청 등 비동기 요청을 보내면 프라미스가 만들어짐)
다른 쿼리가 실행되기 전에 서스펜스가 동작을 일시 중지시켜버리기 때문

 

 

리액트 쿼리에서 가장 중요한 것은 쿼리라는 개념(query)

 

query - 리덕스에서 말하는 Store 정도의 개념이라고 보면 됨

but, Store는 우리가 직접 데이터를 바꿔야만 했지만 Query는 아님

 

Query는 쿼리 키(Query Key), 쿼리 펑션(Query Function / Api를 호출하는 function)을 이용.

쿼리 키에 같은 쿼리 키를 주고, 이 펑션 키가 어딘가에서 호출됨

그런데 이 쿼리 키를 갖고 있는 애가 어딘가 변했다는 확신이 들면 쿼리 펑션, API 요청을 무조건 다시 함

 

Redux를 쓸 때는 Store를 우리가 임의로 무언가 작업해주지 않으면 절대 Store 안에 데이터가 바뀌지 않았는데

Query는 키 값에 엮여 있는 무언가가 바뀌게 되면 묻지도 따지지도 않고 다시 API를 요청하여같은 키 값에 있는 데이터를 바꿈