You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Resolve conflicts: accept English content from react.dev sync
Resolved all conflict markers in 56 MD files by accepting English content
(theirs) over existing Korean translations (ours) as part of PR #1342 sync.
- Processed 56 files with 150 total conflicts
- Accepted upstream English content from react.dev @ 0d05d9b
- Fixed orphaned conflict markers and linting errors
- Korean translations will be updated in subsequent commits
Copy file name to clipboardExpand all lines: src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md
-4Lines changed: 0 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -107,11 +107,7 @@ Activity는 여전히 연구 중이며, 라이브러리 개발자에게 노출
107
107
108
108
이번 업데이트 외에도 우리 팀은 컨퍼런스에서 발표하고 팟캐스트 출연을 통해 우리의 작업에 관해 이야기를 나누고 질문에 답변했습니다.
109
109
110
-
<<<<<<< HEAD
111
-
-[Sathya Gunasekaran](/community/team#sathya-gunasekaran)은 [React India](https://www.youtube.com/watch?v=kjOacmVsLSE) 컨퍼런스에서 React 컴파일러에 관해 이야기했습니다.
112
-
=======
113
110
-[Sathya Gunasekaran](https://github.com/gsathya) spoke about the React Compiler at the [React India](https://www.youtube.com/watch?v=kjOacmVsLSE) conference
114
-
>>>>>>> 0d05d9b6ef0f115ec0b96a2726ab0699a9ebafe1
115
111
116
112
-[Dan Abramov](/community/team#dan-abramov)은 [RemixConf](https://www.youtube.com/watch?v=zMf_xeGPn6s)에서 "다른 차원의 React"를 주제로 강연했습니다. 이곳에서 React 서버 컴포넌트와 액션을 어떻게 만들었는지에 관한 대안적인 역사를 탐구했습니다.
Copy file name to clipboardExpand all lines: src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md
-77Lines changed: 0 additions & 77 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -18,17 +18,9 @@ React Labs 게시글에는 활발히 연구 개발 중인 프로젝트에 대한
18
18
19
19
<Note>
20
20
21
-
<<<<<<< HEAD
22
-
React Conf 2025가 네바다주 헨더슨에서 10월 7-8일에 개최될 예정입니다!
23
-
24
-
이번 게시글에서 다루는 기능들에 대한 발표를 준비해주실 연사분들을 찾고 있습니다. ReactConf에서 발표에 관심이 있으시다면 [여기에서 지원해주세요](https://forms.reform.app/react-conf/call-for-speakers/) (발표 제안서 제출은 필요하지 않습니다).
25
-
26
-
티켓, 무료 스트리밍, 후원 등에 대한 더 많은 정보는 [React Conf 웹사이트](https://conf.react.dev)를 참고하세요.
27
-
=======
28
21
React Conf 2025 is scheduled for October 7–8 in Henderson, Nevada!
29
22
30
23
Watch the livestream on [the React Conf website](https://conf.react.dev).
31
-
>>>>>>> 0d05d9b6ef0f115ec0b96a2726ab0699a9ebafe1
32
24
33
25
</Note>
34
26
@@ -74,11 +66,7 @@ React View Transitions는 앱의 UI 전환에 애니메이션을 더 쉽게 추
74
66
</ViewTransition>
75
67
```
76
68
77
-
<<<<<<< HEAD
78
-
이 새로운 컴포넌트를 사용하면 애니메이션이 활성화될 때 무엇을 애니메이션할지 선언적으로 정의할 수 있습니다.
79
-
=======
80
69
This new component lets you declaratively define "what" to animate when an animation is activated.
81
-
>>>>>>> 0d05d9b6ef0f115ec0b96a2726ab0699a9ebafe1
82
70
83
71
View Transition에 대한 다음 세 가지 트리거 중 하나를 사용해서 "언제" 애니메이션할지 정의할 수 있습니다.
`startTransition`, `useDeferredValue`, 또는 `Suspense` 폴백이 콘텐츠로 전환되는 것과 같은 애니메이션 트리거로 인해 DOM이 업데이트되면, React는 [선언적 휴리스틱](/reference/react/ViewTransition#viewtransition)을 사용해서 애니메이션을 위해 활성화할 `<ViewTransition>` 컴포넌트를 자동으로 결정합니다. 그러면 브라우저가 CSS에서 정의된 애니메이션을 실행합니다.
113
101
114
-
<<<<<<< HEAD
115
-
브라우저의 View Transition API에 익숙하고 React가 이를 어떻게 지원하는지 알고 싶다면, 문서의 [How does `<ViewTransition>` Work](/reference/react/ViewTransition#how-does-viewtransition-work)를 확인해보세요.
116
-
117
-
이번 게시글에서는 View Transitions를 사용하는 몇 가지 예시를 살펴보겠습니다.
118
-
=======
119
102
If you're familiar with the browser's View Transition API and want to know how React supports it, check out [How does `<ViewTransition>` Work](/reference/react/ViewTransition#how-does-viewtransition-work) in the docs.
120
103
121
104
In this post, let's take a look at a few examples of how to use View Transitions.
122
-
>>>>>>> 0d05d9b6ef0f115ec0b96a2726ab0699a9ebafe1
123
105
124
106
다음과 같은 상호작용을 애니메이션하지 않는 앱부터 시작하겠습니다.
125
107
- 비디오를 클릭해서 세부 정보를 봅니다.
@@ -1312,11 +1294,7 @@ function navigate(url) {
1312
1294
`url`이 변경되면, `<ViewTransition>`과 새로운 라우트가 렌더링됩니다. `<ViewTransition>`이 `startTransition` 내부에서 업데이트되었으므로, `<ViewTransition>`이 애니메이션을 위해 활성화됩니다.
1313
1295
1314
1296
1315
-
<<<<<<< HEAD
1316
-
기본적으로, View Transitions는 브라우저 기본 크로스 페이드 애니메이션을 포함합니다. 이를 예시에 추가하면, 이제 페이지 간 네비게이션할 때마다 크로스 페이드가 적용됩니다.
1317
-
=======
1318
1297
By default, View Transitions include the browser default cross-fade animation. Adding this to our example, we now have a cross-fade whenever we navigate between pages:
1319
-
>>>>>>> 0d05d9b6ef0f115ec0b96a2726ab0699a9ebafe1
1320
1298
1321
1299
<Sandpack>
1322
1300
@@ -2479,23 +2457,15 @@ root.render(
2479
2457
2480
2458
</Sandpack>
2481
2459
2482
-
<<<<<<< HEAD
2483
-
라우터가 이미 `startTransition`을 사용해서 라우트를 업데이트하고 있기 때문에, `<ViewTransition>`을 한 줄 추가하는 것만으로 기본 크로스 페이드 애니메이션이 활성화됩니다.
2484
-
=======
2485
2460
Since our router already updates the route using `startTransition`, this one line change to add `<ViewTransition>` activates with the default cross-fade animation.
2486
-
>>>>>>> 0d05d9b6ef0f115ec0b96a2726ab0699a9ebafe1
2487
2461
2488
2462
어떻게 동작하는지 궁금하다면 [How does `<ViewTransition>` work?](/reference/react/ViewTransition#how-does-viewtransition-work) 문서를 참고하세요.
2489
2463
2490
2464
<Note>
2491
2465
2492
2466
#### `<ViewTransition>` 애니메이션 건너뛰기 {/*opting-out-of-viewtransition-animations*/}
2493
2467
2494
-
<<<<<<< HEAD
2495
-
이 예시에서 단순화를 위해 앱의 루트를 `<ViewTransition>`으로 감싸고 있지만, 이렇게 하면 앱 내의 모든 트랜지션이 애니메이션 되어 예상치 못한 애니메이션이 발생할 수 있습니다.
2496
-
=======
2497
2468
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.
2498
-
>>>>>>> 0d05d9b6ef0f115ec0b96a2726ab0699a9ebafe1
2499
2469
2500
2470
이를 해결하기 위해 각 페이지에서 자체적으로 애니메이션을 제어할 수 있도록 라우트 자식 요소를 `"none"`으로 감싸고 있습니다.
2501
2471
@@ -2506,11 +2476,7 @@ In this example, we're wrapping the root of the app in `<ViewTransition>` for si
2506
2476
</ViewTransition>
2507
2477
```
2508
2478
2509
-
<<<<<<< HEAD
2510
-
실제로 네비게이션은 "enter"와 "exit" Props 또는 Transition Types를 사용해서 처리하는 것이 좋습니다.
2511
-
=======
2512
2479
In practice, navigations should be done via "enter" and "exit" props, or by using Transition Types.
2513
-
>>>>>>> 0d05d9b6ef0f115ec0b96a2726ab0699a9ebafe1
2514
2480
2515
2481
</Note>
2516
2482
@@ -2528,11 +2494,7 @@ In practice, navigations should be done via "enter" and "exit" props, or by usin
2528
2494
</ViewTransition>
2529
2495
```
2530
2496
2531
-
<<<<<<< HEAD
2532
-
그리고 [View Transition 클래스](/reference/react/ViewTransition#view-transition-classes)를 사용하여 CSS에서 `slow-fade`를 정의합니다.
2533
-
=======
2534
2497
And define `slow-fade` in CSS using [view transition classes](/reference/react/ViewTransition#view-transition-class):
콘텐츠에 대한 폴백 애니메이션을 적용하려면 `Suspense`를 `<ViewTranstion>`으로 래핑하면 됩니다.
6260
6218
@@ -11506,9 +11464,6 @@ _View Transition을 구축한 배경에 대한 자세한 내용은 다음을 참
11506
11464
11507
11465
## Activity {/*activity*/}
11508
11466
11509
-
<<<<<<< HEAD
11510
-
[지난](/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022#offscreen)[업데이트](/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024#offscreen-renamed-to-activity)에서, 컴포넌트를 시각적으로 숨기고 우선순위를 지정 해제할 수 있는 API를 연구 중이며, CSS로 마운트 해제하거나 숨기는 것에 비해 성능 비용을 줄이면서 UI 상태를 유지할 수 있다고 공유한 바 있습니다.
11511
-
=======
11512
11467
<Note>
11513
11468
11514
11469
**`<Activity />` is now available in React’s Canary channel.**
@@ -11518,7 +11473,6 @@ _View Transition을 구축한 배경에 대한 자세한 내용은 다음을 참
11518
11473
</Note>
11519
11474
11520
11475
In [past](/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022#offscreen)[updates](/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024#offscreen-renamed-to-activity), we shared that we were researching an API to allow components to be visually hidden and deprioritized, preserving UI state with reduced performance costs relative to unmounting or hiding with CSS.
11521
-
>>>>>>> 0d05d9b6ef0f115ec0b96a2726ab0699a9ebafe1
11522
11476
11523
11477
이제 API와 그 작동 방식을 공유할 준비가 되었고, 실험적인 React 버전에서 테스트를 시작할 수 있습니다.
11524
11478
@@ -14265,23 +14219,13 @@ Activity에서 고려 중인 또 다른 모드는 메모리가 너무 많이 사
14265
14219
14266
14220
# 개발 중인 기능 {/*features-in-development*/}
14267
14221
14268
-
<<<<<<< HEAD
14269
-
저희는 아래의 일반적인 문제들을 해결하는 데 도움이 되는 기능들도 개발하고 있습니다.
14270
-
14271
-
가능한 솔루션을 반복 개발하면서, 저희가 진행하고 있는 PR을 기반으로 테스트 중인 잠재적 API들이 공유되는 것을 보실 수 있습니다. 다양한 아이디어를 시도하면서, 시도해본 후 다른 솔루션을 자주 변경하거나 제거한다는 점을 기억해 주세요.
14272
-
14273
-
저희가 작업하고 있는 솔루션을 너무 일찍 공유하면, 커뮤니티에 혼란과 혼동을 일으킬 수 있습니다. 투명성과 혼란 제한 사이의 균형을 맞추기 위해, 염두에 두고 있는 특정 솔루션을 공유하지 않고 현재 솔루션을 개발하고 있는 문제들을 공유합니다.
14274
-
14275
-
이러한 기능들이 진전을 보이면, 여러분이 시도해볼 수 있도록 문서와 함께 블로그에서 발표하겠습니다.
14276
-
=======
14277
14222
We're also developing features to help solve the common problems below.
14278
14223
14279
14224
As we iterate on possible solutions, you may see some potential APIs we're testing being shared based on the PRs we are landing. Please keep in mind that as we try different ideas, we often change or remove different solutions after trying them out.
14280
14225
14281
14226
When the solutions we're working on are shared too early, it can create churn and confusion in the community. To balance being transparent and limiting confusion, we're sharing the problems we're currently developing solutions for, without sharing a particular solution we have in mind.
14282
14227
14283
14228
As these features progress, we'll announce them on the blog with docs included so you can try them out.
@@ -14314,11 +14258,7 @@ hooks를 출시했을 때, 저희는 세 가지 동기가 있었습니다:
14314
14258
- **생명주기가 아닌 함수의 관점에서 사고**: hooks는 생명주기 메서드를 기반으로 한 분할을 강제하는 것이 아니라 관련된 부분(구독 설정이나 데이터 가져오기 등)을 기반으로 하나의 컴포넌트를 더 작은 함수로 분할할 수 있게 해주었습니다.
14315
14259
- **사전 컴파일 지원**: hooks는 생명주기 메서드로 인한 의도하지 않은 최적화 해제 문제와 클래스의 제약사항을 줄이면서 사전 컴파일을 지원하도록 설계되었습니다.
14316
14260
14317
-
<<<<<<< HEAD
14318
-
출시 이후 hooks는 *컴포넌트 간 코드 공유*에서 성공적이었습니다. Hooks는 이제 컴포넌트 간 로직을 공유하는 선호되는 방법이 되었고, 렌더링 props와 고차 컴포넌트의 사용 사례는 줄어들었습니다. Hooks는 또한 클래스 컴포넌트로는 불가능했던 Fast Refresh와 같은 기능을 지원하는 데도 성공적이었습니다.
14319
-
=======
14320
14261
Since their release, hooks have been successful at *sharing code between components*. Hooks are now the favored way to share logic between components, and there are less use cases for render props and higher order components. Hooks have also been successful at supporting features like Fast Refresh that were not possible with class components.
14321
-
>>>>>>> 0d05d9b6ef0f115ec0b96a2726ab0699a9ebafe1
14322
14262
14323
14263
### Effects는 어려울 수 있습니다 {/*effects-can-be-hard*/}
14324
14264
@@ -14359,31 +14299,18 @@ useEffect(() => {
14359
14299
return () => {
14360
14300
connection.disconnect();
14361
14301
};
14362
-
<<<<<<<HEAD
14363
-
}); // 컴파일러가 의존성을 삽입했습니다.
14364
-
```
14365
-
14366
-
이 코드를 사용하면, React Compiler가 의존성을 추론하고 자동으로 삽입하므로 보거나 작성할 필요가 없습니다. [IDE 확장 프로그램](#compiler-ide-extension)과 [`useEffectEvent`](/reference/react/experimental_useEffectEvent) 같은 기능을 통해, 디버깅이 필요한 시점이나 의존성을 제거하여 최적화할 때 Compiler가 삽입한 것을 보여주는 CodeLens를 제공할 수 있습니다. 이는 언제든지 실행되어 컴포넌트나 hook의 상태를 다른 것과 동기화할 수 있는 Effects를 작성하는 올바른 멘탈 모델을 강화하는 데 도움이 됩니다.
14367
-
14368
-
저희의 희망은 의존성을 자동으로 삽입하는 것이 작성하기 더 쉬울 뿐만 아니라, 컴포넌트 생명주기가 아닌 Effect가 하는 일의 관점에서 생각하도록 강제함으로써 이해하기도 더 쉽게 만든다는 것입니다.
14369
-
=======
14370
14302
}); // compiler inserted dependencies.
14371
14303
```
14372
14304
14373
14305
With this code, the React Compiler can infer the dependencies for you and insert them automatically so you don't need to see or write them. With features like [the IDE extension](#compiler-ide-extension) and [`useEffectEvent`](/reference/react/useEffectEvent), we can provide a CodeLens to show you what the Compiler inserted for times you need to debug, or to optimize by removing a dependency. This helps reinforce the correct mental model for writing Effects, which can run at any time to synchronize your component or hook's state with something else.
14374
14306
14375
14307
Our hope is that automatically inserting dependencies is not only easier to write, but that it also makes them easier to understand by forcing you to think in terms of what the Effect does, and not in component lifecycles.
14376
-
>>>>>>>0d05d9b6ef0f115ec0b96a2726ab0699a9ebafe1
14377
14308
14378
14309
---
14379
14310
14380
14311
## Compiler IDE Extension {/*compiler-ide-extension*/}
14381
14312
14382
-
<<<<<<<HEAD
14383
-
이번 주 초에 [React Compiler 릴리스 후보를 공유했으며](/blog/2025/04/21/react-compiler-rc), 앞으로 몇 달 안에 컴파일러의 첫 번째 SemVer 안정 버전을 출시하기 위해 작업하고 있습니다.
14384
-
=======
14385
14313
Later in 2025 [we shared](/blog/2025/10/07/react-compiler-1) the first stable release of React Compiler, and we're continuing to invest in shipping more improvements.
14386
-
>>>>>>> 0d05d9b6ef0f115ec0b96a2726ab0699a9ebafe1
14387
14314
14388
14315
또한 React Compiler를 사용해서 코드 이해와 디버깅을 향상시킬 수 있는 정보를 제공하는 방법을 탐구하기 시작했습니다. 저희가 탐구하기 시작한 아이디어 중 하나는 [Lauren Tan의 React Conf 발표](https://conf2024.react.dev/talks/5)에서 사용된 확장 프로그램과 유사한, React Compiler를 기반으로 하는 새로운 실험적 LSP 기반 React IDE 확장 프로그램입니다.
14389
14316
@@ -14405,11 +14332,7 @@ Fragment refs는 아직 연구 중입니다. 최종 API가 완성에 가까워
14405
14332
14406
14333
## Gesture Animations {/*gesture-animations*/}
14407
14334
14408
-
<<<<<<< HEAD
14409
-
저희는 또한 메뉴를 열기 위한 스와이프나 사진 캐러셀을 스크롤하는 것과 같은 제스처 애니메이션을 지원하기 위해 View Transitions를 향상시키는 방법을 연구하고 있습니다.
14410
-
=======
14411
14335
We're also researching ways to enhance View Transitions to support gesture animations such as swiping to open a menu, or scroll through a photo carousel.
<BlogCardtitle="React Labs: View Transitions, Activity 그리고 그 외"date="2025년 4월 23일"url="/blog/2025/04/23/react-labs-view-transitions-activity-and-more">
15
-
16
-
React Labs 게시글에서는 현재 연구 개발 중인 프로젝트에 대한 글을 작성합니다. 이번 포스팅에서는 지금 바로 사용해 볼 수 있는 두 가지 새로운 실험적 기능을 공유하고, 현재 작업 중인 다른 영역에 대해서도 공유하고자 합니다.
17
-
18
-
</BlogCard>
19
-
20
-
<BlogCardtitle="React 컴파일러 RC"date="2025년 4월 21일"url="/blog/2025/04/21/react-compiler-rc">
We're releasing the compiler's first stable release today, plus linting and tooling improvements to make adoption easier.
@@ -42,7 +31,6 @@ React 19.2 adds new features like Activity, React Performance Tracks, useEffectE
42
31
<BlogCardtitle="React Labs: View Transitions, Activity, and more"date="April 23, 2025"url="/blog/2025/04/23/react-labs-view-transitions-activity-and-more">
43
32
44
33
In React Labs posts, we write about projects in active research and development. In this post, we're sharing two new experimental features that are ready to try today, and sharing other areas we're working on now ...
0 commit comments