Skip to content

docs: v4 문체 변경 #34

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ssi02014 merged 1 commit into from
May 16, 2024
Merged

docs: v4 문체 변경 #34

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 29 additions & 29 deletions document/v4.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@

### @tanstack/react-query

- v4부터 react-query에서 `@tanstack/react-query`로 패키지가 변경되었다. 따라서 설치와 import 할 때 주의해야 한다.
- v4부터 react-query에서 `@tanstack/react-query`로 패키지가 변경되었습니다. 따라서 설치와 import 할 때 주의해야 합니다.

```bash
$ npm i @tanstack/react-query
Expand All @@ -22,7 +22,7 @@ $ pnpm add @tanstack/react-query
$ yarn add @tanstack/react-query
```

- 또한, Devtools는 별도의 패키지 설치가 필요하다.
- 또한, Devtools는 별도의 패키지 설치가 필요합니다.

```bash
$ npm i @tanstack/react-query-devtools
Expand All @@ -32,7 +32,7 @@ $ pnpm add @tanstack/react-query-devtools
$ yarn add @tanstack/react-query-devtools
```

- import 시, 다음과 같이 패키지명을 수정하면 된다.
- import 시, 다음과 같이 패키지명을 수정하면 됩니다.

```diff
// v3
Expand All @@ -48,7 +48,7 @@ $ yarn add @tanstack/react-query-devtools

### 쿼리 키는 배열로 통일

- v3에서는 queryKey를 문자열 또는 배열로 지정할 수 있었다. 문자열과 배열 모두 사용할 수 있었는데 사실 React Query는 내부적으로는 항상 Array Keys로만 작동했었다. 그리고 이를 v4에서는 배열로 통일시킨다.
- v3에서는 queryKey를 문자열 또는 배열로 지정할 수 있었습니다. 문자열과 배열 모두 사용할 수 있었는데, 사실 React Query는 내부적으로는 항상 Array Keys로만 작동했습니다. 그리고 이를 v4에서는 배열로 통일하였습니다.

```diff
// v3
Expand Down Expand Up @@ -78,32 +78,32 @@ $ yarn add @tanstack/react-query-devtools
### fetchStatus가 추가

