Merge branch 'main' into translate-rendertostring-prerender

Author: hg-pyun

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

@@ -2483,19 +2483,19 @@ In practice, navigations should be done via "enter" and "exit" props, or by usin
 
 ### 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/learn/creating-a-react-app.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/reference/react-dom/components/common.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/pages/404.js

@@ -20,7 +20,7 @@ export default function NotFound() {
           <P>
             저희 잘못으로 인한 오류라면{', '}
             수정할 수 있도록{' '}
-            <A href="https://github.com/reactjs/react.dev/issues/new">
+            <A href="https://github.com/reactjs/ko.react.dev/issues/new">
               저희에게 알려주세요.
             </A>
           </P>

src/pages/500.js

@@ -20,7 +20,7 @@ export default function NotFound() {
           <P>불편을 드려 죄송합니다.</P>
           <P>
             가능하시다면{' '}
-            <A href="https://github.com/reactjs/react.dev/issues/new">
+            <A href="https://github.com/reactjs/ko.react.dev/issues/new">
               버그를 신고
             </A>
             해주실 수 있으실까요?

src/sidebarReference.json

@@ -187,7 +187,7 @@
       "path": "/reference/react-dom/components",
       "routes": [
         {
-          "title": "Common (e.g. <div>)",
+          "title": "공통 컴포넌트 (예: <div>)",
           "path": "/reference/react-dom/components/common"
         },
         {