[ReactQuery] (1) ReactQuery 란 무엇인가?

Tanstack (ReactQuery) 대표이미지

 

 

 

접근 (요약)

reactQuery의 개요를 작성한다.

 

  1. Client State vs Server State

1. Client State 
- 웹 브라우저 세션과 관련된 모든 정보 의미 (단순히 사용자의 상태)
  (ex_ 사용자가 원하는 언어를 선택하거나 밝은/어두운 테마를 선택하는 등의 서버에서 일어나는 일과는 아무 관련이 없는 것)

2. Server State
- 서버 상태는 서버에 저장되지만 클라이언트에 표시하는 데 필요한 데이터
  (ex_데이터베이스 등 블로그 게시물 데이터)
- 데이터는 여러 클라이언트에 표시되어야 하기에 서버에 저장됨

 

  2. React Query 특징

1. React Query는 클라이언트에서 서버 데이터 캐시를 관리

 

React Code ↔ React Query Cache ↔ Server

 

- React 코드에 서버 데이터가 필요할 때, Fetch나 Axios를 사용해 서버로 바로 이동하지 않고 React Query 캐시를 요청합니다.
- React Query의 역할은 React Query 클라이언트를 어떻게 구성했느냐에 따라 해당 캐시의 데이터를 유지 관리하는 것

2. 데이터를 관리하는 것은 React Query이지만 서버의 새 데이터로 캐시를 업데이트 하는 시기를 결정하는 것은 사용자의 몫
```
[React Query 캐시 예시]

key: ['blog-posts']
data: [
    {
        title: 'React Query',
        tagLine: 'What is this thing?'
    },
    {
        title: 'React Query Mutation',
        tagLine: 'Not just For ninja tutles',
    }
]
```
- 위 캐시에는 'blog-posts'라는 키(key)를 할당한 데이터가 있음 => 이것이 해당 데이터가 식별되는 방식
- 클라이언트 캐시에 있는 이 데이터가 서버의 데이터와 일치하는지 확인해야 하는데 2가지 방법이 있음!

(1). 명령형(imperatively) : invalidate data
- 쿼리 클라이언트에 이 데이터를 무효화하고
- 캐시에 교체할 새 데이터를 서버에서 가져오게 지시하는 것
```
[React Query 캐시 예시]

key: ['blog-posts']
data: [
    {
        title: 'React Query',
        tagLine: 'It is so great!!'
    },
    {
        title: 'React Query Mutation',
        tagLine: 'Not just For ninja tutles',
    }
]
```

(2). 선언형(declaratively) : configure how (ex_window focus) & when to trigger a re-fetch
- 리패치(Refetch)를 트리거하는 조건을 구성하는 것
- staleTime: 30 seconds 처럼 언제 트리거 할지도 설정할 수 있음
```
[React Query 캐시 예시]

key: ['blog-posts']
data: [
    {
        title: 'React Query',
        tagLine: 'What is this thing?'
    },
    {
        title: 'React Query Mutation',
        tagLine: 'Not just For ninja tutles',
    }
]
staleTime: 30 seconds
```

3. React Query에는 서버상태 관리 뿐 아니라, 서버 상태 관리에 도움이 되는 많은 도구가 함께 제공
   (1). Loading & Error (states)
   - 서버에 대한 모든 쿼리의 로딩 및 오류 상태를 유지해주기 때문에 수동 필요 X

   (2). Pagination (페이지 매김) & infinite scroll (무한 스크롤)
   - 사용자를 위해 페이징이나 무한스크롤이 필요한 경우, 데이터를 조각으로 가져올 수 있는 도구도 제공

   (3). Prefetching (=> 시간 단축)
   - 데이터를 미리 가져와서 캐시에 넣으면, 사용자가 data가 필요할 때 앱이 캐시에서 해당 데이터를 가져오기 때문에 사용자는 서버에 연결될 때까지 기다릴 필요X

   (4). Mutations 
   - 데이터의 변이(Mutation)나 업데이트를 관리할 수 있다는 것을 나타냄

   (5). De-duplication of requests 
   - 쿼리는 키로 식별되기 때문에 React Query는 요청을 관리할 수 있고 
   - 페이지를 로드하고 해당 페이지의 여러 구성 요소가 동일한 데이터를 요청하는 경우, 
   - React Query는 쿼리를 한 번에 보낼 수 있음
   - 기존 쿼리가 나가는 동안, 다른 구성 요소가 데이터를 요청하는 경우, React Query는 중복 요청을 제거할 수 있음

   (6). Retry on error
   - 서버에서 오류가 발생하는 경우에 대한 재시도를 관리할 수 있음

   (7). CallBacks 
   - 쿼리가 성공하거나 오류가 났을 때를 구별해서 조치를 취할 수 있도록 콜백 전달가능