React Query란?

React Query는 React 애플리케이션에서 데이터를 관리하기 위한 라이브러리로 API 호출, 캐싱, 데이터 갱신 등 다양한 기능을 제공합니다. 이를 통해 React 개발을 보다 쉽고 효율적으로 할 수 있습니다.
React Query는 React 개발자들이 많이 사용하는 라이브러리 중 하나입니다.

• API 호출 관리: React Query는 API 호출을 관리하기 위한 여러 가지 유용한 함수들을 제공합니다. 이를 통해 API 호출을 처리하고, 데이터를 가져오거나 업데이트할 수 있습니다.
• 캐싱: React Query는 API 호출 결과를 캐싱하여 성능을 향상시킵니다. 이를 통해, 동일한 데이터에 대한 반복적인 API 호출을 줄일 수 있으며, 불필요한 네트워크 트래픽을 줄일 수 있습니다.
• 데이터 갱신: React Query는 자동으로 데이터를 갱신하고, 필요한 경우 화면을 다시 렌더링합니다. 이를 통해 데이터의 일관성을 유지하며, 사용자 경험을 개선할 수 있습니다.
• 비동기 작업 관리: React Query는 비동기 작업을 관리하는 데 유용한 함수들을 제공합니다. 이를 통해, 복잡한 비동기 작업을 보다 쉽고 간편하게 처리할 수 있습니다.

📘 Query Key

💬 React Query Devtools

• Query key로 Query를 표시해주고 활성, 비활성 만료 등에 해당하는 모든 쿼리의 상태를 알려준다.
• 마지막으로 업데이트된 timestamp를 알려준다.
• Data explorer
• Query explorer
• Stale Data
  • React Query에서 refetcing은 만료된 data에서만 실행된다.
  • staleTime은 데이터의 유지 시간이다.
  • useQuery(쿼리키, 쿼리함수, staleTime)
  • Data가 만료됬을때만 refetching이 실행된다.
• Cache Time
  • Query instance가 unmounted 되면 데이터가 inactive되며 cache는 cache time 동안 유지된다.
  • cache time이 지나면 garbage로 수집된다.

💬 Query Key

• 모든 Query가 동일한 Query key를 사용하고 있으면 데이터가 만료된 상태임에도 refetching 하지 않는다.
• 이런 경우에는 어떠한 트리거가 있어야만 데이터를 다시 가져온다.
  • 예를 들어, 컴포넌트를 다시 마운트하거나
  • 윈도우를 다시 focus할 때
  • useQuery에서 반환되어 수동으로 refetching을 실행할 때
  • 지정된 간격으로 refetching을 자동으로 실행할 때
  • 혹은 mutation을 생성한 뒤 Query를 무효화할 때 client data와 server data가 불일치 하면 refetching이 트리거 된다.
• 따라서 Query key에 문자열 대신 배열을 전달하여 이러한 문제를 해결한다.
• 배열의 첫 번재 요소로 문자열을 갖고 두번째 요소로 post.id를 갖게 한다.
• Query key가 변경되면, 다시 말해 post.id가 업데이트 되면 React Query가 새 Query를 생성하므로 모든 Query가 동일하지 않은 Query key를 갖는다고 간주한다.

💬 Pagination

• 페이지마다 다른 Query key를 사용해서 페이지를 유지한다.

📗 Data & Cache

💬 Pre-fetching

• 데이터를 미리 가져와 cache에 넣어 사용자가 기다릴 필요가 없도록 만든다.
• 다시 말해 Pre-fetching은 데이터를 cache에 추가하여 구성할 수 있지만 stale 상태로 불러오는 것이다.

💬 isFetching vs isLoading

• isFetching의 경우 async query 함수가 해결되지 않았을때 true이다.
• isLoading은 isFetching이 true이면서 Query에 대해 cache된 data가 없는 상태를 뜻합니다.
  • 즉, isLoading 상태이거나 isLoading이 참인 경우 isFetching 또한 참입니다.
• isLoading을 isFatching으로 변경하게 되면 cache된 data의 존재 여부와 관계 없이 실행된다.
  • 우리가 원하는 방식은 대개 isLoading이다.

💬 Mutations

• mutation은 서버에 데이터를 업데이트 하도록 서버에 네트워크 호출을 실시한다.
• useMutation은 일부 예외를 제외하고 useQuery와 상당히 유사하다.
• mutate 함수를 반환하는데 사용하는 mutate 함수는 데이터를 저장하지 않으므로 Query key는 필요하지 않다.
• 또한, 캐시된 항목이 없으므로 isLoading은 존재하지만 isFetching은 존재하지 않는다.
• useQuery의 경우 default 값으로 3회 재시도하나 useMutation은 default값은 없고 설정 가능하다.

📙 Infinite scroll

• 사용자가 scroll할 때마다 새로운 데이터를 가져온다.
• 모든 데이터를 한 번에 가져오는 거보다 효율적이다.
• 사용자가 버튼을 클릭해서 새로운 데이터를 요청하거나 페이지의 특정 지점을 스크롤 했을 때 새 데이터를 가져오게 한다.
• useInfiniteQuery를 사용한다.