- [FetchStatus](https://tanstack.com/query/v4/docs/guides/queries#why-two-different-states)
- TanStack Query(v4) 새로운 상태값인 `fetchStatus`가 추가됐다.
- TanStack Query(v4) 새로운 상태값인 `fetchStatus`가 추가되었습니다.
- fetchStatus
- fetching: 쿼리가 현재 실행중이다.
- paused: 쿼리를 요청했지만, 잠시 중단된 상태
- idle: 쿼리가 현재 아무 작업도 수행하지 않고 있다.
- fetching: 쿼리가 현재 실행 중입니다.
- paused: 쿼리를 요청했지만, 잠시 중단된 상태입니다.
- idle: 쿼리가 현재 아무 작업도 수행하지 않고 있습니다.

<br />

### 왜 status, fetchStatus 나눠서 다루는 걸까?

- fetchStatus는 HTTP 네트워크 연결 상태와 좀 더 관련된 상태 데이터이다.
- 예를 들어, status가 `success` 상태라면 주로 fetchStatus는 `idle` 상태지만, 백그라운드에서 re-fetch가 발생할 때 `fetching` 상태일 수 있다.
- status가 보통 `loading` 상태일 때 fetchStatus는 주로 `fetching`를 갖지만, 네트워크 연결이 되어 있지 않은 경우 `paused` 상태를 가질 수 있다.
- fetchStatus는 HTTP 네트워크 연결 상태와 좀 더 관련된 상태 데이터입니다.
- 예를 들어, status가 `success` 상태라면 주로 fetchStatus는 `idle` 상태지만, 백그라운드에서 re-fetch가 발생할 때 `fetching` 상태일 수 있습니다.
- status가 보통 `loading` 상태일 때 fetchStatus는 주로 `fetching`를 갖지만, 네트워크 연결이 되어 있지 않은 경우 `paused` 상태를 가질 수 있습니다.
- 정리하자면 아래와 같다.

- status는 `data`가 있는지 없는지에 대한 상태
- fetchStatus는 쿼리 즉, `queryFn 요청`이 진행중인지 아닌지에 대한 상태
- status는 `data`가 있는지 없는지에 대한 상태입니다.
- fetchStatus는 쿼리 즉, `queryFn 요청`이 진행중인지 아닌지에 대한 상태입니다.

- [why-two-different-states](https://tanstack.com/query/v4/docs/react/guides/queries#why-two-different-states)

<br />

### useQueries

- v4부터 `useQueries`는 인자로 `queries` 프로퍼티를 가진 객체를 넘겨줄 수 있다.
- `queries`의 값은 쿼리 배열인데 이는 v3에서 useQueries에게 넘겨주던 쿼리 배열과 동일하다.
- v4부터 `useQueries`는 인자로 `queries` 프로퍼티를 가진 객체를 넘겨줄 수 있습니다.
- `queries`의 값은 쿼리 배열인데, 이는 v3에서 useQueries에게 넘겨주던 쿼리 배열과 동일합니다.

```js
// v3
Expand All @@ -125,8 +125,8 @@ useQueries({

### networkMode

- 기본적으로 react-query는 promise를 반환하는 모든 것에 사용할 수 있는 비동기 상태 관리 라이브러리이며, 이는 axios와 같은 data fetching 라이브러리와 가장 많이 사용되어진다.
- 그렇기 때문에 네트워크 연결이 없는 경우 기본적으로 query와 mutation이 일시중지 된다. 이때, 이전 동작을 실행하려면 `networkMode`를 설정해주면 된다.
- 기본적으로 react-query는 promise를 반환하는 모든 것에 사용할 수 있는 비동기 상태 관리 라이브러리이며, 이는 axios와 같은 data fetching 라이브러리와 가장 많이 사용됩니다.
- 그렇기 때문에 네트워크 연결이 없는 경우 기본적으로 query와 mutation이 일시중지 됩니다. 이때, 이전 동작을 실행하려면 `networkMode`를 설정해주면 됩니다.

```js
new QueryClient({
Expand All @@ -135,23 +135,23 @@ new QueryClient({
networkMode: "offlineFirst", // (+)
},
mutations: {
networkmode: "offlineFirst", // (+)
networkMode: "offlineFirst", // (+)
},
},
});
```

- networkMode의 설정값은 3가지가 있다.
- online: 오프라인 상태에서 network 연결이 있기 전까지 fetch를 하지 않고, 이때 쿼리의 상태를 `fetchStatus:paused`로 표시한다.
- always: 오프라인 상태에서도 온라인처럼 fetch를 시도합니다. 오프라인 상태에서 요청을 보내는 것이니 `status:error` 상태가 된다.
- offlineFirst: `v3`에서의 동작과 같습니다. queryFn 최초 호출 후 retry를 멈춘다.
- networkMode의 설정값은 3가지가 있습니다.
- online: 오프라인 상태에서 network 연결이 있기 전까지 fetch를 하지 않고, 이때 쿼리의 상태를 `fetchStatus:paused`로 표시합니다.
- always: 오프라인 상태에서도 온라인처럼 fetch를 시도합니다. 오프라인 상태에서 요청을 보내는 것이니 `status:error` 상태가 됩니다.
- offlineFirst: `v3`에서의 동작과 같습니다. queryFn 최초 호출 후 retry를 멈춥니다.

<br />

### Query Filters

- query filter는 query와 일치하는 특정 조건을 가진 객체다.
- 지금까지 필터 옵션은 대부분 boolean flag 조합이었습니다. 하지만 이러한 flag를 조합하면 `불가능한 상태`가 발생할 수 있다.
- query filter는 query와 일치하는 특정 조건을 가진 객체입니다.
- 지금까지 필터 옵션은 대부분 boolean flag 조합이었습니다. 하지만 이러한 flag를 조합하면 `불가능한 상태`가 발생할 수 있습니다.

```
active?: boolean
Expand All @@ -162,8 +162,8 @@ inactive?: boolean
- When set to false it will match active queries.
```

- 예를 들어 위와 같은 `active`, `inactive` 두 옵션은 서로 `상호 배타적`이다. 이 둘 모두를 false으로 설정한다면? 이는 말이 되지 않는다.
- v4부터는 이를 type이라는 속성으로 통일시켜서 의도를 더 잘 보여줄 수 있게 됐다.
- 예를 들어 위와 같은 `active`, `inactive` 두 옵션은 서로 `상호 배타적`입니다. 이 둘 모두를 false으로 설정한다면? 이는 말이 되지 않습니다.
- v4부터는 이를 type이라는 속성으로 통일시켜서 의도를 더 잘 보여줄 수 있게 되었습니다.

```diff
// v3
Expand All @@ -174,7 +174,7 @@ inactive?: boolean
+ type?: 'active' | 'inactive' | 'all'
```

- type 속성은 기본적으로 `all`로 설정되며, active 또는 inactive 쿼리만 일치하도록 선택할 수 있다.
- type 속성은 기본적으로 `all`로 설정되며, active 또는 inactive 쿼리만 일치하도록 선택할 수 있습니다.

```js
// Cancel all queries
Expand All @@ -194,12 +194,12 @@ await queryClient.refetchQueries({ queryKey: ['posts'], type: 'active' })

### React18 지원

- v4는 `React18`에대한 최고 수준의 지원과 함께 새로운 기능을 제공한다.
- v4는 `React18`에대한 최고 수준의 지원과 함께 새로운 기능을 제공합니다.

<br />

### 타입스크립트

- [v4는 TypeScript `v4.1` 이상을 요구한다.](https://tanstack.com/query/v4/docs/react/guides/migrating-to-react-query-4#typescript)
- [v4는 TypeScript `v4.1` 이상을 요구합니다.](https://tanstack.com/query/v4/docs/react/guides/migrating-to-react-query-4#typescript)

<br />