Skip to content

Commit 6249e3f

Browse files
authored
Fix minor translation errors in blog post
1 parent 33c372a commit 6249e3f

File tree

1 file changed

+12
-12
lines changed

1 file changed

+12
-12
lines changed

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

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4895,7 +4895,7 @@ root.render(
48954895

48964896
</Sandpack>
48974897

4898-
기본적으로 React는 Transition에 활성화된 각 요소에 대해 고유한 `name`을 자동으로 생성합니다. ([`<ViewTransition>`이 어떻게 동작하는지 참고하세요.](/reference/react/ViewTransition#how-does-viewtransition-work)) React가 어떤 Transition에서 특정 `name`을 가진 `<ViewTransition>`이 제거되고, 동일한 `name`을 가진 새로운 `<ViewTransition>`이 추가된 것을 감지하면 공유 엘리먼트 전환<sup>Shared Element Transition</sup>을 활성화합니다.
4898+
기본적으로 React는 Transition에 활성화된 각 요소에 대해 고유한 `name`을 자동으로 생성합니다. ([`<ViewTransition>`이 어떻게 동작하는지 참고하세요.](/reference/react/ViewTransition#how-does-viewtransition-work)) React가 어떤 Transition에서 특정 `name`을 가진 `<ViewTransition>`이 제거되고, 동일한 `name`을 가진 새로운 `<ViewTransition>`이 추가된 것을 감지하면 공유 요소 전환<sup>Shared Element Transition</sup>을 활성화합니다.
48994899

49004900
자세한 내용은 [Animating a Shared Element](/reference/react/ViewTransition#animating-a-shared-element) 문서를 참고하세요.
49014901

@@ -4920,7 +4920,7 @@ function navigateBack(url) {
49204920
}
49214921
```
49224922

4923-
Transition types을 사용하면 `<ViewTransition>`props를 통해 커스텀 애니메이션을 제공할 수 있습니다. '6 Videos''Back' 헤더에 공유 엘리먼트 Transition을 추가해 보겠습니다:
4923+
Transition Types을 사용하면 `<ViewTransition>`Props를 통해 커스텀 애니메이션을 제공할 수 있습니다. "6 Videos""Back" 헤더에 공유 엘리먼트 Transition을 추가해 보겠습니다.
49244924

49254925
```js {4,5}
49264926
<ViewTransition
@@ -4933,7 +4933,7 @@ Transition types을 사용하면 `<ViewTransition>`에 props를 통해 커스텀
49334933
</ViewTransition>
49344934
```
49354935

4936-
여기에서는 `share` prop을 전달하여 transition type에 따라 어떻게 애니메이션을 적용할지 정의합니다. `nav-forward`로 인해 공통의 transition이 활성화되면, view transition 클래스인 `slide-forward`가 적용됩니다. `nav-back`로 인해 활성화되면, `slide-back` 애니메이션이 활성화됩니다. CSS에서 이러한 애니메이션을 정의해 보겠습니다.
4936+
여기에서는 `share` Prop을 전달하여 Transition Type에 따라 어떻게 애니메이션을 적용할지 정의합니다. `nav-forward`로 인해 공통 Transition이 활성화되면, View Transition 클래스인 `slide-forward`가 적용됩니다. `nav-back`로 인해 활성화되면, `slide-back` 애니메이션이 활성화됩니다. CSS에서 이러한 애니메이션을 정의해 보겠습니다.
49374937

49384938
```css
49394939
::view-transition-old(.slide-forward) {
@@ -4957,7 +4957,7 @@ Transition types을 사용하면 `<ViewTransition>`에 props를 통해 커스텀
49574957
}
49584958
```
49594959

4960-
이제 navigation type에 따라 썸네일과 헤더에 애니메이션을 적용할 수 있습니다:
4960+
이제 Navigation Type에 따라 썸네일과 헤더에 애니메이션을 적용할 수 있습니다.
49614961

49624962
<Sandpack>
49634963

@@ -6213,9 +6213,9 @@ root.render(
62136213

62146214
### Suspense Boundaries 애니메이팅 {/*animating-suspense-boundaries*/}
62156215

6216-
Suspense 역시 View Transitions을 활성화합니다.
6216+
Suspense 역시 View Transition을 활성화합니다.
62176217

6218-
콘텐츠에 대한 폴백 애니메이션을 적용하려면 `Suspense``<ViewTranstion>`으로 래핑하면 됩니다:
6218+
콘텐츠에 대한 폴백 애니메이션을 적용하려면 `Suspense``<ViewTranstion>`으로 래핑하면 됩니다.
62196219

62206220
```js
62216221
<ViewTransition>
@@ -6225,7 +6225,7 @@ Suspense 역시 View Transitions을 활성화합니다.
62256225
</ViewTransition>
62266226
```
62276227

6228-
이를 추가하면 폴백이 콘텐츠에 크로스 페이드됩니다. 동영상을 클릭하면 동영상 정보에 애니메이션이 적용됩니다:
6228+
이를 추가하면 폴백이 콘텐츠에 크로스 페이드됩니다. 동영상을 클릭하면 동영상 정보에 애니메이션이 적용됩니다.
62296229

62306230
<Sandpack>
62316231

@@ -10175,7 +10175,7 @@ root.render(
1017510175

1017610176
몇 개의 `<ViewTransition>` 컴포넌트와 몇 줄의 CSS를 추가하여 위의 모든 애니메이션을 최종 결과물에 추가할 수 있었습니다.
1017710177

10178-
저희는 View Transition이 여러분의 앱 제작 수준을 한 단계 높여줄 것으로 기대하고 있습니다. 오늘부터 React 릴리즈의 experimental 채널에서 사용해 볼 수 있습니다.
10178+
저희는 View Transition이 여러분의 앱 제작 수준을 한 단계 높여줄 것으로 기대하고 있습니다. 오늘부터 React 릴리즈의 Experimental 채널에서 사용해 볼 수 있습니다.
1017910179

1018010180
이제 느린 페이드 효과를 제거하고, 최종 결과물을 살펴봅시다.
1018110181

@@ -11459,7 +11459,7 @@ root.render(
1145911459

1146011460
작동 방식에 대해 자세히 알고 싶다면 문서에서 [`<ViewTransition>`의 작동 방식](/reference/react/ViewTransition#how-does-viewtransition-work)을 확인하세요.
1146111461

11462-
_View Transition을 구축한 배경에 대한 자세한 내용은 다음을 참조하세요. [#31975](https://github.com/facebook/react/pull/31975), [#32105](https://github.com/facebook/react/pull/32105), [#32041](https://github.com/facebook/react/pull/32041), [#32734](https://github.com/facebook/react/pull/32734), [#32797](https://github.com/facebook/react/pull/32797) [#31999](https://github.com/facebook/react/pull/31999), [#32031](https://github.com/facebook/react/pull/32031), [#32050](https://github.com/facebook/react/pull/32050), [#32820](https://github.com/facebook/react/pull/32820), [#32029](https://github.com/facebook/react/pull/32029), [#32028](https://github.com/facebook/react/pull/32028), and [#32038](https://github.com/facebook/react/pull/32038) by [@sebmarkbage](https://twitter.com/sebmarkbage) (Seb 감사합니다!)_
11462+
_View Transition을 구축한 배경에 대한 자세한 내용은 다음을 참조하세요. [#31975](https://github.com/facebook/react/pull/31975), [#32105](https://github.com/facebook/react/pull/32105), [#32041](https://github.com/facebook/react/pull/32041), [#32734](https://github.com/facebook/react/pull/32734), [#32797](https://github.com/facebook/react/pull/32797) [#31999](https://github.com/facebook/react/pull/31999), [#32031](https://github.com/facebook/react/pull/32031), [#32050](https://github.com/facebook/react/pull/32050), [#32820](https://github.com/facebook/react/pull/32820), [#32029](https://github.com/facebook/react/pull/32029), [#32028](https://github.com/facebook/react/pull/32028), and [#32038](https://github.com/facebook/react/pull/32038) by [@sebmarkbage](https://twitter.com/sebmarkbage) (Seb에게 감사합니다!)_
1146311463

1146411464
---
1146511465

@@ -11477,17 +11477,17 @@ _View Transition을 구축한 배경에 대한 자세한 내용은 다음을 참
1147711477
</Activity>
1147811478
```
1147911479

11480-
Activity가 <CodeStep step={1}>visible</CodeStep>하면 정상적으로 렌더링됩니다. Activity가 <CodeStep step={2}>hidden</CodeStep>하면 마운트 해제되지만, 상태를 저장하고 화면에 표시되는 항목보다 낮은 우선 순위로 계속 렌더링됩니다.
11480+
Activity가 <CodeStep step={1}>visible</CodeStep>하면 정상적으로 렌더링됩니다. Activity가 <CodeStep step={2}>hidden</CodeStep>이면 마운트 해제되지만, 상태를 저장하고 화면에 표시되는 항목보다 낮은 우선 순위로 계속 렌더링됩니다.
1148111481

1148211482
`Activity`를 사용하여 사용자가 사용하지 않는 UI 부분의 상태를 저장하거나 사용자가 다음에 사용할 가능성이 있는 부분을 미리 렌더링할 수 있습니다.
1148311483

1148411484
위의 View Transition 예시를 개선한 몇 가지 예시를 살펴보겠습니다.
1148511485

1148611486
<Note>
1148711487

11488-
**Activity가 숨겨져 있으면 Effects는 마운트되지 않습니다.**
11488+
**Activity가 숨겨져 있으면 Effect는 마운트되지 않습니다.**
1148911489

11490-
`<Activity>``hidden`이면 Effects가 마운트 해제됩니다. 개념적으로는 컴포넌트가 마운트 해제되지만 React는 나중에 사용할 수 있도록 상태를 저장합니다.
11490+
`<Activity>``hidden`이면 Effect가 마운트 해제됩니다. 개념적으로는 컴포넌트가 마운트 해제되지만 React는 나중에 사용할 수 있도록 상태를 저장합니다.
1149111491

1149211492
실제로는 [Effect가 필요하지 않은 경우](/learn/you-might-not-need-an-effect) 가이드를 따랐다면 예상대로 작동합니다. 문제가 있는 Effect를 열심히 찾으려면, 예상치 못한 사이드 이펙트를 발견하기 위해 Activity 마운트 해제와 마운트를 열심히 수행하는 [`<StrictMode>`](/reference/react/StrictMode)를 추가하는 것이 좋습니다.
1149311493

0 commit comments

Comments
 (0)