Sync with react.dev @ f5fa1e82

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">
-                  <IconTwitter className="pe-1" />
+                  <IconTwitter className="pe-1" aria-hidden="true" />
                   {twitter}
                 </ExternalLink>
               </div>
@@ -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">
-                  <IconThreads className="pe-1" />
+                  <IconThreads className="pe-1" aria-hidden="true" />
                   {threads}
                 </ExternalLink>
               </div>
@@ -135,27 +135,27 @@ 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">
-                  <IconBsky className="pe-1" />
+                  <IconBsky className="pe-1" aria-hidden="true" />
                   {bsky}
                 </ExternalLink>
               </div>
             )}
             {github && (
               <div className="me-4">
                 <ExternalLink
-                  aria-label="GitHub Profile"
+                  aria-label={`${name} on GitHub`}
                   href={`https://github.com/${github}`}
                   className="hover:text-primary hover:underline dark:text-primary-dark flex flex-row items-center">
-                  <IconGitHub className="pe-1" /> {github}
+                  <IconGitHub className="pe-1" aria-hidden="true" /> {github}
                 </ExternalLink>
               </div>
             )}
             {personal && (
               <ExternalLink
-                aria-label="Personal Site"
+                aria-label={`${name}'s personal website`}
                 href={`https://${personal}`}
                 className="hover:text-primary hover:underline dark:text-primary-dark flex flex-row items-center">
-                <IconLink className="pe-1" /> {personal}
+                <IconLink className="pe-1" aria-hidden="true" /> {personal}
               </ExternalLink>
             )}
           </div>

src/content/blog/2023/03/16/introducing-react-dev.md

@@ -42,8 +42,13 @@
 
 **새로운 문서는 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,13 +465,21 @@
 
 [API 참고서](/reference/react)에서, 이제 모든 React API는 전용 페이지를 가집니다. 모든 종류의 API들이 포함됩니다.
 
+<<<<<<< HEAD
 - [`useState`](/reference/react/useState) 같은 내장 Hook
 - [`<Suspense>`](/reference/react/Suspense) 같은 내장 컴포넌트
 - [`<input>`](/reference/react-dom/components/input) 같은 브라우저 내장 컴포넌트
 - [`renderToPipeableStream`](/reference/react-dom/server/renderToReadableStream) 같은 프레임워크 지향 API
 - [`memo`](/reference/react/memo) 같은 그 밖의 React API
 r
 모든 API 페이지가 *레퍼런스* 와 *사용법*을 포함하는 최소 두 개의 세그먼트로 나뉘어 있다는 것을 알 수 있습니다.
+=======
+- Built-in Hooks like [`useState`](/reference/react/useState).
+- Built-in components like [`<Suspense>`](/reference/react/Suspense).
+- Built-in browser components like [`<input>`](/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 @@
 
 </Recipes>
 
+<<<<<<< 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와 연결되어 있는지를 확인하는 데 유용하게 될 것을 기대합니다.
 

src/content/blog/2024/04/25/react-19-upgrade-guide.md

@@ -639,7 +639,11 @@
 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<T> {

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*/}
 

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)를 살펴보겠습니다:
 

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.
 

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)

src/content/learn/describing-the-ui.md

@@ -530,7 +530,7 @@ React는 컴포넌트와 모듈 간의 관계를 모델링하기 위해 트리
 React 렌더 트리는 컴포넌트 간의 부모-자식 관계를 나타냅니다.
 
 
-<Diagram name="generic_render_tree" height={250} width={500} alt="A tree graph with five nodes, with each node representing a component. The root node is located at the top the tree graph and is labelled 'Root Component'. It has two arrows extending down to two nodes labelled 'Component A' and 'Component C'. Each of the arrows is labelled with 'renders'. 'Component A' has a single 'renders' arrow to a node labelled 'Component B'. 'Component C' has a single 'renders' arrow to a node labelled 'Component D'.">
+<Diagram name="generic_render_tree" height={250} width={500} alt="A tree graph with five nodes, with each node representing a component. The root node is located at the top of the tree graph and is labelled 'Root Component'. It has two arrows extending down to two nodes labelled 'Component A' and 'Component C'. Each of the arrows is labelled with 'renders'. 'Component A' has a single 'renders' arrow to a node labelled 'Component B'. 'Component C' has a single 'renders' arrow to a node labelled 'Component D'.">
 
 React 렌더 트리 예시
 

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`를 사용하는 경우보다 더 많은 코드를 단계별로 실행해서 디버깅 해야 하는 점이 있기도 합니다.
 

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를 얻게 됩니다. 각 버튼을 개별적으로 클릭해 보세요.
 

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,

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를 알맞은 컴포넌트와 연결합니다.