Skip to content

Commit 892331f

Browse files
committed
docs: update startTransition.md
1 parent 63f4612 commit 892331f

File tree

1 file changed

+11
-19
lines changed

1 file changed

+11
-19
lines changed

src/content/reference/react/startTransition.md

+11-19
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,7 @@ title: startTransition
44

55
<Intro>
66

7-
`startTransition`은 UI를 Blocking 않고 상태를 업데이트할 수 있게 해줍니다.
8-
9-
`startTransition` lets you render a part of the UI in the background. {/*TODO*/}
7+
`startTransition`을 사용하면 UI의 일부를 백그라운드에서 렌더링할 수 있습니다.
108

119
```js
1210
startTransition(action)
@@ -22,7 +20,7 @@ startTransition(action)
2220

2321
### `startTransition(action)` {/*starttransition*/}
2422

25-
`startTransition` 함수는 상태 업데이트를 Transition 으로 표시할 수 있게 해줍니다.
23+
`startTransition` 함수는 State 업데이트를 Transition으로 표시할 수 있게 해줍니다.
2624

2725
```js {7,9}
2826
import { startTransition } from 'react';
@@ -39,45 +37,39 @@ function TabContainer() {
3937
}
4038
```
4139

42-
[See more examples below.](#usage)
40+
[아래 예시를 참고하세요.](#usage)
4341

4442
#### 매개변수 {/*parameters*/}
4543

46-
* `scope`: 하나 이상의 [`set` 함수](/reference/react/useState#setstate)를 호출하여 일부 state를 업데이트하는 함수입니다. React는 매개변수 없이 `scope`를 즉시 호출하고 `scope` 함수를 호출하는 동안 동기적으로 예약된 모든 state 업데이트를 Transition 으로 표시합니다. 이는 [non-blocking](/reference/react/useTransition#marking-a-state-update-as-a-non-blocking-transition)이며 [원치 않는 로딩을 표시하지 않습니다.](/reference/react/useTransition#preventing-unwanted-loading-indicators)
47-
48-
* `action`: A function that updates some state by calling one or more [`set` functions](/reference/react/useState#setstate). React calls `action` immediately with no parameters and marks all state updates scheduled synchronously during the `action` function call as Transitions. Any async calls awaited in the `action` will be included in the transition, but currently require wrapping any `set` functions after the `await` in an additional `startTransition` (see [Troubleshooting](/reference/react/useTransition#react-doesnt-treat-my-state-update-after-await-as-a-transition)). State updates marked as Transitions will be [non-blocking](#marking-a-state-update-as-a-non-blocking-transition) and [will not display unwanted loading indicators.](/reference/react/useTransition#preventing-unwanted-loading-indicators). {/*TODO*/}
44+
* `action`: 하나 이상의 [`set` 함수](/reference/react/useState#setstate)를 호출하여 일부 State를 업데이트하는 함수입니다. React는 매개변수 없이 `action`을 즉시 호출하고 `action` 함수를 호출하는 동안 동기적으로 예약된 모든 State 업데이트를 Transition으로 표시합니다. Any async calls awaited in the `action` will be included in the transition, but currently require wrapping any `set` functions after the `await` in an additional `startTransition` (see [Troubleshooting](/reference/react/useTransition#react-doesnt-treat-my-state-update-after-await-as-a-transition)). State updates marked as Transitions will be [non-blocking](#marking-a-state-update-as-a-non-blocking-transition) and [will not display unwanted loading indicators](/reference/react/useTransition#preventing-unwanted-loading-indicators).
4945

5046
#### 반환값 {/*returns*/}
5147

5248
`startTransition`은 아무것도 반환하지 않습니다.
5349

5450
#### 주의 사항 {/*caveats*/}
5551

56-
* `startTransition`Transition 이 진행 중인지 추적할 수 있는 방법을 제공하지 않습니다. 진행 중인 Transition 을 표시하려면 [`useTransition`](/reference/react/useTransition)이 필요합니다.
52+
* `startTransition`Transition이 대기<sup>Pending</sup> 중인지 추적할 수 있는 방법을 제공하지 않습니다. 대기 중인 Transition을 표시하려면 [`useTransition`](/reference/react/useTransition)이 필요합니다.
5753

58-
* 해당 state의 `set` 함수에 접근할 수 있는 경우에만 업데이트를 Transition 으로 래핑할 수 있습니다. 일부 props 이나 custom Hook 반환 값에 대한 응답으로 Transition 을 시작하려면 [`useDeferredValue`](/reference/react/useDeferredValue)를 대신 사용하세요.
59-
60-
* `startTransition` 에 전달하는 함수는 동기식이어야 합니다. React는 이 함수를 즉시 실행하여 실행하는 동안 발생하는 모든 state 업데이트를 Transition 으로 표시합니다. 나중에 더 많은 state 업데이트를 수행하려고 하면(예시: timeout), Transition 으로 표시되지 않습니다.
54+
* 해당 State의 `set` 함수에 접근할 수 있는 경우에만 업데이트를 Transition으로 래핑할 수 있습니다. 일부 Props나 Custom Hook 반환 값에 대한 응답으로 Transition을 시작하려면 [`useDeferredValue`](/reference/react/useDeferredValue)를 대신 사용하세요.
6155

6256
* The function you pass to `startTransition` is called immediately, marking all state updates that happen while it executes as Transitions. If you try to perform state updates in a `setTimeout`, for example, they won't be marked as Transitions. {/*TODO*/}
6357

6458
* You must wrap any state updates after any async requests in another `startTransition` to mark them as Transitions. This is a known limitation that we will fix in the future (see [Troubleshooting](/reference/react/useTransition#react-doesnt-treat-my-state-update-after-await-as-a-transition)).
6559

66-
* Transition 으로 표시된 state 업데이트는 다른 state 업데이트에 의해 중단됩니다. 예를 들어, Transition 내에서 차트 컴포넌트를 업데이트하지만 차트가 다시 렌더링되는 동안 입력을 시작하면 React는 입력 state 업데이트를 처리한 후 차트 컴포넌트에서 렌더링 작업을 다시 시작합니다.
60+
* Transition으로 표시된 State 업데이트는 다른 State 업데이트에 의해 중단됩니다. 예를 들어, Transition 내에서 차트 컴포넌트를 업데이트하지만 차트가 다시 렌더링되는 동안 입력을 시작하면 React는 입력 State 업데이트를 처리한 후 차트 컴포넌트에서 렌더링 작업을 다시 시작합니다.
6761

6862
* Transition 업데이트는 텍스트 입력을 제어하는 데 사용할 수 없습니다.
6963

70-
* 만약 진행 중인 Transition 이 여러 개 있는 경우, React에서는 함께 일괄 처리 합니다. 이는 향후 릴리즈에서 제거될 가능성이 높은 제한 사항입니다.
71-
72-
* If there are multiple ongoing Transitions, React currently batches them together. This is a limitation that may be removed in a future release. {/*TODO*/}
64+
* 만약 진행 중인 Transition이 여러 개 있는 경우, React에서는 함께 일괄 처리 합니다. 이는 향후 릴리즈에서 제거될 가능성이 높은 제한 사항입니다.
7365

7466
---
7567

7668
## 사용법 {/*usage*/}
7769

78-
### state 업데이트를 non-blocking Transition 으로 표시 {/*marking-a-state-update-as-a-non-blocking-transition*/}
70+
### State 업데이트를 Non-Blocking Transition으로 표시 {/*marking-a-state-update-as-a-non-blocking-transition*/}
7971

80-
`startTransition`으로 래핑함으로써 state 업데이트를 *Transition*으로 표시할 수 있습니다.
72+
`startTransition`으로 래핑함으로써 State 업데이트를 *Transition*으로 표시할 수 있습니다.
8173

8274
```js {7,9}
8375
import { startTransition } from 'react';
@@ -100,7 +92,7 @@ Transition을 사용하면 UI가 리렌더링 도중에도 반응성을 유지
10092

10193
<Note>
10294

103-
`startTransition`[`useTransition`](/reference/react/useTransition)과 매우 유사하지만, Transition 이 진행 중인지 추적하는 `isPending` 플래그를 제공하지 않습니다. `useTransition`을 사용할 수 없을 때 `startTransition`을 호출할 수 있습니다. 예를 들어, `startTransition`은 데이터 라이브러리에서와 같이 컴포넌트 외부에서 작동합니다.
95+
`startTransition`[`useTransition`](/reference/react/useTransition)과 매우 유사하지만, Transition이 대기 중인지 추적하는 `isPending` 플래그를 제공하지 않습니다. `useTransition`을 사용할 수 없을 때 `startTransition`을 호출할 수 있습니다. 예를 들어, `startTransition`은 데이터 라이브러리에서와 같이 컴포넌트 외부에서 작동합니다.
10496

10597
[Transition에 대한 학습 및 예시는 `useTransition` 페이지에서 확인하세요.](/reference/react/useTransition)
10698

0 commit comments

Comments
 (0)