• [우아한 테크 세미나] React Query와 상태관리
• Store에서 비동기 통신 분리하기 (feat. React Query)

• API 응답으로 받은 데이터의 관리까지 Store에서 담당하는 것이 맞나...? 하는 문제의식...!

'서버에서 받아야 하는 상태' 예시

• 배민 앱으로 주문했을 경우, 주문 데이터는 다른 사람(사장님)과 공유하는 데이터
  👉🏽 주문을 끝내면 나(클라이언트)의 상태는 주문 완료.
  👉🏽 사장님이 주문을 접수하고준비 중으로 서버 데이터를 바꾸면 나는 그 서버 데이터를 받아와야 함. 아니면 'out of date'가 됨.

---

React Query

Queries

• 데이터 Fetching용! (데이터 가져올 때만 쓰임) (READ)

• 실무에서는 거의 Array 형태로 씀. (ver 4부터는 아예 배열 형태만 쓸 수 있을 듯..?)

• API를 Fetching 하는 함수 (fetch, axios...)

useQuery가 반환하는 것

useQuery Option

queries 파일은 분리해서 쓰는 것을 추천

• useQuery를 컴포넌트에 직접 쓰게 되면 관리가 어려울 수도 있다.
• Query 선언부는 queries 등 파일에 따로 작성 (컴포넌트와 분리)
• 도메인 별로 따로 분리해서 쓰는 것을 추천

  

query가 여러 개일 경우

• 그냥 여러 개 쓰면 된다!

  

---

Mutations

• 데이터 생성 / 수정 / 삭제 시 사용! (CREATE / UPDATE / DELETE)

• Query key도 안 넣어도 된다. (넣어주면 devtools에서 볼 수 있다)

• mutate : Query와 달리 자동실행 X

• ex) 페북 좋아요 누르면 => 서버에서 '좋아요' 데이터(상태) 변경 되기 전에 먼저 Optimistic update 적용해서 UI에 반영 (하트 색깔 변하는 등...)
• Optimistic update : 해당 Mutation이 성공할 거라고 보고 미리 업데이트하는 것. Mutation 실패 시 롤백 가능.

---

Query Invalidation

• Query 무효화
• 해당 key를 가진 쿼리는 stale상태가 되고, 현재 rendering 되고 있는 query들은 백그라운드에서 refetch 된다.

  

---

•