From abadfd0b2cd9a6028b2bfb568ca6c727a7b22efd Mon Sep 17 00:00:00 2001
From: umsungjun <99730910+umsungjun@users.noreply.github.com>
Date: Sun, 8 Jun 2025 16:55:01 +0900
Subject: [PATCH 1/2] =?UTF-8?q?docs:=20=EB=AC=B8=EC=B2=B4=20=EB=B3=80?=
=?UTF-8?q?=EA=B2=BD=20=EB=B0=8F=20cacheTime=20=EC=B4=88=EA=B8=B0=ED=99=94?=
=?UTF-8?q?=20=EB=82=B4=EC=9A=A9=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- PR #34 의 댓글을 참고하여 문체를 ‘됩니다’, ‘있었습니다’와 같은 공식 서술어 양식으로 변경했습니다.
- 추가로, 5분 이내에 A 쿼리가 다시 mount됐을 때 cacheTime이 초기화된다는 내용을 반영했습니다.
---
README.md | 17 +++++++++--------
README.v4.md | 12 ++++++------
2 files changed, 15 insertions(+), 14 deletions(-)
diff --git a/README.md b/README.md
index 14f76b5..7d82d36 100644
--- a/README.md
+++ b/README.md
@@ -209,12 +209,12 @@ function App() {
- `gcTime`의 기본값 5분, `staleTime` 기본값 0초를 가정
-1. `A`라는 queryKey를 가진 A 쿼리 인스턴스가 `mount`됨
-2. 네트워크에서 데이터 fetch하고, 불러온 데이터는 A라는 queryKey로 `캐싱`함
-3. 이 데이터는 `fresh`상태에서 `staleTime(기본값 0)` 이후 `stale` 상태로 변경됨
-4. A 쿼리 인스턴스가 `unmount`됨
-5. 캐시는 `gcTime(기본값 5min)` 만큼 유지되다가 `가비지 콜렉터(GC)`로 수집됨
-6. 만일, gcTime 지나기 전이고, A 쿼리 인스턴스 fresh한 상태라면 새롭게 mount되면 캐시 데이터를 보여준다.
+1. `A`라는 `queryKey`를 가진 쿼리 인스턴스가 `mount`됩니다.
+2. 네트워크 요청을 통해 데이터를 fetch하고, 해당 데이터는 `A`라는 `queryKey`로 캐싱됩니다.
+3. 기본값인 `staleTime`이 0이므로, 데이터를 가져오자마자 바로 `stale` 상태로 전환됩니다.
+4. 쿼리 인스턴스가 `unmount`되면, TanStack Query는 해당 캐시를 `cacheTime`(기본값 5분)만큼 유지합니다.
+5. 만약 5분 이내에 `A` 쿼리가 다시 `mount`된다면, 캐시된 데이터를 즉시 화면에 보여주고, `cacheTime`은 다시 5분으로 초기화됩니다.
+6. 반면, 쿼리가 5분 동안 다시 `mount`되지 않으면, 해당 캐시는 가비지 컬렉션에 의해 삭제됩니다.
@@ -376,7 +376,7 @@ const {
- **isLoading**: `캐싱 된 데이터가 없을 때` 즉, 처음 실행된 쿼리일 때 로딩 여부에 따라 `true/false`로 반환된다.
- 이는 캐싱 된 데이터가 있다면 로딩 여부에 상관없이 `false`를 반환한다.
- status(pending)와 fetchStatus(fetching) 결합된 boolean이다. 즉, `isFetching && isPending` 와 동일하다.
-- **isFetching**: 캐싱된 데이터가 있더라도 서버에 요청을 보내면 `true`를 반환한다.
+- **isFetching**: 캐싱된 데이터가 있더라도 서버에 요청을 보내면 `true`를 반환한다.
- fetchStatus(fetching)에 파생된 boolean 값이다.
- **isSuccess**: 쿼리 요청이 성공하면 `true`
- **isError**: 쿼리 요청 중에 에러가 발생한 경우 `true`
@@ -398,9 +398,10 @@ const {
### 💡 isPending, isLoading 주요 차이점
+
- isPending은 status(pending) 필드에서 직접 파생된 상태인 반면, isLoading은 status(pending)와 fetchStatus(fetching)의 결합된 상태입니다.
- 쉽게 접근하자면 isPending은 "아직 데이터가 없습니다" 를 의미합니다. 그에 반해 isLoading은 "아직 데이터가 없고, 데이터를 가져오는 중입니다"를 의미합니다.
-- 이러한 차이는 enabled 옵션이 false일 때 예시로 들면 이해하가 쉽습니다.
+- 이러한 차이는 enabled 옵션이 false일 때 예시로 들면 이해하가 쉽습니다.
- enabled가 false일 때, isPending은 true로 설정되지만, isLoading은 false로 설정됩니다.
```ts
diff --git a/README.v4.md b/README.v4.md
index b33f4f6..78f206a 100644
--- a/README.v4.md
+++ b/README.v4.md
@@ -218,12 +218,12 @@ function App() {
- `cacheTime`의 기본값 5분, `staleTime` 기본값 0초를 가정
-1. `A`라는 queryKey를 가진 A 쿼리 인스턴스가 `mount`됨
-2. 네트워크에서 데이터 fetch하고, 불러온 데이터는 A라는 queryKey로 `캐싱`함
-3. 이 데이터는 `fresh`상태에서 `staleTime(기본값 0)` 이후 `stale` 상태로 변경됨
-4. A 쿼리 인스턴스가 `unmount`됨
-5. 캐시는 `cacheTime(기본값 5min)` 만큼 유지되다가 `가비지 콜렉터(GC)`로 수집됨
-6. 만일, cacheTime이 지나기 전이고, A 쿼리 인스턴스 fresh한 상태라면 새롭게 mount되면 캐시 데이터를 보여준다.
+1. `A`라는 `queryKey`를 가진 쿼리 인스턴스가 `mount`됩니다.
+2. 네트워크 요청을 통해 데이터를 fetch하고, 해당 데이터는 `A`라는 `queryKey`로 캐싱됩니다.
+3. 기본값인 `staleTime`이 0이므로, 데이터를 가져오자마자 바로 `stale` 상태로 전환됩니다.
+4. 쿼리 인스턴스가 `unmount`되면, TanStack Query는 해당 캐시를 `cacheTime`(기본값 5분)만큼 유지합니다.
+5. 만약 5분 이내에 `A` 쿼리가 다시 `mount`된다면, 캐시된 데이터를 즉시 화면에 보여주고, `cacheTime`은 다시 5분으로 초기화됩니다.
+6. 반면, 쿼리가 5분 동안 다시 `mount`되지 않으면, 해당 캐시는 가비지 컬렉션에 의해 삭제됩니다.
From dfb7655d25deae89b7331c9269d6ecb5d848d1b9 Mon Sep 17 00:00:00 2001
From: umsungjun <99730910+umsungjun@users.noreply.github.com>
Date: Sun, 8 Jun 2025 20:14:03 +0900
Subject: [PATCH 2/2] =?UTF-8?q?docs:=20v5=20cacheTime=20=E2=86=92=20gcTime?=
=?UTF-8?q?=20=EB=B3=80=EA=B2=BD=20=EB=B0=8F=205=EB=B2=88=20=EB=82=B4?=
=?UTF-8?q?=EC=9A=A9=20=EC=88=98=EC=A0=95,=20v4=20=EB=AC=B8=EC=84=9C?=
=?UTF-8?q?=EB=8F=84=20=ED=95=A8=EA=BB=98=20=EC=97=85=EB=8D=B0=EC=9D=B4?=
=?UTF-8?q?=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
README.md | 15 ++++++++++++---
README.v4.md | 15 ++++++++++++---
2 files changed, 24 insertions(+), 6 deletions(-)
diff --git a/README.md b/README.md
index 7d82d36..7b2a29a 100644
--- a/README.md
+++ b/README.md
@@ -207,13 +207,22 @@ function App() {
* Garbage Collection(가비지 컬렉션)
```
-- `gcTime`의 기본값 5분, `staleTime` 기본값 0초를 가정
+```tsx
+const result = useQuery({
+ queryKey: ["A"],
+ queryFn,
+ staleTime: 0, // (기본값 0초)
+ gcTime: 1000 * 60 * 5, // (기본값 5분)
+});
+```
1. `A`라는 `queryKey`를 가진 쿼리 인스턴스가 `mount`됩니다.
2. 네트워크 요청을 통해 데이터를 fetch하고, 해당 데이터는 `A`라는 `queryKey`로 캐싱됩니다.
3. 기본값인 `staleTime`이 0이므로, 데이터를 가져오자마자 바로 `stale` 상태로 전환됩니다.
-4. 쿼리 인스턴스가 `unmount`되면, TanStack Query는 해당 캐시를 `cacheTime`(기본값 5분)만큼 유지합니다.
-5. 만약 5분 이내에 `A` 쿼리가 다시 `mount`된다면, 캐시된 데이터를 즉시 화면에 보여주고, `cacheTime`은 다시 5분으로 초기화됩니다.
+4. 쿼리 인스턴스가 `unmount`되면, TanStack Query는 해당 캐시를 `gcTime`동안 유지합니다.
+5. 만약 5분 이내에 `A` 쿼리가 다시 `mount`된다면, 캐시된 데이터를 즉시 반환하고, 동시에 `queryFn`은 `background`에서 실행됩니다.
+ - `queryFn`이 성공적으로 실행되면 캐시를 최신 데이터로 채우며, `gcTime`은 다시 5분으로 초기화됩니다.
+ - [stale-while-revalidate(swr)](https://web.dev/articles/stale-while-revalidate?hl=ko) 전략 적용
6. 반면, 쿼리가 5분 동안 다시 `mount`되지 않으면, 해당 캐시는 가비지 컬렉션에 의해 삭제됩니다.
diff --git a/README.v4.md b/README.v4.md
index 78f206a..a4369c9 100644
--- a/README.v4.md
+++ b/README.v4.md
@@ -216,13 +216,22 @@ function App() {
* Garbage Collection(가비지 컬렉션)
```
-- `cacheTime`의 기본값 5분, `staleTime` 기본값 0초를 가정
+```tsx
+const result = useQuery({
+ queryKey: ["A"],
+ queryFn,
+ staleTime: 0, // (기본값 0초)
+ cacheTime: 1000 * 60 * 5, // (기본값 5분)
+});
+```
1. `A`라는 `queryKey`를 가진 쿼리 인스턴스가 `mount`됩니다.
2. 네트워크 요청을 통해 데이터를 fetch하고, 해당 데이터는 `A`라는 `queryKey`로 캐싱됩니다.
3. 기본값인 `staleTime`이 0이므로, 데이터를 가져오자마자 바로 `stale` 상태로 전환됩니다.
-4. 쿼리 인스턴스가 `unmount`되면, TanStack Query는 해당 캐시를 `cacheTime`(기본값 5분)만큼 유지합니다.
-5. 만약 5분 이내에 `A` 쿼리가 다시 `mount`된다면, 캐시된 데이터를 즉시 화면에 보여주고, `cacheTime`은 다시 5분으로 초기화됩니다.
+4. 쿼리 인스턴스가 `unmount`되면, TanStack Query는 해당 캐시를 `cacheTime`동안 유지합니다.
+5. 만약 5분 이내에 `A` 쿼리가 다시 `mount`된다면, 캐시된 데이터를 즉시 반환하고, 동시에 `queryFn`은 `background`에서 실행됩니다.
+ - `queryFn`이 성공적으로 실행되면 캐시를 최신 데이터로 채우며, `cacheTime`은 다시 5분으로 초기화됩니다.
+ - [stale-while-revalidate(swr)](https://web.dev/articles/stale-while-revalidate?hl=ko) 전략 적용
6. 반면, 쿼리가 5분 동안 다시 `mount`되지 않으면, 해당 캐시는 가비지 컬렉션에 의해 삭제됩니다.