Skip to content

Commit 2009420

Browse files
hyojin-klumirlumir
andauthored
�docs: translate useTransition, ViewTransition animation (#1281)
<!-- PR을 보내주셔서 감사합니다! 여러분과 같은 기여자들이 React를 더욱 멋지게 만듭니다! 기존 이슈와 관련된 PR이라면, 아래에 이슈 번호를 추가해주세요. --> # <!-- 제목을 작성해주세요. --> # useTransition 번역 누락 항목, ViewTransition animation 번역 작업 <!-- 어떤 종류의 PR인지 상세 내용을 작성해주세요. --> 이슈 링크 : #1279 1. useTransition 누락된 번역 API 참고서 > Hook > [ useTransition ](https://ko.react.dev/blog/2025/04/23/react-labs-view-transitions-activity-and-more#animating-navigations) <img width="949" height="279" alt="image" src="https://github.com/user-attachments/assets/665f8a5a-b91e-4458-b614-f90bf6897d52" /> 2. ViewTransition animation 번역 블로그 > [React Labs: View Transitions, Activity, and more](https://ko.react.dev/blog/2025/04/23/react-labs-view-transitions-activity-and-more#animating-navigations) <img width="988" height="736" alt="image" src="https://github.com/user-attachments/assets/015187fb-ce11-450d-b327-acb799e55d42" /> ## 필수 확인 사항 - [x] [기여자 행동 강령 규약<sup>Code of Conduct</sup>](https://github.com/reactjs/ko.react.dev/blob/main/CODE_OF_CONDUCT.md) - [x] [기여 가이드라인<sup>Contributing</sup>](https://github.com/reactjs/ko.react.dev/blob/main/CONTRIBUTING.md) - [x] [공통 스타일 가이드<sup>Universal Style Guide</sup>](https://github.com/reactjs/ko.react.dev/blob/main/wiki/universal-style-guide.md) - [x] [번역을 위한 모범 사례<sup>Best Practices for Translation</sup>](https://github.com/reactjs/ko.react.dev/blob/main/wiki/best-practices-for-translation.md) - [x] [번역 용어 정리<sup>Translate Glossary</sup>](https://github.com/reactjs/ko.react.dev/blob/main/wiki/translate-glossary.md) - [x] [`textlint` 가이드<sup>Textlint Guide</sup>](https://github.com/reactjs/ko.react.dev/blob/main/wiki/textlint-guide.md) - [x] [맞춤법 검사<sup>Spelling Check</sup>](https://nara-speller.co.kr/speller/) ## 선택 확인 사항 - [ ] 번역 초안 작성<sup>Draft Translation</sup> - [ ] 리뷰 반영<sup>Resolve Reviews</sup> --------- Co-authored-by: 루밀LuMir <[email protected]>
1 parent fd5f324 commit 2009420

File tree

2 files changed

+8
-8
lines changed

2 files changed

+8
-8
lines changed

src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2458,17 +2458,17 @@ root.render(
24582458

24592459
</Sandpack>
24602460

2461-
Since our router already updates the route using `startTransition`, this one line change to add `<ViewTransition>` activates with the default cross-fade animation.
2461+
라우터가 이미 `startTransition`을 사용해서 라우트를 업데이트하고 있기 때문에, `<ViewTransition>`을 한 줄 추가하는 것만으로 기본 크로스 페이드 애니메이션이 활성화됩니다.
24622462

2463-
If you're curious how this works, see the docs for [How does `<ViewTransition>` work?](/reference/react/ViewTransition#how-does-viewtransition-work)
2463+
어떻게 동작하는지 궁금하다면 [How does `<ViewTransition>` work?](/reference/react/ViewTransition#how-does-viewtransition-work) 문서를 참고하세요.
24642464

24652465
<Note>
24662466

2467-
#### Opting out of `<ViewTransition>` animations {/*opting-out-of-viewtransition-animations*/}
2467+
#### `<ViewTransition>` 애니메이션 건너뛰기 {/*opting-out-of-viewtransition-animations*/}
24682468

2469-
In this example, we're wrapping the root of the app in `<ViewTransition>` for simplicity, but this means that all transitions in the app will be animated, which can lead to unexpected animations.
2469+
이 예시에서 단순화를 위해 앱의 루트를 `<ViewTransition>`으로 감싸고 있지만, 이렇게 하면 앱 내의 모든 트랜지션이 애니메이션 되어 예상치 못한 애니메이션이 발생할 수 있습니다.
24702470

2471-
To fix, we're wrapping route children with `"none"` so each page can control its own animation:
2471+
이를 해결하기 위해 각 페이지에서 자체적으로 애니메이션을 제어할 수 있도록 라우트 자식 요소를 `"none"`으로 감싸고 있습니다.
24722472

24732473
```js
24742474
// Layout.js
@@ -2477,7 +2477,7 @@ To fix, we're wrapping route children with `"none"` so each page can control its
24772477
</ViewTransition>
24782478
```
24792479

2480-
In practice, navigations should be done via "enter" and "exit" props, or by using Transition Types.
2480+
실제로 네비게이션은 "enter""exit" Props 또는 Transition Types를 사용해서 처리하는 것이 좋습니다.
24812481

24822482
</Note>
24832483

src/content/reference/react/useTransition.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -744,9 +744,9 @@ b { display: inline-block; margin-right: 10px; }
744744

745745
<Note>
746746

747-
When exposing an `action` prop from a component, you should `await` it inside the transition.
747+
컴포넌트에서 `action` Prop을 노출할 때는 Transition 내부에서 `await` 해야 합니다.
748748

749-
This allows the `action` callback to be either synchronous or asynchronous without requiring an additional `startTransition` to wrap the `await` in the action.
749+
이렇게 하면 `action` 콜백이 동기적이든 비동기적이든 상관없이 작동할 수 있으며, `action` 내부의 `await`을 추가적인 `startTransition`으로 감쌀 필요가 없습니다.
750750

751751
</Note>
752752

0 commit comments

Comments
 (0)