diff --git a/src/components/MDX/TeamMember.tsx b/src/components/MDX/TeamMember.tsx
index 2716fa2d1..3be1fa7a7 100644
--- a/src/components/MDX/TeamMember.tsx
+++ b/src/components/MDX/TeamMember.tsx
@@ -68,7 +68,7 @@ function GroupBadges({group}: {group: string}) {
);
}
-// TODO: good alt text for images/links
+// TODO: good alt text for images
export function TeamMember({
name,
title,
@@ -113,7 +113,7 @@ export function TeamMember({
aria-label={`${name} on Twitter`}
href={`https://twitter.com/${twitter}`}
className="hover:text-primary hover:underline dark:text-primary-dark flex flex-row items-center">
-
+
{twitter}
@@ -124,7 +124,7 @@ export function TeamMember({
aria-label={`${name} on Threads`}
href={`https://threads.net/${threads}`}
className="hover:text-primary hover:underline dark:text-primary-dark flex flex-row items-center">
-
+
{threads}
@@ -135,7 +135,7 @@ export function TeamMember({
aria-label={`${name} on Bluesky`}
href={`https://bsky.app/profile/${bsky}`}
className="hover:text-primary hover:underline dark:text-primary-dark flex flex-row items-center">
-
+
{bsky}
@@ -143,19 +143,19 @@ export function TeamMember({
{github && (
- {github}
+ {github}
)}
{personal && (
- {personal}
+ {personal}
)}
diff --git a/src/content/blog/2023/03/16/introducing-react-dev.md b/src/content/blog/2023/03/16/introducing-react-dev.md
index 966203ece..dc7e0c99b 100644
--- a/src/content/blog/2023/03/16/introducing-react-dev.md
+++ b/src/content/blog/2023/03/16/introducing-react-dev.md
@@ -42,8 +42,13 @@ description: 오늘 React와 React 문서의 새로운 보금자리인 react.dev
**새로운 문서는 Hook을 사용한 React를 처음부터 가르칩니다.** 문서는 두 가지 주요 섹션으로 나뉘어져 있습니다.
+<<<<<<< HEAD
* **[React 학습하기](/learn)** 는 React를 기초부터 스스로 학습할 수 있는 과정입니다.
* **[API 참고서](/reference)** 는 모든 React API에 대한 세부 내용과 사용 예시를 제공합니다.
+=======
+* **[Learn React](/learn)** is a self-paced course that teaches React from scratch.
+* **[API Reference](/reference/react)** provides the details and usage examples for every React API.
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
각 섹션에서 무슨 내용을 알 수 있는지 자세히 살펴보겠습니다.
@@ -460,6 +465,7 @@ export default function PackingList() {
[API 참고서](/reference/react)에서, 이제 모든 React API는 전용 페이지를 가집니다. 모든 종류의 API들이 포함됩니다.
+<<<<<<< HEAD
- [`useState`](/reference/react/useState) 같은 내장 Hook
- [``](/reference/react/Suspense) 같은 내장 컴포넌트
- [``](/reference/react-dom/components/input) 같은 브라우저 내장 컴포넌트
@@ -467,6 +473,13 @@ export default function PackingList() {
- [`memo`](/reference/react/memo) 같은 그 밖의 React API
r
모든 API 페이지가 *레퍼런스* 와 *사용법*을 포함하는 최소 두 개의 세그먼트로 나뉘어 있다는 것을 알 수 있습니다.
+=======
+- Built-in Hooks like [`useState`](/reference/react/useState).
+- Built-in components like [``](/reference/react/Suspense).
+- Built-in browser components like [``](/reference/react-dom/components/input).
+- Framework-oriented APIs like [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream).
+- Other React APIs like [`memo`](/reference/react/memo).
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
[레퍼런스](/reference/react/useState#reference)는 인자와 반환 값을 나열하여 형식적인 API 서명을 설명합니다. 이는 간결하지만, 해당 API에 익숙하지 않다면 약간 추상적으로 느껴질 수 있습니다. 이것은 API를 어떻게 사용하는지가 아닌, API가 무엇을 하는지를 설명합니다.
@@ -608,7 +621,11 @@ button { display: block; margin-top: 10px; }
+<<<<<<< HEAD
또한 몇몇 API 페이지는 (일반적인 문제에 대한) [트러블슈팅](/reference/react/useEffect#troubleshooting)과 (더 이상 사용하지 않는 API와 관련된) [대안](/reference/react-dom/findDOMNode#alternatives)을 포함하고 있습니다.
+=======
+Some API pages also include [Troubleshooting](/reference/react/useEffect#troubleshooting) (for common problems) and [Alternatives](https://18.react.dev/reference/react-dom/findDOMNode#alternatives) (for deprecated APIs).
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
이러한 접근 방식이 API 참고서를 단순히 인자를 찾는 용도뿐만 아니라, 각 API가 어떤 다양한 작업을 수행할 수 있는지, 어떻게 다른 API와 연결되어 있는지를 확인하는 데 유용하게 될 것을 기대합니다.
diff --git a/src/content/blog/2024/04/25/react-19-upgrade-guide.md b/src/content/blog/2024/04/25/react-19-upgrade-guide.md
index 5ba723288..7d0096843 100644
--- a/src/content/blog/2024/04/25/react-19-upgrade-guide.md
+++ b/src/content/blog/2024/04/25/react-19-upgrade-guide.md
@@ -639,7 +639,11 @@ const ref = useRef(null);
ref.current = 1;
```
+<<<<<<< HEAD
`MutableRef`는 이제 사용 중단되었으며 `useRef`는 항상 단일 `RefObject` 타입을 반환합니다.
+=======
+`MutableRefObject` is now deprecated in favor of a single `RefObject` type which `useRef` will always return:
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
```ts
interface RefObject {
diff --git a/src/content/blog/2024/12/05/react-19.md b/src/content/blog/2024/12/05/react-19.md
index 951e33d76..6c2cd174b 100644
--- a/src/content/blog/2024/12/05/react-19.md
+++ b/src/content/blog/2024/12/05/react-19.md
@@ -389,7 +389,11 @@ React 서버 컴포넌트를 지원하기 위해, 특정 React 버전에 고정
서버 액션은 서버 컴포넌트에서 생성되며 클라이언트 컴포넌트에 props를 전달되거나 클라이언트 컴포넌트에서 가져와 사용할 수 있습니다.
+<<<<<<< HEAD
더 많은 정보는 [React 서버 액션](/reference/rsc/server-actions)을 참고하세요.
+=======
+For more, see the docs for [React Server Actions](/reference/rsc/server-functions).
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
## React 19에서 개선 사항 {/*improvements-in-react-19*/}
diff --git a/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md
index 0cc480007..579aeb6ba 100644
--- a/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md
+++ b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md
@@ -14266,7 +14266,11 @@ hooks를 출시했을 때, 저희는 세 가지 동기가 있었습니다:
종종 혼란은 필요하지 않을 때 Effect를 사용하는 데서 온다는 것을 발견했습니다. [You Might Not Need an Effect](/learn/you-might-not-need-an-effect) 가이드는 Effects가 올바른 솔루션이 아닌 경우들을 많이 다루고 있습니다. 하지만 Effect가 문제에 적합한 해결책일 때조차도, Effects는 클래스 컴포넌트 생명주기보다 여전히 이해하기 어려울 수 있습니다.
+<<<<<<< HEAD
혼란의 이유 중 하나는 개발자들이 _Effects_ 관점(Effect가 무엇을 하는지)이 아니라 _컴포넌트의_ 관점(생명주기 같은)에서 Effects를 생각하기 때문이라고 생각합니다.
+=======
+We believe one of the reasons for confusion is that developers tend to think of Effects from the _component's_ perspective (like a lifecycle), instead of the _Effects_ point of view (what the Effect does).
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
[문서의 예시](/learn/lifecycle-of-reactive-effects#thinking-from-the-effects-perspective)를 살펴보겠습니다:
diff --git a/src/content/blog/2025/12/11/denial-of-service-and-source-code-exposure-in-react-server-components.md b/src/content/blog/2025/12/11/denial-of-service-and-source-code-exposure-in-react-server-components.md
index 10600e275..736fa3375 100644
--- a/src/content/blog/2025/12/11/denial-of-service-and-source-code-exposure-in-react-server-components.md
+++ b/src/content/blog/2025/12/11/denial-of-service-and-source-code-exposure-in-react-server-components.md
@@ -76,7 +76,7 @@ Additional disclosures can be frustrating, but they are generally a sign of a he
### Affected frameworks and bundlers {/*affected-frameworks-and-bundlers*/}
-Some React frameworks and bundlers depended on, had peer dependencies for, or included the vulnerable React packages. The following React frameworks & bundlers are affected: [next](https://www.npmjs.com/package/next), [react-router](https://www.npmjs.com/package/react-router), [waku](https://www.npmjs.com/package/waku), [@parcel/rsc](https://www.npmjs.com/package/@parcel/rsc), [@vite/rsc-plugin](https://www.npmjs.com/package/@vitejs/plugin-rsc), and [rwsdk](https://www.npmjs.com/package/rwsdk).
+Some React frameworks and bundlers depended on, had peer dependencies for, or included the vulnerable React packages. The following React frameworks & bundlers are affected: [next](https://www.npmjs.com/package/next), [react-router](https://www.npmjs.com/package/react-router), [waku](https://www.npmjs.com/package/waku), [@parcel/rsc](https://www.npmjs.com/package/@parcel/rsc), [@vitejs/plugin-rsc](https://www.npmjs.com/package/@vitejs/plugin-rsc), and [rwsdk](https://www.npmjs.com/package/rwsdk).
Please see [the instructions in the previous post](/blog/2025/12/03/critical-security-vulnerability-in-react-server-components#update-instructions) for upgrade steps.
diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md
index 6718d506a..ab368c6c6 100644
--- a/src/content/community/conferences.md
+++ b/src/content/community/conferences.md
@@ -19,6 +19,7 @@ April 14-17, 2026. In-person in London
[Website](https://india.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)
+<<<<<<< HEAD
### ZurichJS Conf 2026 {/*zurichjs-conf-2026*/}
September 10-11, 2026. In-person in Zurich, Switzerland
@@ -39,6 +40,8 @@ October 23 & 26, 2026. In-person in London, UK + online (hybrid event)
[Website](https://reactadvanced.com/) - [Twitter](https://x.com/reactadvanced) - [LinkedIn](https://www.linkedin.com/showcase/react-advanced-london/)
+=======
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
### React Summit US 2026 {/*react-summit-us-2026*/}
November 17 & 20, 2026. In-person in New York, USA + online (hybrid event)
@@ -54,6 +57,11 @@ April 15 & 19, 2027. In-person in Singapore + online (hybrid event)
[Website](https://reactsummit.asia/) - [Twitter](https://x.com/reactsummit) - [LinkedIn](https://www.linkedin.com/showcase/reactsummit)
+### React Conf Japan 2027 {/*react-conf-japan-2027*/}
+April 24, 2027. In-person in Tokyo, Japan
+
+[Website](https://reactconf.jp/) - [Twitter](https://x.com/reactconfjp)
+
### React Summit 2027 {/*react-summit-2027*/}
May 21 & 25, 2027. In-person in Amsterdam, Netherlands + online (hybrid event)
@@ -62,16 +70,65 @@ May 21 & 25, 2027. In-person in Amsterdam, Netherlands + online (hybrid event)
## Past Conferences {/*past-conferences*/}
+### React India 2026 {/*react-india-2026*/}
+October 29-31, 2026. In-person in Goa, India
+<<<<<<< HEAD
### React Conf Japan 2027 {/*react-conf-japan-2027*/}
April 24, 2027. In-person in Tokyo, Japan
+=======
+[Website](https://www.reactindia.io/) - [Twitter](https://x.com/react_india)
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
-[Website](https://reactconf.jp/) - [Twitter](https://x.com/reactconfjp)
+### React Advanced London 2026 {/*react-advanced-london-2026*/}
+October 23 & 26, 2026. In-person in London, UK + online (hybrid event)
+
+[Website](https://reactadvanced.com/) - [Twitter](https://x.com/reactadvanced) - [LinkedIn](https://www.linkedin.com/showcase/react-advanced-london/)
+
+### CityJS Athens 2026 {/*cityjs-athens-2026*/}
+October 21-23, 2026. In-person in Athens
+
+[Website](https://athens.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)
+
+### React Alicante 2026 {/*react-alicante-2026*/}
+Sep 24 - 26, 2026. In-person in Alicante
+
+[Website](https://reactalicante.es//) - [Twitter](https://x.com/ReactAlicante)
+
+### React Native Connection 2026 {/*react-native-connection-2026*/}
+September 24, 2026. In-person in Paris, France
+
+[Website](https://reactnativeconnection.io/) - [Twitter](https://x.com/ReactNativeConn) - [Bluesky](https://bsky.app/profile/reactnativeconnect.bsky.social)
+
+### ZurichJS Conf 2026 {/*zurichjs-conf-2026*/}
+September 10-11, 2026. In-person in Zurich, Switzerland
+
+[Website](https://conf.zurichjs.com?utm_campaign=ZurichJS_Conf&utm_source=referral&utm_content=reactjs_community_conferences) - [Twitter](https://x.com/zurichjs) - [LinkedIn](https://www.linkedin.com/company/zurichjs/)
+
+### Render(ATL) 2026 🍑 {/*renderatl-2026-*/}
+August 12-13, 2026. In-person in Atlanta, GA, USA
+
+[Website](https://renderatl.com/) - [Twitter](https://x.com/renderATL) - [LinkedIn](https://www.linkedin.com/company/renderatl)
+
+### React Summit 2026 {/*react-summit-2026*/}
+June 12 & 16, 2026. In-person in Amsterdam, Netherlands + online (hybrid event)
+
+[Website](https://reactsummit.com/) - [Twitter](https://x.com/reactsummit) - [LinkedIn](https://www.linkedin.com/showcase/reactsummit)
+
+### React Norway 2026 {/*react-norway-2026*/}
+June 5, 2026. In-person in Oslo, Norway
+
+[Website](https://reactnorway.com/) - [Twitter](https://x.com/ReactNorway)
+
+### React Miami 2026 {/*react-miami-2026*/}
+April 23-24, 2026. In-person in Miami, FL, USA
+
+[Website](https://reactmiami.com/) - [Twitter](https://x.com/ReactMiamiConf)
### CityJS London 2026 {/*cityjs-london-2026-past*/}
April 14-17, 2026. In-person in London
-[Website](https://india.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)
+[Website](https://london.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)
### React Paris 2026 {/*react-paris-2026-past*/}
@@ -88,7 +145,7 @@ February 12-13, 2026. In-person in New Delhi, India
### CityJS Singapore 2026 {/*cityjs-singapore-2026*/}
February 4-6, 2026. In-person in Singapore
-[Website](https://india.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)
+[Website](https://singapore.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)
### React Advanced London 2025 {/*react-advanced-london-2025*/}
November 28 & December 1, 2025. In-person in London, UK + online (hybrid event)
diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md
index 82820712b..1a06645d4 100644
--- a/src/content/learn/describing-the-ui.md
+++ b/src/content/learn/describing-the-ui.md
@@ -530,7 +530,7 @@ React는 컴포넌트와 모듈 간의 관계를 모델링하기 위해 트리
React 렌더 트리는 컴포넌트 간의 부모-자식 관계를 나타냅니다.
-
+
React 렌더 트리 예시
diff --git a/src/content/learn/extracting-state-logic-into-a-reducer.md b/src/content/learn/extracting-state-logic-into-a-reducer.md
index 0897fa5ba..da7c86aeb 100644
--- a/src/content/learn/extracting-state-logic-into-a-reducer.md
+++ b/src/content/learn/extracting-state-logic-into-a-reducer.md
@@ -870,7 +870,11 @@ Reducer가 좋은 점만 있는 것은 아닙니다! 아래에서 `useState`와
- **코드 크기:** 일반적으로 `useState`를 사용하면, 미리 작성해야 하는 코드가 줄어듭니다. `useReducer`를 사용하면 Reducer 함수 *그리고* Action을 전달하는 부분 둘 다 작성해야 합니다. 하지만 여러 이벤트 핸들러에서 비슷한 방식으로 State를 업데이트하는 경우, `useReducer`를 사용하면 코드의 양을 줄이는 데 도움이 될 수 있습니다.
+<<<<<<< HEAD
- **가독성:** `useState`로 간단한 State를 업데이트하는 경우 가독성이 좋은 편입니다. 그렇지만 더 복잡한 구조의 State를 다루게 되면 컴포넌트의 코드 양이 더 많아져 한눈에 읽기 어려워질 수 있습니다. 이 경우 `useReducer`를 사용하면 업데이트 로직이 *어떻게 동작하는지*와 이벤트 핸들러를 통해서 *무엇이 발생했는지* 구현한 부분을 명확하게 구분할 수 있습니다.
+=======
+We recommend using a reducer if you often encounter bugs due to incorrect state updates in some component, and want to introduce more structure to its code. You don't have to use reducers for everything: feel free to mix and match! You can even use `useState` and `useReducer` in the same component.
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
- **디버깅:** `useState`를 사용하며 버그를 발견했을 때, *왜*, *어디서* State가 잘못 설정됐는지 찾기 어려울 수 있습니다. `useReducer`를 사용하면, 콘솔 로그를 Reducer에 추가하여 State가 업데이트되는 모든 부분과 *왜* 해당 버그가 발생했는지(어떤 `Action`으로 인한 것인지)를 확인할 수 있습니다. 각 `Action`이 올바르게 작성되어 있다면, 버그를 발생시킨 부분이 Reducer 로직 자체에 있다는 것을 알 수 있을 것입니다. 그렇지만 `useState`를 사용하는 경우보다 더 많은 코드를 단계별로 실행해서 디버깅 해야 하는 점이 있기도 합니다.
diff --git a/src/content/learn/index.md b/src/content/learn/index.md
index 097f414a2..17cb3b8a6 100644
--- a/src/content/learn/index.md
+++ b/src/content/learn/index.md
@@ -335,7 +335,11 @@ function MyButton() {
}
```
+<<<<<<< HEAD
React가 컴포넌트 함수를 다시 호출합니다. 이번에는 `count`가 `1`이 되고, 그 다음에는 `2`가 될 것입니다. 이런 방식입니다.
+=======
+Calling `setCount` tells React to call your component function again. This is called a *re-render*. This time, `count` will be `1`. Then it will be `2`. And so on.
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
같은 컴포넌트를 여러 번 렌더링하면 각각의 컴포넌트는 고유한 State를 얻게 됩니다. 각 버튼을 개별적으로 클릭해 보세요.
diff --git a/src/content/learn/lifecycle-of-reactive-effects.md b/src/content/learn/lifecycle-of-reactive-effects.md
index 4a11e1dd2..4b318693c 100644
--- a/src/content/learn/lifecycle-of-reactive-effects.md
+++ b/src/content/learn/lifecycle-of-reactive-effects.md
@@ -1375,8 +1375,13 @@ export default function App() {
}
```
+<<<<<<< HEAD
```js src/ChatRoom.js active
import { useState, useEffect } from 'react';
+=======
+```js {expectedErrors: {'react-compiler': [8]}} src/ChatRoom.js active
+import { useEffect } from 'react';
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
export default function ChatRoom({ roomId, createConnection }) {
useEffect(() => {
@@ -1474,7 +1479,7 @@ export default function App() {
```
```js src/ChatRoom.js active
-import { useState, useEffect } from 'react';
+import { useEffect } from 'react';
export default function ChatRoom({ roomId, createConnection }) {
useEffect(() => {
@@ -1562,7 +1567,7 @@ export default function App() {
```
```js src/ChatRoom.js active
-import { useState, useEffect } from 'react';
+import { useEffect } from 'react';
import {
createEncryptedConnection,
createUnencryptedConnection,
diff --git a/src/content/learn/preserving-and-resetting-state.md b/src/content/learn/preserving-and-resetting-state.md
index 5c759fd69..18e171937 100644
--- a/src/content/learn/preserving-and-resetting-state.md
+++ b/src/content/learn/preserving-and-resetting-state.md
@@ -18,7 +18,11 @@ title: State를 보존하고 초기화하기
## State는 렌더트리의 위치에 연결 됩니다. {/*state-is-tied-to-a-position-in-the-tree*/}
+<<<<<<< HEAD
React는 UI 안에 있는 컴포넌트 구조로 [렌더 트리](learn/understanding-your-ui-as-a-tree#the-render-tree)를 만듭니다.
+=======
+React builds [render trees](/learn/understanding-your-ui-as-a-tree#the-render-tree) for the component structure in your UI.
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
컴포넌트에 State를 줄 때 State가 컴포넌트 안에 "살고" 있다고 생각할 수도 있습니다. 하지만 사실 State는 React 안에 있습니다. React는 컴포넌트가 UI 트리에 있는 위치를 이용해 React가 가지고 있는 각 State를 알맞은 컴포넌트와 연결합니다.
diff --git a/src/content/learn/react-compiler/introduction.md b/src/content/learn/react-compiler/introduction.md
index ad3c3a5bd..520571d1d 100644
--- a/src/content/learn/react-compiler/introduction.md
+++ b/src/content/learn/react-compiler/introduction.md
@@ -144,7 +144,11 @@ function TableContainer({ items }) {
- React 컴파일러는 모든 함수가 아닌 React 컴포넌트와 Hook만 메모이제이션합니다.
- React 컴파일러의 메모이제이션은 여러 컴포넌트나 Hook 간에 공유되지 않습니다.
+<<<<<<< HEAD
따라서 `expensivelyProcessAReallyLargeArrayOfObjects`가 여러 다른 컴포넌트에서 사용되는 경우, 정확히 동일한 `items`가 전달되더라도 비용이 많이 드는 계산이 반복적으로 실행됩니다. 코드를 더 복잡하게 만들기 전에 먼저 [프로파일링](reference/react/useMemo#how-to-tell-if-a-calculation-is-expensive)하여 정말로 비용이 많이 드는지 확인하는 것을 권장합니다.
+=======
+So if `expensivelyProcessAReallyLargeArrayOfObjects` was used in many different components, even if the same exact items were passed down, that expensive calculation would be run repeatedly. We recommend [profiling](/reference/react/useMemo#how-to-tell-if-a-calculation-is-expensive) first to see if it really is that expensive before making code more complicated.
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
## 컴파일러를 사용해 봐야 하나요? {/*should-i-try-out-the-compiler*/}
diff --git a/src/content/learn/setup.md b/src/content/learn/setup.md
index 6c8ff6b10..eaa673e65 100644
--- a/src/content/learn/setup.md
+++ b/src/content/learn/setup.md
@@ -17,7 +17,11 @@ React는 에디터, 타입스크립트, 브라우저 확장 프로그램, 컴파
## React 개발자 도구 {/*react-developer-tools*/}
+<<<<<<< HEAD
React 개발자 도구는 React 컴포넌트를 검사하고, Props와 State를 편집하고, 성능 문제를 식별할 수 있는 브라우저 확장 프로그램입니다. [여기](learn/react-developer-tools)에서 설치하는 방법을 확인해보세요.
+=======
+React Developer Tools is a browser extension that can inspect React components, edit props and state, and identify performance problems. Learn how to install it [here](/learn/react-developer-tools).
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
## React 컴파일러 {/*react-compiler*/}
diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md
index 455c21394..1fcc8c616 100644
--- a/src/content/learn/synchronizing-with-effects.md
+++ b/src/content/learn/synchronizing-with-effects.md
@@ -732,8 +732,13 @@ Effect 안에서 `fetch` 호출을 작성하는 것은 [데이터를 가져오
이 단점 목록은 React에만 해당되는 것은 아닙니다. 어떤 라이브러리에서든 마운트 시에 데이터를 가져온다면 비슷한 단점이 존재합니다. 마운트 시에 데이터를 페칭하는 것도 라우팅과 마찬가지로 잘 수행하기 어려운 작업이므로 다음 접근 방식을 권장합니다.
+<<<<<<< HEAD
- **[프레임워크](/learn/creating-a-react-app#full-stack-frameworks)를 사용하고 있다면, 그 프레임워크가 제공하는 내장 데이터 패칭 기능을 사용하세요.** 최신 React 프레임워크는 효율적인 데이터 패칭 메커니즘을 내장하고 있으며, 앞서 언급한 단점을 겪지 않습니다.
- **사용하지 않는다면, 클라이언트 사이드 캐시를 사용하거나 직접 구축하는 것을 고려하세요.** 인기 있는 오픈소스 솔루션으로는 [React Query](https://tanstack.com/query/latest), [useSWR](https://swr.vercel.app/), [React Router 6.4+](https://beta.reactrouter.com/en/main/start/overview)가 있습니다. 직접 구현할 수도 있는데, 이 경우에는 Effect를 사용하되, 요청 중복 제거, 응답 캐싱, 네트워크 워터폴 방지를 위한 로직을 추가해야 합니다(데이터를 미리 로드하거나, 필요한 데이터를 상위 라우트로 호이스팅하는 방식으로).
+=======
+- **If you use a [framework](/learn/creating-a-react-app#full-stack-frameworks), use its built-in data fetching mechanism.** Modern React frameworks have integrated data fetching mechanisms that are efficient and don't suffer from the above pitfalls.
+- **Otherwise, consider using or building a client-side cache.** Popular open source solutions include [TanStack Query](https://tanstack.com/query/latest), [useSWR](https://swr.vercel.app/), and [React Router](https://reactrouter.com/). You can build your own solution too, in which case you would use Effects under the hood, but add logic for deduplicating requests, caching responses, and avoiding network waterfalls (by preloading data or hoisting data requirements to routes).
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
이러한 접근 방식 중 어느 것도 적합하지 않은 경우, Effect 내에서 데이터를 직접 가져오는 것을 계속하셔도 됩니다.
diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md
index 2e84a2664..e2324469d 100644
--- a/src/content/learn/tutorial-tic-tac-toe.md
+++ b/src/content/learn/tutorial-tic-tac-toe.md
@@ -1140,7 +1140,11 @@ export default function Board() {
+<<<<<<< HEAD
이제 보드에 X를 추가할 수 있게 되었지만 가능한 건 오직 왼쪽 위 사각형뿐입니다. `handleClick` 함수는 왼쪽 위 사각형(인덱스 `0`)만 업데이트하도록 하드 코딩되어 있습니다. 모든 사각형을 업데이트할 수 있도록 `handleClick` 함수를 수정하겠습니다. `handleClick` 함수에 업데이트할 사각형의 인덱스를 나타내는 인수 `i`를 추가하세요.
+=======
+Now you can add X's to the board... but only to the upper left square. Your `handleClick` function is hardcoded to update the index for the upper left square (`0`). Let's update `handleClick` to be able to update any square. Add a parameter `i` to the `handleClick` function that takes the index of the square to update:
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
```js {4,6}
export default function Board() {
diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md
index 5c20b741f..f5472106a 100644
--- a/src/content/learn/typescript.md
+++ b/src/content/learn/typescript.md
@@ -334,7 +334,11 @@ function MyComponent() {
+<<<<<<< HEAD
[`useMemo`](/reference/react/useMemo) Hook은 함수 호출로부터 Memorized 된 값을 생성/재접근하여, 두 번째 매개변수로 전달된 종속성이 변경될 때만 함수를 다시 실행합니다. Hook을 호출한 결과는 첫 번째 매개변수에 있는 함수의 반환 값에서 추론됩니다. Hook에 타입 인수를 제공하여 더욱더 명확하게 할 수 있습니다.
+=======
+The [`useMemo`](/reference/react/useMemo) Hooks will create/re-access a memoized value from a function call, re-running the function only when dependencies passed as the 2nd parameter are changed. The result of calling the Hook is inferred from the return value from the function in the first parameter. You can be more explicit by providing a type argument to the Hook.
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
```ts
// visibleTodos의 타입은 filterTodos의 반환 값에서 추론됩니다.
diff --git a/src/content/learn/understanding-your-ui-as-a-tree.md b/src/content/learn/understanding-your-ui-as-a-tree.md
index 1e5bac99c..24377ab60 100644
--- a/src/content/learn/understanding-your-ui-as-a-tree.md
+++ b/src/content/learn/understanding-your-ui-as-a-tree.md
@@ -134,7 +134,11 @@ React 렌더 트리에서 루트 노드는 앱의 [Root 컴포넌트](/learn/imp
#### 렌더 트리에 HTML 태그는 어디에 있나요? {/*where-are-the-html-elements-in-the-render-tree*/}
+<<<<<<< HEAD
위의 렌더 트리에서 각 컴포넌트가 렌더링하는 HTML 태그에 대한 언급이 없음을 알 수 있습니다. 이는 렌더 트리가 React [컴포넌트](learn/your-first-component#components-ui-building-blocks)로만 구성되어 있기 때문입니다.
+=======
+You'll notice in the above render tree, there is no mention of the HTML tags that each component renders. This is because the render tree is only composed of React [components](/learn/your-first-component#components-ui-building-blocks).
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
UI 프레임워크로서 React는 플랫폼에 독립적입니다. react.dev에서는 HTML 마크업을 UI 기본 요소로 사용하는 웹을 렌더링하는 예시를 보여줍니다. 하지만 React 앱은 모바일이나 데스크톱 플랫폼에 렌더링 될 수 있으며, 이러한 플랫폼은 [UIView](https://developer.apple.com/documentation/uikit/uiview)나 [FrameworkElement](https://learn.microsoft.com/en-us/dotnet/api/system.windows.frameworkelement?view=windowsdesktop-7.0)와 같은 다른 UI 기본 요소를 사용할 수 있습니다.
diff --git a/src/content/reference/dev-tools/react-devtools-cdt-mcp.md b/src/content/reference/dev-tools/react-devtools-cdt-mcp.md
new file mode 100644
index 000000000..9c966a0ff
--- /dev/null
+++ b/src/content/reference/dev-tools/react-devtools-cdt-mcp.md
@@ -0,0 +1,407 @@
+---
+title: React DevTools for agents
+version: experimental
+---
+
+
+
+**`react-devtools-cdt-mcp` is experimental.** It is built on the [experimental third-party developer tools API](https://developer.chrome.com/blog/devtools-for-agents-3p-tools) in [Chrome DevTools MCP](https://github.com/ChromeDevTools/chrome-devtools-mcp), and both its tools and their output may change between releases.
+
+
+
+
+
+`react-devtools-cdt-mcp` gives AI coding agents the same view of your app that React DevTools gives you: the component tree, props, hooks, owners, source locations, and render timing.
+
+```js
+import 'react-devtools-cdt-mcp/register';
+```
+
+
+
+
+
+---
+
+## Overview {/*overview*/}
+
+Coding agents that drive a browser through [Chrome DevTools MCP](https://github.com/ChromeDevTools/chrome-devtools-mcp) can click, take snapshots, and read the DOM, but the DOM doesn't tell them which component rendered a button, what state it holds, or why an interaction was slow.
+
+`react-devtools-cdt-mcp` is a small browser library that you import into the page you're debugging. It registers a group of React tools with the page. When Chrome DevTools MCP connects to that page, it discovers the tools automatically, and your agent can call them like any other MCP tool.
+
+
+
+`react-devtools-cdt-mcp` is **not** an MCP server, and it doesn't go in your MCP client config. It runs inside your page. The only MCP server you configure is Chrome DevTools MCP.
+
+
+
+---
+
+## Setup {/*setup*/}
+
+#### Install the package {/*install-the-package*/}
+
+
+
+npm install --save-dev react-devtools-cdt-mcp
+
+
+
+#### Import it before React {/*import-it-before-react*/}
+
+Import the `register` entry point at the very top of your app's entry file, **before** anything imports `react-dom`:
+
+```js {1}
+import 'react-devtools-cdt-mcp/register';
+
+import { createRoot } from 'react-dom/client';
+import App from './App';
+
+createRoot(document.getElementById('root')).render();
+```
+
+`react-devtools-cdt-mcp` has to load before React does. If you import it after React, the tools won't see your components.
+
+
+
+`react-devtools-cdt-mcp` connects to React the same way the React DevTools extension does, and makes React report every commit to it. This slows down your app, so only include it in development builds.
+
+
+
+#### Set up Chrome DevTools MCP {/*set-up-chrome-devtools-mcp*/}
+
+Your agent needs [Chrome DevTools MCP](https://github.com/ChromeDevTools/chrome-devtools-mcp) with [third-party developer tools](https://developer.chrome.com/blog/devtools-for-agents-3p-tools) enabled. Follow the [Chrome DevTools MCP docs](https://github.com/ChromeDevTools/chrome-devtools-mcp#getting-started) to set it up. Once your agent opens a page that imports `react-devtools-cdt-mcp/register`, it can list and call the React tools.
+
+---
+
+## Try it {/*try-it*/}
+
+You don't need an agent to see what the tools return. The sandbox below imports `react-devtools-cdt-mcp/register` exactly as you would in your app, and adds a small **tool console** under the app. The console discovers the React tools the same way Chrome DevTools MCP does, by dispatching the `devtoolstooldiscovery` event, and lets you call them by hand.
+
+Pick a tool, edit the JSON parameters, and press **Run tool**. Here's a debugging session to follow, playing the agent's part:
+
+1. **Find a component.** Run `react_find_components` with `{"name": "Row"}`. Each result has a `uid`, like `"r12"`, that the other tools accept.
+2. **Inspect it.** Run `react_get_component_by_uid` with one of those uids and `"includeHooks": true` to see its props and hooks.
+3. **Start from the screen.** Choose `react_get_component_by_dom_element`, press **Pick element**, and click a product in the list to get the host component that rendered it.
+4. **Profile an interaction.** Run `react_start_profiling`, click **Add to cart** in the app, then run `react_stop_profiling`.
+5. **See what rendered.** Run `react_get_trace_overview`, then `react_get_commit_report` for commit `0` to see which components rendered in that commit and how long each one took.
+
+
+
+```js src/App.js active
+import { useState } from 'react';
+
+const PRODUCTS = Array.from({ length: 20 }, (_, i) => ({
+ id: i,
+ name: 'Product ' + (i + 1),
+ price: 10 + i,
+}));
+
+export default function App() {
+ const [query, setQuery] = useState('');
+ const visibleProducts = PRODUCTS.filter((product) =>
+ product.name.toLowerCase().includes(query.toLowerCase())
+ );
+ return (
+
+
+ setQuery(e.target.value)}
+ placeholder="Filter products"
+ />
+
+
+ );
+}
+
+function Cart() {
+ const [count, setCount] = useState(0);
+ return (
+
+
+
+
+ );
+}
+
+function CartBadge({ count }) {
+ return Cart: {count};
+}
+
+function ProductList({ products }) {
+ return (
+
+ );
+}
+```
+
+```js src/index.js
+import 'react-devtools-cdt-mcp/register';
+
+import { createRoot } from 'react-dom/client';
+import './styles.css';
+import App from './App';
+import { mountToolConsole } from './ToolConsole';
+
+createRoot(document.getElementById('root')).render();
+mountToolConsole();
+```
+
+```js src/ToolConsole.js hidden
+// A tiny stand-in for chrome-devtools-mcp. It discovers the React tool group
+// the same way chrome-devtools-mcp does (the `devtoolstooldiscovery` event)
+// and lets you call the tools by hand.
+function discoverToolGroup() {
+ let toolGroup = null;
+ const event = new Event('devtoolstooldiscovery');
+ event.respondWith = group => {
+ toolGroup = group;
+ };
+ window.dispatchEvent(event);
+ return toolGroup;
+}
+
+function firstUid(tools, name) {
+ const find = tools.find(t => t.name === 'react_find_components');
+ const result = find.execute({name});
+ return result.results && result.results[0] ? result.results[0].uid : 'r0';
+}
+
+function exampleParams(tools, toolName) {
+ switch (toolName) {
+ case 'react_get_component_tree':
+ return {depth: 4};
+ case 'react_find_components':
+ return {name: 'Row'};
+ case 'react_get_component_by_uid':
+ return {uid: firstUid(tools, 'App'), includeHooks: true};
+ case 'react_get_component_by_dom_element':
+ return {element: '(click "Pick element", then click the page)'};
+ case 'react_get_component_source':
+ case 'react_get_owner_stack_trace':
+ case 'react_get_parent_stack':
+ case 'react_get_owner_stack':
+ return {uid: firstUid(tools, 'CartBadge')};
+ case 'react_start_profiling':
+ return {traceName: 'add-to-cart'};
+ case 'react_stop_profiling':
+ return {};
+ case 'react_get_trace_overview':
+ return {traceName: 'add-to-cart'};
+ case 'react_get_commit_report':
+ return {traceName: 'add-to-cart', commitIndex: 0};
+ default:
+ return {};
+ }
+}
+
+export function mountToolConsole() {
+ const toolGroup = discoverToolGroup();
+ const container = document.createElement('section');
+ container.className = 'tool-console';
+ document.body.appendChild(container);
+ if (toolGroup === null) {
+ container.textContent =
+ 'No tools found. Import react-devtools-cdt-mcp/register before React.';
+ return;
+ }
+ const {tools} = toolGroup;
+ container.innerHTML = `
+
Tool console
+
+
+
+
+
+
+
+
+ `;
+ const select = container.querySelector('select');
+ const description = container.querySelector('.description');
+ const textarea = container.querySelector('textarea');
+ const runButton = container.querySelector('.run');
+ const pickButton = container.querySelector('.pick');
+ const output = container.querySelector('pre');
+ let pickedElement = null;
+
+ for (const tool of tools) {
+ const option = document.createElement('option');
+ option.value = tool.name;
+ option.textContent = tool.name;
+ select.appendChild(option);
+ }
+
+ function selectTool() {
+ const tool = tools.find(t => t.name === select.value);
+ description.textContent = tool.description;
+ textarea.value = JSON.stringify(exampleParams(tools, tool.name));
+ pickButton.hidden = tool.name !== 'react_get_component_by_dom_element';
+ pickedElement = null;
+ }
+
+ function run() {
+ const tool = tools.find(t => t.name === select.value);
+ let params;
+ try {
+ params = JSON.parse(textarea.value || '{}');
+ } catch (error) {
+ output.textContent = 'Invalid JSON: ' + error.message;
+ return;
+ }
+ if (tool.name === 'react_get_component_by_dom_element') {
+ params.element = pickedElement;
+ }
+ const result = tool.execute(params);
+ output.textContent = JSON.stringify(result, null, 2);
+ }
+
+ pickButton.addEventListener('click', () => {
+ output.textContent = 'Click any element in the app above...';
+ document.addEventListener(
+ 'click',
+ event => {
+ if (container.contains(event.target)) {
+ return;
+ }
+ event.preventDefault();
+ event.stopPropagation();
+ pickedElement = event.target;
+ textarea.value = JSON.stringify({
+ element: '<' + event.target.tagName.toLowerCase() + '>',
+ });
+ run();
+ },
+ {capture: true, once: true},
+ );
+ });
+ select.addEventListener('change', selectTool);
+ runButton.addEventListener('click', run);
+ selectTool();
+}
+```
+
+```css src/styles.css hidden
+header { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
+.badge { padding: 2px 8px; border-radius: 10px; background: #087ea4; color: white; }
+ul { padding-left: 20px; max-height: 160px; overflow: auto; }
+.tool-console { margin-top: 20px; padding-top: 12px; border-top: 1px solid #ddd; }
+.tool-console select, .tool-console textarea { width: 100%; font-family: monospace; }
+.tool-console .actions { display: flex; gap: 8px; margin: 8px 0; }
+.tool-console pre { background: #f6f7f9; padding: 8px; max-height: 300px; overflow: auto; }
+```
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "latest",
+ "react-dom": "latest",
+ "react-scripts": "latest",
+ "react-devtools-cdt-mcp": "0.0.1"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test --env=jsdom",
+ "eject": "react-scripts eject"
+ }
+}
+```
+
+
+
+
+
+The tool console in this sandbox stands in for Chrome DevTools MCP so you can try the tools on this page. In your own app, you don't write any of this code: Chrome DevTools MCP discovers the tools and your agent decides which ones to call.
+
+
+
+---
+
+## Reference {/*reference*/}
+
+### Tools {/*tools*/}
+
+`react-devtools-cdt-mcp` registers a tool group called `react`. Your agent calls these tools through Chrome DevTools MCP.
+
+* `react_get_component_tree`: Returns a snapshot of the component tree.
+* `react_find_components`: Finds components by name.
+* `react_get_component_by_uid`: Returns a component's props and Hooks.
+* `react_get_component_by_dom_element`: Returns the React host component for a DOM element.
+* `react_get_parent_stack`: Returns where a component is mounted in the tree.
+* `react_get_owner_stack`: Returns the components that created a component in their JSX.
+* `react_get_owner_stack_trace`: Returns the owner stack of a component as a stack trace.
+* `react_get_component_source`: Returns where a component is defined.
+* `react_start_profiling`: Starts recording render timing.
+* `react_stop_profiling`: Stops recording render timing.
+* `react_get_trace_overview`: Returns a summary of every commit in a recording.
+* `react_get_commit_report`: Returns which components rendered in a commit and how long each took.
+
+Components are identified by short, stable uids like `"r5"`. A uid stays the same across every tool and across re-renders, but not across page reloads.
+
+Every tool returns a plain, serializable object. If a tool fails, it returns an object with an `error` message instead.
+
+---
+
+### `register(target?)` {/*register*/}
+
+Call `register` to install the React DevTools hook and register the React tools with Chrome DevTools MCP yourself, instead of importing `react-devtools-cdt-mcp/register`.
+
+```js
+import { register } from 'react-devtools-cdt-mcp';
+
+register();
+```
+
+#### Parameters {/*register-parameters*/}
+
+* **optional** `target`: The global object to install the hook on. Defaults to `globalThis`.
+
+#### Returns {/*register-returns*/}
+
+`register` returns an object with two properties:
+
+* `facade`: The installed React DevTools hook and the state the tools read from.
+* `unregister`: A function that stops registering the React tools with Chrome DevTools MCP.
+
+#### Caveats {/*register-caveats*/}
+
+* Call `register` before React initializes, or React won't connect to the hook.
+* Calling `register` again for the same `target` returns the existing registration.
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+#### My agent doesn't see any React tools {/*my-agent-doesnt-see-any-react-tools*/}
+
+Check that [third-party developer tools](https://developer.chrome.com/blog/devtools-for-agents-3p-tools) are enabled in your Chrome DevTools MCP setup. Then check that the page selected in Chrome DevTools MCP imports `react-devtools-cdt-mcp/register`. The tools are discovered per page, when the page loads or is selected.
+
+#### The component tree is empty {/*the-component-tree-is-empty*/}
+
+`react-devtools-cdt-mcp/register` was imported after React initialized. Move the import to the very first line of your entry file, before any import that loads `react-dom`.
+
+#### I'm getting an error about a browser-like environment {/*im-getting-an-error-about-a-browser-like-environment*/}
+
+`react-devtools-cdt-mcp/register` throws if it's imported outside a browser, for example during server rendering or in tests. Import it only from client-side code, or call `register()` from the package root yourself where it's safe.
+
+#### Source locations and owner stacks are empty {/*source-locations-and-owner-stacks-are-empty*/}
+
+This data only exists in development builds of React. Make sure you're running your app's development server rather than a production build.
+
+#### A uid stopped working {/*a-uid-stopped-working*/}
+
+Uids don't survive page reloads. After a reload, get fresh uids with `react_get_component_tree` or `react_find_components`.
diff --git a/src/content/reference/dev-tools/react-performance-tracks.md b/src/content/reference/dev-tools/react-performance-tracks.md
index 762c8ab59..83aea13fe 100644
--- a/src/content/reference/dev-tools/react-performance-tracks.md
+++ b/src/content/reference/dev-tools/react-performance-tracks.md
@@ -140,8 +140,13 @@ Scheduler는 우선순위가 다른 작업을 관리하는 데 사용되는 Reac
서버 요청 트랙은 최종적으로 React 서버 컴포넌트로 귀결되는 모든 Promise를 시각화합니다. 여기에는 `fetch` 호출이나 비동기 Node.js 파일 작업과 같은 모든 비동기(async) 작업이 포함됩니다.
+<<<<<<< HEAD
React는 서드 파티 코드 내부에서 시작된 Promise를 **퍼스트 파티(1st party) 코드**를 차단하는 전체 작업의 지속 시간을 나타내는 단일 스팬으로 결합하려고 시도합니다.
예를 들어, 내부적으로 `fetch`를 여러 번 호출하는 서드 파티 라이브러리 메서드 `getUser`는 여러 `fetch` 스팬을 표시하는 대신 `getUser`라는 단일 스팬으로 표현됩니다.
+=======
+React will try to combine Promises that are started from inside third-party code into a single span representing the duration of the entire operation blocking 1st party code.
+For example, a third party library method called `getUser` that calls `fetch` internally multiple times will be represented as a single span called `getUser`, instead of showing multiple `fetch` spans.
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
스팬을 클릭하면 Promise가 생성된 위치의 스택 트레이스와 함께, 가능한 경우 **Promise가 해결(resolve)된 값**의 뷰가 표시됩니다.
@@ -155,5 +160,10 @@ Promise를 await하면 React가 해당 Promise의 지속 시간을 **확인할
렌더링 지속 시간에 따라 다른 색상으로 표시됩니다. 색이 어두울수록 지속 시간이 더 길다는 것을 의미합니다.
+<<<<<<< HEAD
서버 컴포넌트 트랙 그룹에는 항상 "Primary" 트랙이 포함됩니다. React가 서버 컴포넌트를 **동시(concurrently)에** 렌더링할 수 있는 경우 추가적인 "Parallel" 트랙이 표시됩니다.
8개 이상의 서버 컴포넌트가 동시에 렌더링되면 React는 트랙을 계속 추가하는 대신 마지막 "Parallel" 트랙에 연결하여 표시합니다.
+=======
+The Server Components track group will always contain a "Primary" track. If React is able to render Server Components concurrently, it will display additional "Parallel" tracks.
+If more than 8 Server Components are rendered concurrently, React will associate them with the last "Parallel" track instead of adding more tracks.
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-render.md b/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-render.md
index f2e1484bf..cb7f3806d 100644
--- a/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-render.md
+++ b/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-render.md
@@ -107,4 +107,8 @@ function Counter({max}) {
이제 setter는 클릭에 대한 응답으로만 실행되고, React는 정상적으로 렌더링을 완료하며, `count`는 절대 `max`를 넘지 않습니다.
+<<<<<<< HEAD
드문 경우지만 이전 렌더링의 정보를 기반으로 state를 조정해야 할 수 있습니다. 그런 경우 조건부로 state를 설정하는 [이 패턴](/reference/react/useState#storing-information-from-previous-renders)을 따르세요.
+=======
+In rare cases, you may need to adjust state based on information from previous renders. For those, follow [this pattern](/reference/react/useState#storing-information-from-previous-renders) of setting state conditionally.
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/use-memo.md b/src/content/reference/eslint-plugin-react-hooks/lints/use-memo.md
index 473079b0e..20e9e938f 100644
--- a/src/content/reference/eslint-plugin-react-hooks/lints/use-memo.md
+++ b/src/content/reference/eslint-plugin-react-hooks/lints/use-memo.md
@@ -79,7 +79,11 @@ function Component({user}) {
}
```
+<<<<<<< HEAD
부수 효과가 React state를 외부 state와 동기화하는 경우(또는 그 반대) `useEffect`를 사용하세요.
+=======
+If the side effect synchronizes React state with some external state (or vice versa), use `useEffect`:
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
```js
// ✅ 좋은 예시: useEffect에서 동기화
diff --git a/src/content/reference/react-compiler/directives.md b/src/content/reference/react-compiler/directives.md
index c58fcb63c..aff93e126 100644
--- a/src/content/reference/react-compiler/directives.md
+++ b/src/content/reference/react-compiler/directives.md
@@ -193,6 +193,12 @@ function ProblematicComponent() {
## 참고 {/*see-also*/}
+<<<<<<< HEAD
* [`compilationMode`](/reference/react-compiler/compilationMode) - 컴파일러가 최적화 대상을 선택하는 방식을 설정합니다.
* [`Configuration`](/reference/react-compiler/configuration) - 전체 컴파일러 설정 옵션.
* [React Compiler documentation](/learn/react-compiler) - 시작 가이드.
+=======
+* [`compilationMode`](/reference/react-compiler/compilationMode) - Configure how the compiler chooses what to optimize
+* [`Configuration`](/reference/react-compiler/configuration) - Full compiler configuration options
+* [React Compiler documentation](/learn/react-compiler) - Getting started guide
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md
index e71aad0de..305cc5175 100644
--- a/src/content/reference/react-dom/client/createRoot.md
+++ b/src/content/reference/react-dom/client/createRoot.md
@@ -88,7 +88,11 @@ React는 `root`에 ``을 표시하고 그 안에 있는 DOM을 관리합
* 동일한 루트에서 `render`를 두 번 이상 호출하면, React는 필요에 따라 DOM을 업데이트하여 사용자가 전달한 최신 JSX를 반영합니다. React는 이전에 렌더링 된 트리와 ["비교"](/learn/preserving-and-resetting-state)해서 재사용할 수 있는 부분과 다시 만들어야 하는 부분을 결정합니다. 동일한 루트에서 `render`를 다시 호출하는 것은 루트 컴포넌트에서 [`set` 함수](/reference/react/useState#setstate)를 호출하는 것과 비슷합니다. React는 불필요한 DOM 업데이트를 피합니다.
+<<<<<<< HEAD
* 렌더링이 시작된 이후에는 동기적으로 실행되지만, `root.render(...)` 자체는 비동기적입니다. 즉, `root.render()` 이후에 작성된 코드가 해당 렌더링의 `useLayoutEffect`나 `useEffect`보다 먼저 실행될 수 있습니다. 일반적인 상황에서는 이러한 동작도 문제 없이 잘 작동하며, 대부분 수정이 필요하지 않습니다. 다만, Effect의 실행 순서가 중요한 경우에는 [`flushSync`](/reference/react-dom/flushSync)로 `root.render(...)` 호출을 감싸면 초기 렌더링이 완전히 동기적으로 실행되도록 보장할 수 있습니다.
+=======
+* Although rendering is synchronous once it starts, `root.render(...)` is not. This means code after `root.render()` may run before any effects (`useLayoutEffect`, `useEffect`) of that specific render are fired. This is usually fine and rarely needs adjustment. In rare cases where effect timing matters, you can wrap `root.render(...)` in [`flushSync`](/reference/react-dom/flushSync) to ensure the initial render runs fully synchronously.
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
```js
const root = createRoot(document.getElementById('root'));
@@ -376,7 +380,11 @@ const root = createRoot(container, {
1. 발생한 error 객체.
2. 오류의 componentStack 정보를 포함한 errorInfo 객체.
+<<<<<<< HEAD
`onUncaughtError`와 `onRecoverableError`를 함께 사용하면, 사용자 정의 오류 보고 시스템을 구현할 수 있습니다.
+=======
+Together with `onUncaughtError` and `onRecoverableError`, you can implement your own error reporting system:
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
@@ -414,9 +422,15 @@ import {
const container = document.getElementById("root");
const root = createRoot(container, {
+<<<<<<< HEAD
// 개발 환경에서는 이 옵션들을 제거하고
// React의 기본 핸들러를 사용하거나 직접 오버레이를 구현하는 것을 권장합니다.
// 여기서는 편의를 위해 조건 없이 핸들러를 지정했습니다.
+=======
+ // Keep in mind to remove these options in development to leverage
+ // React's default handlers or implement your own overlay for development.
+ // The handlers are only specified unconditionally here for demonstration purposes.
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
onCaughtError: onCaughtErrorProd,
onRecoverableError: onRecoverableErrorProd,
onUncaughtError: onUncaughtErrorProd,
diff --git a/src/content/reference/react-dom/client/hydrateRoot.md b/src/content/reference/react-dom/client/hydrateRoot.md
index 471348985..543bce9b8 100644
--- a/src/content/reference/react-dom/client/hydrateRoot.md
+++ b/src/content/reference/react-dom/client/hydrateRoot.md
@@ -120,7 +120,11 @@ Calling `root.unmount` will unmount all the components in the root and "detach"
### 서버에서 렌더링된 HTML을 Hydrate하기 {/*hydrating-server-rendered-html*/}
+<<<<<<< HEAD
[`react-dom/server`](/reference/react-dom/client/createRoot)로 앱의 HTML을 생성했다면, 클라이언트에서 *Hydrate* 해주어야 합니다.
+=======
+If your app's HTML was generated by [`react-dom/server`](/reference/react-dom/server), you need to *hydrate* it on the client.
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
```js [[1, 3, "document.getElementById('root')"], [2, 3, ""]]
import { hydrateRoot } from 'react-dom/client';
@@ -440,9 +444,15 @@ import {
const container = document.getElementById("root");
hydrateRoot(container, , {
+<<<<<<< HEAD
// 개발 환경에서는 이 옵션들을 제거하고
// React의 기본 핸들러를 사용하거나 직접 오버레이를 구현하는 것을 권장합니다.
// 여기서는 편의를 위해 조건 없이 핸들러를 지정했습니다.
+=======
+ // Keep in mind to remove these options in development to leverage
+ // React's default handlers or implement your own overlay for development.
+ // The handlers are only specified unconditionally here for demonstration purposes.
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
onCaughtError: onCaughtErrorProd,
onRecoverableError: onRecoverableErrorProd,
onUncaughtError: onUncaughtErrorProd,
diff --git a/src/content/reference/react-dom/components/common.md b/src/content/reference/react-dom/components/common.md
index 0ceb161aa..34b5b8e97 100644
--- a/src/content/reference/react-dom/components/common.md
+++ b/src/content/reference/react-dom/components/common.md
@@ -257,9 +257,15 @@ title: "공통 컴포넌트 (예:
)"
[`ref` 콜백을 사용하는 예시를 확인해 보세요.](/learn/manipulating-the-dom-with-refs#how-to-manage-a-list-of-refs-using-a-ref-callback)
+<<<<<<< HEAD
화면에 `
` DOM 노드가 추가되면, React는 `ref` 콜백을 호출하고 그 인자로 DOM `node`를 전달합니다. 해당 `
` DOM 노드가 제거되면, React는 콜백에서 반환한 Cleanup 함수를 호출합니다.
React는 *다른* `ref` 콜백을 전달할 때마다 `ref` 콜백도 호출합니다. 위 예시에서 `(node) => { ... }`는 렌더링마다 서로 다른 함수입니다. 컴포넌트가 다시 렌더링 될 때, *이전* 함수는 인자로 `null`을 받아 호출되고, *다음* 함수는 DOM 노드를 인자로 받아 호출됩니다.
+=======
+When the `
` DOM node is added to the screen, React will call your `ref` callback with the DOM `node` as the argument. When that `
` DOM node is removed, React will call the cleanup function returned from the callback.
+
+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 cleanup function returned by the *previous* function will be called, and the *next* function will be called with the DOM node. If no cleanup function is returned, the *previous* function will be called with `null` as the argument instead.
+>>>>>>> f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3
#### 매개변수 {/*ref-callback-parameters*/}
diff --git a/src/content/reference/react-dom/components/form.md b/src/content/reference/react-dom/components/form.md
index f4df10742..9f25a23ff 100644
--- a/src/content/reference/react-dom/components/form.md
+++ b/src/content/reference/react-dom/components/form.md
@@ -38,27 +38,95 @@ title: "