isFetching 비동기 쿼리 함수가 해결되지 않았을 때 해당 합니다. ( 아직 데이터를 가져오는 중 ) isLoading isFetching이 진행 중이고, 쿼리에 대해 캐시된 데이터가 없는 상태를 말합니다. 즉, isLoading 상태이면 isFetching 또한 진행 중인 상태 입니다. ( 동시에 true ) isLoading 은 캐시된 데이터가 없고, 데이터를 가져오는 상황에 해당하는 isFetching 의 부분 집합 입니다. 예시 const {data, isLoading, isError, error} = useQuery(['posts', currentPage], () => fetchPosts(currentPage), {staleTime : 2000, keepPreviousData : true}..
페이지 매김(Pagination)을 구현한 지난 포스팅에서는 사용자 경험이 좋지 않았습니다. 페이지가 캐시에 없기 때문입니다. Next Page 버튼을 누를 때마다 페이지가 로딩되길 기다려야 했습니다. 이번에는 데이터를 미리 가져와 캐시에 넣어서 사용자 경험을 개선 하겠습니다. Prefetching ❓ 프리패칭은 데이터를 캐시에 추가하며 , 구성할 수 있긴 하지만 기본값으로 만료(stale) 상태 입니다. 즉, 데이터를 사용하고자 할 때 만료 상태에서 데이터를 다시 가져옵니다. 데이터를 가져오는 중에는 캐시에 있는 데이터를 이용해 화면에 나타냅니다. 물론 캐시가 만료되지 않았다는 가정하에 일 입니다. 이렇게 추후 사용자가 사용할 법한 모든 데이터에 프리패칭을 사용 합니다. 페이지 매김, 다수의 사용자가 ..
현재 페이지(current Page) 상태를 통해, 현재 페이지를 파악하는 페이지 매김 방법 댓글에서 작업했던 것처럼 페이지마다 다른 쿼리 키 가 필요 합니다. 따라서, 쿼리 키를 배열 로 업데이트해서 가져오는 페이지 번호를 포함 하도록 하겠습니다. 사용자가 다음, 또는 이전 페이지로 가는 버튼을 누르면 currentPage 상태를 업데이트 합니다. 그럼 React Query 가 바뀐 쿼리 키를 감지하고 새로운 쿼리를 실행해서 새 페이지가 표시됩니다. ✔ Posts.js import React, { useState } from "react"; import { useQuery } from "react-query"; import { PostDetail } from "./PostDetail"; const ma..
Stale Data ( 만료된 데이터 ) ❓ 예를 들어 오래된 식빵과 비슷하다고 할 수 있습니다. React Query 에서 데이터가 만료됐다는 것은 무슨 뜻인가 ❓ 데이터 리패칭(Refetching) 은 만료된 데이터 에서만 실행 됩니다. 예를 들어, 컴포넌트가 다시 마운트되거나 윈도우가 다시 포커스 되었을 때가 있습니다. staleTime 은 데이터를 허용하는 '최대 나이' 라고 할 수 있습니다. 달리 말하면, 데이터가 만료됐다고 판단하기 전까지 허용되는 시간 이 staleTime 입니다. '웹사이트에 표시된 데이터가 10초 까지는 그대로여도 괜찮다' 라고 판단하면 staleTime 을 10초로 설정 합니다. stale 한 데이터를 사용자에게 보여주는 것은 유의미하지 않다고 React Query는 판..
React Query 개발자 도구는 앱에 추가할 수 있는 컴포넌트로 개발 중인 모든 쿼리의 상태를 표시 해줍니다. 또한 예상대로 작동하지 않는 경우 문제를 해결하는 데 도움이 될 수도 있습니다. 쿼리 키로 쿼리를 표시해 주고 활성(active), 비활성(inactive), 만료(stale) 등 모든 쿼리의 상태를 알려줍니다. 마지막으로 업데이트된 타임 스탬프도 알려줍니다. 쿼리에 의해 반환된 데이터를 탐색할 수 있는 데이터 탐색기도 있습니다. 쿼리를 볼 수 있는 쿼리 탐색기도 있습니다. 공식 문서 ✔ 개발자 도구 문서에서 주목하고 싶은 한 가지 프로덕션 번들에 포함되어 있지 않다는 점 입니다. NODE_ENV 변수에 따라 프로덕션 환경에 있는지 여부가 결정 됩니다. CRA 는 npm run build 를..
useQuery 에서 반환되는 객체의 종류 ✔ 데이터가 아직 준비되지 않았을 때 데이터가 정의되지 않으면 오류가 나오게 하지 않고, 적절한 조치를 할 수 있습니다. 그 중 살펴볼 것은 isLoading 과 isError 입니다. 이 두가지는 데이터가 로딩 중인지 여부, 데이터를 가져올 때 오류가 있는지 여부를 알려주는 boolean 입니다. 저번에 만든 코드 const {data, isLoading, isError} = useQuery('posts', fetchPosts); 동일하게 반환 객체에서 isLoading 과 isError 를 추가 합니다. ✔ isLoadding // replace with useQuery const {data, isLoading, isError} = useQuery('post..
