Merge branch 'main' into docs/fix-camelcase-section-heading

Author: hg-pyun

src/content/blog/2025/04/21/react-compiler-rc.md

@@ -2458,17 +2458,17 @@ root.render(
 
 </Sandpack>
 
-Since our router already updates the route using `startTransition`, this one line change to add `<ViewTransition>` activates with the default cross-fade animation. 
+라우터가 이미 `startTransition`을 사용해서 라우트를 업데이트하고 있기 때문에, `<ViewTransition>`을 한 줄 추가하는 것만으로 기본 크로스 페이드 애니메이션이 활성화됩니다.
 
-If you're curious how this works, see the docs for [How does `<ViewTransition>` work?](/reference/react/ViewTransition#how-does-viewtransition-work)
+어떻게 동작하는지 궁금하다면 [How does `<ViewTransition>` work?](/reference/react/ViewTransition#how-does-viewtransition-work) 문서를 참고하세요.
 
 <Note>
 
-#### Opting out of `<ViewTransition>` animations {/*opting-out-of-viewtransition-animations*/}
+#### `<ViewTransition>` 애니메이션 건너뛰기 {/*opting-out-of-viewtransition-animations*/}
 
-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. 
+이 예시에서 단순화를 위해 앱의 루트를 `<ViewTransition>`으로 감싸고 있지만, 이렇게 하면 앱 내의 모든 트랜지션이 애니메이션 되어 예상치 못한 애니메이션이 발생할 수 있습니다.
 
-To fix, we're wrapping route children with `"none"` so each page can control its own animation:
+이를 해결하기 위해 각 페이지에서 자체적으로 애니메이션을 제어할 수 있도록 라우트 자식 요소를 `"none"`으로 감싸고 있습니다.
 
 ```js
 // Layout.js
@@ -2477,25 +2477,25 @@ To fix, we're wrapping route children with `"none"` so each page can control its
 </ViewTransition>
 ```
 
-In practice, navigations should be done via "enter" and "exit" props, or by using Transition Types. 
+실제로 네비게이션은 "enter"와 "exit" Props 또는 Transition Types를 사용해서 처리하는 것이 좋습니다.
 
 </Note>
 
 ### Customizing animations {/*customizing-animations*/}
 
-By default, `<ViewTransition>` includes the default cross-fade from the browser.
+기본적으로 `<ViewTransition>`은 브라우저의 기본 크로스페이드를 포함합니다.
 
-To customize animations, you can provide props to the `<ViewTransition>` component to specify which animations to use, based on [how the `<ViewTransition>` activates](/reference/react/ViewTransition#props).
+애니메이션을 커스터마이징하려면, [어떻게 `<ViewTransition>`이 활성화되는지](/reference/react/ViewTransition#props)에 따라, 어떤 애니메이션을 사용할지 지정하는 Props를 `<ViewTransition>` 컴포넌트에 제공할 수 있습니다.
 
-For example, we can slow down the `default` cross fade animation:
+예를 들어, `default` 크로스페이드 애니메이션을 느리게 만들 수 있습니다.
 
 ```js
 <ViewTransition default="slow-fade">
   <Home />
 </ViewTransition>
 ```
 
-And define `slow-fade` in CSS using [view transition classes](/reference/react/ViewTransition#view-transition-classes):
+그리고 [View Transition 클래스](/reference/react/ViewTransition#view-transition-classes)를 사용하여 CSS에서 `slow-fade`를 정의합니다.
 
 ```css
 ::view-transition-old(.slow-fade) {
@@ -2507,7 +2507,7 @@ And define `slow-fade` in CSS using [view transition classes](/reference/react/V
 }
 ```
 
-Now, the cross fade is slower:
+이제 크로스페이드가 더 느려집니다.
 
 <Sandpack>
 
@@ -3686,21 +3686,21 @@ root.render(
 
 </Sandpack>
 
-See [Styling View Transitions](/reference/react/ViewTransition#styling-view-transitions) for a full guide on styling `<ViewTransition>`.
+`<ViewTransition>` 스타일링에 대한 전체 가이드는 [View Transition 스타일링](/reference/react/ViewTransition#styling-view-transitions)을 참조하세요.
 
 ### Shared Element Transitions {/*shared-element-transitions*/}
 
-When two pages include the same element, often you want to animate it from one page to the next.
+두 페이지에 같은 요소가 있을 때, 종종 한 페이지에서 다음 페이지로 이어지도록 애니메이션을 주고 싶을 때가 있습니다.
 
-To do this you can add a unique `name` to the `<ViewTransition>`:
+이를 위해 `<ViewTransition>`에 고유한 `name` 속성을 추가할 수 있습니다.
 
 ```js
 <ViewTransition name={`video-${video.id}`}>
   <Thumbnail video={video} />
 </ViewTransition>
 ```
 
-Now the video thumbnail animates between the two pages:
+이제 비디오 썸네일이 두 페이지 사이에서 애니메이션으로 전환됩니다.
 
 <Sandpack>
 
@@ -4895,9 +4895,9 @@ root.render(
 
 </Sandpack>
 
-By default, React automatically generates a unique `name` for each element activated for a transition (see [How does `<ViewTransition>` work](/reference/react/ViewTransition#how-does-viewtransition-work)). When React sees a transition where a `<ViewTransition>` with a `name` is removed and a new `<ViewTransition>` with the same `name` is added, it will activate a shared element transition.
+기본적으로 React는 Transition에 활성화된 각 요소에 대해 고유한 `name`을 자동으로 생성합니다. ([`<ViewTransition>`이 어떻게 동작하는지 참고하세요.](/reference/react/ViewTransition#how-does-viewtransition-work)) React가 어떤 Transition에서 특정 `name`을 가진 `<ViewTransition>`이 제거되고, 동일한 `name`을 가진 새로운 `<ViewTransition>`이 추가된 것을 감지하면 공유 요소 전환<sup>Shared Element Transition</sup>을 활성화합니다.
 
-For more info, see the docs for [Animating a Shared Element](/reference/react/ViewTransition#animating-a-shared-element).
+자세한 내용은 [Animating a Shared Element](/reference/react/ViewTransition#animating-a-shared-element) 문서를 참고하세요.
 
 ### Animating based on cause {/*animating-based-on-cause*/}
 

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

@@ -97,7 +97,7 @@ React 생태계에는 이러한 문제들을 해결하기 위한 많은 도구
 
 대부분의 백엔드나 REST 스타일 API에서 데이터를 가져온다면 다음을 사용할 것을 제안합니다.
 
-- [React Query](https://react-query.tanstack.com/)
+- [React Query](https://tanstack.com/query/latest)
 - [SWR](https://swr.vercel.app/)
 - [RTK Query](https://redux-toolkit.js.org/rtk-query/overview)
 
@@ -126,7 +126,7 @@ GraphQL API에서 데이터를 가져온다면 다음을 사용할 것을 제안
 
 * **단일 페이지 앱 (SPA)** 은 단일 HTML 페이지를 로드하고 사용자가 앱과 상호작용을 할 때 페이지를 동적으로 업데이트합니다. SPA는 시작하기는 더 쉽지만, 초기 로드 시간이 느릴 수 있습니다. SPA는 대부분의 빌드 도구에서 기본 아키텍처입니다.
 
-* **스트리밍 서버 측 렌더링(SSR)** 은 서버에서 페이지를 렌더링하고 완전히 렌더링 된 페이지를 클라이언트로 보냅니다. SSR은 성능을 향상할 수 있지만, 단일 페이지 앱보다 설정하고 유지 관리하는 것이 더 복잡할 수 있습니다. 스트리밍 기능이 추가되면서 SSR은 설정 및 유지 관리가 매우 복잡해질 수 있습니다. Vite의 SSR 가이드를 참조하세요.
+* **스트리밍 서버 측 렌더링(SSR)** 은 서버에서 페이지를 렌더링하고 완전히 렌더링 된 페이지를 클라이언트로 보냅니다. SSR은 성능을 향상할 수 있지만, 단일 페이지 앱보다 설정하고 유지 관리하는 것이 더 복잡할 수 있습니다. 스트리밍 기능이 추가되면서 SSR은 설정 및 유지 관리가 매우 복잡해질 수 있습니다. [Vite의 SSR 가이드](https://vite.dev/guide/ssr.html)를 참조하세요.
 
 * **정적 사이트 생성(SSG)** 은 빌드 시점에 앱에 대한 정적 HTML 파일을 생성합니다. SSG는 성능을 향상할 수 있지만, 서버 측 렌더링보다 설정하고 유지 관리하는 것이 더 복잡할 수 있습니다. [Vite의 SSG 가이드](https://vite.dev/guide/ssr.html#pre-rendering-ssg)를 참조하세요.
 

src/content/learn/build-a-react-app-from-scratch.md

@@ -83,7 +83,7 @@ async function Talks({ confId }) {
   // 2. 렌더링 로직이 추가되더라고도 자바스크립트 번들 크기를 크게 만들지 않습니다. 
   const videos = talks.map(talk => talk.video);
 
-  // 3. 브라우저에서 싫행될 컴포넌트에 데이터를 전달합니다.
+  // 3. 브라우저에서 실행될 컴포넌트에 데이터를 전달합니다.
   return <SearchableVideoList videos={videos} />;
 }
 ```

src/content/learn/creating-a-react-app.md

@@ -255,7 +255,7 @@ h1 { display: inline-block; margin: 10px; width: 30px; text-align: center; }
 
 ```js
 setEnabled(e => !e);
-setLastName(ln => ln.reverse());
+setLastName(ln => ln.toUpperCase());
 setFriendCount(fc => fc * 2);
 ```
 

src/content/learn/queueing-a-series-of-state-updates.md

@@ -255,32 +255,32 @@ title: "공통 컴포넌트 (예: <div>)"
 }}>
 ```
 
-[See an example of using the `ref` callback.](/learn/manipulating-the-dom-with-refs#how-to-manage-a-list-of-refs-using-a-ref-callback)
+[`ref` 콜백을 사용하는 예시를 확인해 보세요.](/learn/manipulating-the-dom-with-refs#how-to-manage-a-list-of-refs-using-a-ref-callback)
 
-When the `<div>` DOM node is added to the screen, React will call your `ref` callback with the DOM `node` as the argument. When that `<div>` DOM node is removed, React will call your the cleanup function returned from the callback.
+화면에 `<div>` DOM 노드가 추가되면, React는 `ref` 콜백을 호출하고 그 인자로 DOM `node`를 전달합니다. 해당 `<div>` DOM 노드가 제거되면, React는 콜백에서 반환한 Cleanup 함수를 호출합니다.
 
-React will also call your `ref` callback whenever you pass a *different* `ref` callback. In the above example, `(node) => { ... }` is a different function on every render. When your component re-renders, the *previous* function will be called with `null` as the argument, and the *next* function will be called with the DOM node.
+React는 *다른* `ref` 콜백을 전달할 때마다 `ref` 콜백도 호출합니다. 위 예시에서 `(node) => { ... }`는 렌더링마다 서로 다른 함수입니다. 컴포넌트가 다시 렌더링 될 때, *이전* 함수는 인자로 `null`을 받아 호출되고, *다음* 함수는 DOM 노드를 인자로 받아 호출됩니다.
 
-#### Parameters {/*ref-callback-parameters*/}
+#### 매개변수 {/*ref-callback-parameters*/}
 
-* `node`: A DOM node. React will pass you the DOM node when the ref gets attached. Unless you pass the same function reference for the `ref` callback on every render, the callback will get temporarily cleanup and re-create during every re-render of the component.
+* `node`: DOM 노드. Ref가 DOM 노드에 연결될 때 React가 해당 DOM 노드를 전달합니다. 매 렌더링에서 `ref` 콜백에 동일한 함수 참조를 넘기지 않으면, 컴포넌트가 리렌더링될 때마다 콜백이 일시적으로 Cleanup 됐다가 다시 생성됩니다.
 
 <Note>
 
-#### React 19 added cleanup functions for `ref` callbacks. {/*react-19-added-cleanup-functions-for-ref-callbacks*/}
+#### React 19는 `ref` 콜백을 위한 Cleanup 함수를 추가했습니다. {/*react-19-added-cleanup-functions-for-ref-callbacks*/}
 
-To support backwards compatibility, if a cleanup function is not returned from the `ref` callback, `node` will be called with `null` when the `ref` is detached. This behavior will be removed in a future version.
+하위 호환성을 위해, `ref` 콜백이 Cleanup 함수를 반환하지 않으면, `ref`가 분리될 때 `node`가 `null`로 호출됩니다. 이 동작은 향후 버전에서 제거될 예정입니다.
 
 </Note>
 
-#### Returns {/*returns*/}
+#### 반환값 {/*returns*/}
 
-* **optional** `cleanup function`: When the `ref` is detached, React will call the cleanup function. If a function is not returned by the `ref` callback, React will call the callback again with `null` as the argument when the `ref` gets detached. This behavior will be removed in a future version.
+* **optional** `Cleanup 함수`: `ref`가 분리되면, React는 cleanup 함수를 호출합니다. `ref` 콜백에 의해 함수가 반환되지 않으면 React는 `ref`가 분리되면 인수로 `null`을 사용하여 다시 콜백을 호출합니다. 이 동작은 향후 버전에서 제거될 예정입니다.
 
-#### Caveats {/*caveats*/}
+#### 주의 사항 {/*caveats*/}
 
-* When Strict Mode is on, React will **run one extra development-only setup+cleanup cycle** before the first real setup. This is a stress-test that ensures that your cleanup logic "mirrors" your setup logic and that it stops or undoes whatever the setup is doing. If this causes a problem, implement the cleanup function.
-* When you pass a *different* `ref` callback, React will call the *previous* callback's cleanup function if provided. If no cleanup function is defined, the `ref` callback will be called with `null` as the argument. The *next* function will be called with the DOM node.
+* Strict Mode가 켜져있으면, React는 첫 번째 실제 설정 전에 **개발 전용 Setup + cleanup 주기**를 하나 더 실행할 것입니다. 이는 스트레스 테스트로, Cleanup 로직이 Setup 로직을 "거울처럼" 따라가며 Setup이 하는 일을 중지하거나 되돌리도록 보장하기 위한 것입니다. 이 때문에 문제가 발생한다면 Cleanup 함수를 구현하세요.
+* *다른* `ref` 콜백을 전달하면, React는 먼저 *이전* 콜백의 Cleanup 함수가 있다면 그것을 호출합니다. Cleanup 함수가 없으면, 이전 `ref` 콜백을 `null`을 인수로 하여 한 번 호출합니다. *다음* 함수는 DOM 노드와 함께 호출됩니다.
 
 ---
 

src/content/reference/react-dom/components/common.md

@@ -232,7 +232,7 @@ export async function deliverMessage(message) {
 
 </Sandpack>
 
-`useOptimistic` Hook에 대해 더 알고 싶다면 [참고 문서](/reference/react/hooks/useOptimistic)를 확인하세요.
+`useOptimistic` Hook에 대해 더 알고 싶다면 [참고 문서](/reference/react/useOptimistic)를 확인하세요.
 
 ### 폼 제출 오류 처리하기 {/*handling-form-submission-errors*/}
 

src/content/reference/react-dom/components/form.md

@@ -98,16 +98,16 @@ app.use('/', (request, response) => {
 
 ---
 
-### Migrating from `renderToString` to a static prerender on the server {/*migrating-from-rendertostring-to-a-static-prerender-on-the-server*/}
+### 서버에서 `renderToString`을 정적 프리렌더로 마이그레이션 {/*migrating-from-rendertostring-to-a-static-prerender-on-the-server*/}
 
-`renderToString` returns a string immediately, so it does not support waiting for data to load for static HTML generation.
+`renderToString`은 문자열을 즉시 반환하므로, 정적 HTML 생성을 위해 데이터 로딩이 완료될 때까지 기다리는 것을 지원하지 않습니다.
 
-We recommend using these fully-featured alternatives:
+가능하면 다음과 같은 완전한 기능을 갖춘 대안을 사용하는 것을 권장합니다.
 
-* If you use Node.js, use [`prerenderToNodeStream`](/reference/react-dom/static/prerenderToNodeStream).
-* If you use Deno or a modern edge runtime with [Web Streams](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API), use [`prerender`](/reference/react-dom/static/prerender).
+* Node.js를 사용하는 경우 [`prerenderToNodeStream`](/reference/react-dom/static/prerenderToNodeStream)을 사용하세요.
+* Deno와 최신 엣지 런타임에서 [Web Streams](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API)을 사용하는 경우 [`prerender`](/reference/react-dom/static/prerender)를 사용하세요.
 
-You can continue using `renderToString` if your static site generation environment does not support streams.
+정적 사이트 생성 환경에서 스트림을 지원하지 않는 경우에는 `renderToString`을 계속 사용할 수 있습니다.
 
 ---
 
@@ -149,4 +149,5 @@ console.log(div.innerHTML); // 예를 들어, "<svg>...</svg>"
 
 일부 컴포넌트가 일시 중단<sup>Suspend</sup>되거나 (예를 들어, [`lazy`](/reference/react/lazy)와 함께 정의되거나 데이터를 가져올 때) `renderToString`은 콘텐츠가 해결될 때까지 기다리지 않습니다. `renderToString`는 그 위에 가장 가까운 [`<Suspense>`](/reference/react/Suspense) 경계를 찾아 `fallback` 프로퍼티를 HTML에 렌더링합니다. 내용<sup>Content</sup>은 클라이언트 코드가 로드될 때까지 나타나지 않습니다.
 
-To solve this, use one of the [recommended streaming solutions](#alternatives). For server side rendering, they can stream content in chunks as it resolves on the server so that the user sees the page being progressively filled in before the client code loads. For static site generation, they can wait for all the content to resolve before generating the static HTML.
+이를 해결하려면 [권장되는 스트리밍 솔루션](#alternatives) 중 하나를 사용하면 좋습니다. 서버 사이드 렌더링의 경우, 서버에서 해결되는 대로 콘텐츠를 작은 단위<sup>chunk</sup>로 스트리밍할 수 있어 클라이언트 코드가 로드되기 전에 사용자가 페이지가 단계적으로 나타나는 것을 볼 수 있습니다. 정적 사이트 생성의 경우, 정적 HTML을 생성하기 전에 모든 콘텐츠가 해결될 때까지 기다릴 수 있습니다.
+