docs: v3 -> v4 버전 변화 가시화를 위한 diff 추가

Author: seiwonpark

document/v4.md

@@ -31,47 +31,50 @@
     # or
     $ yarn add @tanstack/react-query-devtools
     ```
+- import 시, 다음과 같이 패키지명을 수정하면 된다.
 
-```js
-// v3
-import { useQuery } from "react-query"; // (-)
-import { ReactQueryDevtools } from "react-query/devtools"; // (-)
+    ```diff
+    // v3
+    - import { useQuery } from "react-query";
+    - import { ReactQueryDevtools } from "react-query/devtools";
 
-// v4
-import { useQuery } from "@tanstack/react-query"; // (+)
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; // (+)
-```
+    // v4
+    + import { useQuery } from "@tanstack/react-query";
+    + import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+    ```
 
 <br />
 
 ### 쿼리 키는 배열로 통일
 
 - v3에서는 queryKey를 문자열 또는 배열로 지정할 수 있었다. 문자열과 배열 모두 사용할 수 있었는데 사실 React Query는 내부적으로는 항상 Array Keys로만 작동했었다. 그리고 이를 v4에서는 배열로 통일시킨다.
 
-```js
+```diff
 // v3
-useQuery("todos", fetchTodos); // (-)
+- useQuery("todos", fetchTodos);
 
 // v4
-useQuery(["todos"], fetchTodos); // (+)
++ useQuery(["todos"], fetchTodos);
 ```
 
 <br />
 
 ### status idle 상태 제거
 
-- v4부터 더 나은 오프라인 지원을위한 fetchStatus가 도입되면서 기존의 `idle`가 무의미해 졌습니다.
+- v4부터 더 나은 오프라인 지원을 위한 `fetchStatus`가 도입되면서 기존의 `idle`이 무의미해졌습니다.
 
-```js
-status: "idle"; // (-)
+```diff
+// v3
+- status: "idle";
 
-status: "loading"; // (+)
-fetchStatus: "idle"; // (+)
+// v4
++ status: "loading";
++ fetchStatus: "idle";
 ```
 
 <br />
 
-### fetchStatus가 추가
+### fetchStatus가 추가 됨
 
 - [FetchStatus](https://tanstack.com/query/v4/docs/guides/queries#why-two-different-states)
 - TanStack Query(v4) 새로운 상태값인 `fetchStatus`가 추가됐다.
@@ -157,9 +160,12 @@ inactive?: boolean
 - 예를 들어 위와 같은 `active`, `inactive` 두 옵션은 서로 `상호 배타적`이다. 이 둘 모두를 false으로 설정한다면? 이는 말이 되지 않는다.
 - v4부터는 이를 type이라는 속성으로 통일시켜서 의도를 더 잘 보여줄 수 있게 됐다.
 
-```
+```diff
+// v3
 - active?: boolean
 - inactive?: boolean
+
+// v4
 + type?: 'active' | 'inactive' | 'all'
 ```
 
@@ -189,6 +195,6 @@ await queryClient.refetchQueries({ queryKey: ['posts'], type: 'active' })
 
 ### 타입스크립트
 
-- v4는 TypeScript `v4.1` 이상을 요구한다.
+- [v4는 TypeScript `v4.1` 이상을 요구한다.](https://tanstack.com/query/v4/docs/react/guides/migrating-to-react-query-4#typescript)
 
 <br />