Sync with react.dev @ 9467bc58

src/content/learn/react-compiler.md

@@ -3,7 +3,11 @@ title: React 컴파일러
 ---
 
 <Intro>
+<<<<<<< HEAD
 이 페이지는 새로운 실험적 React 컴파일러에 대한 소개와 이를 성공적으로 시도하는 방법을 제공합니다.
+=======
+This page will give you an introduction to React Compiler and how to try it out successfully.
+>>>>>>> 9467bc58868e66c53ca9385c8531dcf7b02178c2
 </Intro>
 
 <Wip>
@@ -19,6 +23,7 @@ title: React 컴파일러
 </YouWillLearn>
 
 <Note>
+<<<<<<< HEAD
 React 컴파일러는 커뮤니티로부터 초기 피드백을 받기 위해 오픈소스로 공개한 새로운 실험적 컴파일러입니다. 아직 안정적이지 않으며 프로덕션 환경에서는 완전히 준비되지 않았습니다.
 
 React 컴파일러는 React 19 RC를 필요로 합니다. React 19로 업그레이드할 수 없는 경우 [워킹 그룹](https://github.com/reactwg/react-compiler/discussions/6)에 설명된 대로 사용자 공간 캐시 함수 구현을 시도해 볼 수 있습니다. 그러나 이 방법은 권장하지 않으며 가능한 한 React 19로 업그레이드하는 것이 좋습니다.
@@ -27,6 +32,30 @@ React 컴파일러는 React 19 RC를 필요로 합니다. React 19로 업그레
 React 컴파일러는 빌드 타임 전용 도구로 React 앱을 자동으로 최적화합니다. 순수 JavaScript로 동작하며 [React의 규칙](/reference/rules)을 이해하므로 코드를 다시 작성할 필요가 없습니다.
 
 컴파일러에는 에디터 내에서 분석 결과를 보여주는 [eslint 플러그인](#installing-eslint-plugin-react-compiler)도 포함되어 있습니다. 이 플러그인은 컴파일러와 독립적으로 실행되며, 앱에서 컴파일러를 사용하지 않는 경우에도 사용할 수 있습니다. 모든 React 개발자에게 코드베이스의 품질을 향상하기 위해 이 eslint 플러그인을 사용할 것을 권장합니다.
+=======
+React Compiler is a new compiler currently in Beta, that we've open sourced to get early feedback from the community. While it has been used in production at companies like Meta, rolling out the compiler to production for your app will depend on the health of your codebase and how well you’ve followed the [Rules of React](/reference/rules).
+
+The latest Beta release can be found with the `@beta` tag, and daily experimental releases with `@experimental`.
+</Note>
+
+React Compiler is a new compiler that we've open sourced to get early feedback from the community. It is a build-time only tool that automatically optimizes your React app. It works with plain JavaScript, and understands the [Rules of React](/reference/rules), so you don't need to rewrite any code to use it.
+
+The compiler also includes an [eslint plugin](#installing-eslint-plugin-react-compiler) that surfaces the analysis from the compiler right in your editor. **We strongly recommend everyone use the linter today.** The linter does not require that you have the compiler installed, so you can use it even if you are not ready to try out the compiler.
+
+The compiler is currently released as `beta`, and is available to try out on React 17+ apps and libraries. To install the Beta:
+
+<TerminalBlock>
+npm install -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta
+</TerminalBlock>
+
+Or, if you're using Yarn:
+
+<TerminalBlock>
+yarn add -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta
+</TerminalBlock>
+
+If you are not using React 19 yet, please see [the section below](#using-react-compiler-with-react-17-or-18) for further instructions.
+>>>>>>> 9467bc58868e66c53ca9385c8531dcf7b02178c2
 
 ### 컴파일러는 무엇을 하나요? {/*what-does-the-compiler-do*/}
 
@@ -96,6 +125,7 @@ function TableContainer({ items }) {
 따라서 `expensivelyProcessAReallyLargeArrayOfObjects`가 여러 다른 컴포넌트에서 사용되고 있다면 동일한 아이템이 전달되더라도 비용이 많이 드는 계산이 반복적으로 실행될 수 있습니다. 코드를 더 복잡하게 만들기 전에 먼저 [프로파일링](https://ko.react.dev/reference/react/useMemo#how-to-tell-if-a-calculation-is-expensive)을 통해 해당 계산이 실제로 비용이 많이 드는지 확인하는 것이 좋습니다.
 </DeepDive>
 
+<<<<<<< HEAD
 ### 컴파일러는 무엇을 가정하나요? {/*what-does-the-compiler-assume*/}
 
 React 컴파일러는 다음과 같이 가정합니다.
@@ -109,6 +139,11 @@ React 컴파일러는 React의 많은 규칙을 정적으로 검증할 수 있
 ### 컴파일러를 시도해 봐야 하나요? {/*should-i-try-out-the-compiler*/}
 
 컴파일러가 여전히 실험적이며 다양한 결함이 있다는 점을 유의하세요. Meta와 같은 회사에서는 이미 프로덕션 환경에서 사용하였지만, 앱의 프로덕션에 컴파일러를 점진적으로 도입할지는 코드베이스의 건강 상태와 [React의 규칙](/reference/rules)을 얼마나 잘 따랐는지에 따라 다를 것입니다.
+=======
+### Should I try out the compiler? {/*should-i-try-out-the-compiler*/}
+
+Please note that the compiler is still in Beta and has many rough edges. While it has been used in production at companies like Meta, rolling out the compiler to production for your app will depend on the health of your codebase and how well you've followed the [Rules of React](/reference/rules).
+>>>>>>> 9467bc58868e66c53ca9385c8531dcf7b02178c2
 
 **지금 당장 컴파일러를 사용하기에 급급할 필요는 없습니다. 안정적인 릴리즈에 도달할 때까지 기다려도 괜찮습니다.** 하지만 앱에서 작은 실험을 통해 컴파일러를 시도해 보고 [피드백을 제공](#reporting-issues)하여 컴파일러 개선에 도움을 줄 수 있습니다.
 
@@ -121,7 +156,7 @@ React 컴파일러는 React의 많은 규칙을 정적으로 검증할 수 있
 컴파일러를 설치하기 전에, 먼저 코드베이스가 호환되는지 확인할 수 있습니다.
 
 <TerminalBlock>
-npx react-compiler-healthcheck@experimental
+npx react-compiler-healthcheck@beta
 </TerminalBlock>
 
 이 스크립트는 다음 작업을 수행합니다.
@@ -143,7 +178,7 @@ Found no usage of incompatible libraries.
 React 컴파일러는 eslint 플러그인도 지원합니다. eslint 플러그인은 컴파일러와 **독립적으로** 사용할 수 있습니다. 즉 컴파일러를 사용하지 않더라도 eslint 플러그인을 사용할 수 있습니다.
 
 <TerminalBlock>
-npm install eslint-plugin-react-compiler@experimental
+npm install -D eslint-plugin-react-compiler@beta
 </TerminalBlock>
 
 그런 다음, eslint 구성 파일에 추가하세요.
@@ -178,6 +213,7 @@ const ReactCompilerConfig = {
 };
 ```
 
+<<<<<<< HEAD
 드물지만 때에 따라서는 `compilationMode: "annotation"` 옵션을 사용하여 컴파일러를 "opt-in" 모드로 설정할 수도 있습니다. 이 모드에서는 컴파일러가 `"use memo"` 지시어로 주석 처리된 컴포넌트와 Hooks만 컴파일합니다. `annotation` 모드는 초기 사용자를 돕기 위한 임시 모드로, `"use memo"` 지시어를 장기적으로 사용할 의도는 없음을 유의하세요.
 
 ```js {2,7}
@@ -193,62 +229,81 @@ export default function App() {
 ```
 
 컴파일러를 도입하는 데 더 자신감을 가지게 되면, 다른 디렉터리에 대한 커버리지를 확대하고 점진적으로 전체 앱에 적용할 수 있습니다.
+=======
+When you have more confidence with rolling out the compiler, you can expand coverage to other directories as well and slowly roll it out to your whole app.
+>>>>>>> 9467bc58868e66c53ca9385c8531dcf7b02178c2
 
 #### 새로운 프로젝트 {/*new-projects*/}
 
 새 프로젝트를 시작할 경우, 기본 동작으로 전체 코드베이스에 컴파일러를 활성화할 수 있습니다.
 
+<<<<<<< HEAD
 ## 사용 방법 {/*installation*/}
+=======
+### Using React Compiler with React 17 or 18 {/*using-react-compiler-with-react-17-or-18*/}
 
-### Babel {/*usage-with-babel*/}
+React Compiler works best with React 19 RC. If you are unable to upgrade, you can install the extra `react-compiler-runtime` package which will allow the compiled code to run on versions prior to 19. However, note that the minimum supported version is 17.
 
 <TerminalBlock>
-npm install babel-plugin-react-compiler@experimental
+npm install react-compiler-runtime@beta
 </TerminalBlock>
 
-컴파일러에는 빌드 파이프라인에서 사용할 수 있는 Babel 플러그인이 포함되어 있습니다.
-
-설치 후에 Babel 구성 파일에 추가하세요. 파이프라인에서 컴파일러가 **먼저** 실행되는 것이 매우 중요합니다.
+You should also add the correct `target` to your compiler config, where `target` is the major version of React you are targeting:
 
-```js {7}
+```js {3}
 // babel.config.js
-const ReactCompilerConfig = { /* ... */ };
+const ReactCompilerConfig = {
+  target: '18' // '17' | '18' | '19'
+};
 
 module.exports = function () {
   return {
     plugins: [
-      ['babel-plugin-react-compiler', ReactCompilerConfig], // 가장 먼저 실행하세요!
-      // ...
+      ['babel-plugin-react-compiler', ReactCompilerConfig],
     ],
   };
 };
 ```
 
-`babel-plugin-react-compiler`는 다른 Babel 플러그인보다 먼저 실행되어야 합니다. 이는 컴파일러가 사운드 분석(sound analysis)을 위해 입력 소스 정보를 필요로 하기 때문입니다.
+### Using the compiler on libraries {/*using-the-compiler-on-libraries*/}
 
-React Compiler works best with React 19 RC. If you are unable to upgrade, you can install the extra `react-compiler-runtime` package which will allow the compiled code to run on versions prior to 19. However, note that the minimum supported version is 17.
+React Compiler can also be used to compile libraries. Because React Compiler needs to run on the original source code prior to any code transformations, it is not possible for an application's build pipeline to compile the libraries they use. Hence, our recommendation is for library maintainers to independently compile and test their libraries with the compiler, and ship compiled code to npm.
+
+Because your code is pre-compiled, users of your library will not need to have the compiler enabled in order to benefit from the automatic memoization applied to your library. If your library targets apps not yet on React 19, specify a minimum [`target` and add `react-compiler-runtime` as a direct dependency](#using-react-compiler-with-react-17-or-18). The runtime package will use the correct implementation of APIs depending on the application's version, and polyfill the missing APIs if necessary.
+
+Library code can often require more complex patterns and usage of escape hatches. For this reason, we recommend ensuring that you have sufficient testing in order to identify any issues that might arise from using the compiler on your library. If you identify any issues, you can always opt-out the specific components or hooks with the [`'use no memo'` directive](#something-is-not-working-after-compilation).
+
+Similarly to apps, it is not necessary to fully compile 100% of your components or hooks to see benefits in your library. A good starting point might be to identify the most performance sensitive parts of your library and ensuring that they don't break the [Rules of React](/reference/rules), which you can use `eslint-plugin-react-compiler` to identify.
+
+## Usage {/*installation*/}
+>>>>>>> 9467bc58868e66c53ca9385c8531dcf7b02178c2
+
+### Babel {/*usage-with-babel*/}
 
 <TerminalBlock>
-npm install react-compiler-runtime@experimental
+npm install babel-plugin-react-compiler@beta
 </TerminalBlock>
 
-You should also add the correct `target` to your compiler config, where `target` is the major version of React you are targeting:
+컴파일러에는 빌드 파이프라인에서 사용할 수 있는 Babel 플러그인이 포함되어 있습니다.
 
-```js {3}
+설치 후에 Babel 구성 파일에 추가하세요. 파이프라인에서 컴파일러가 **먼저** 실행되는 것이 매우 중요합니다.
+
+```js {7}
 // babel.config.js
-const ReactCompilerConfig = {
-  target: '18' // '17' | '18' | '19'
-};
+const ReactCompilerConfig = { /* ... */ };
 
 module.exports = function () {
   return {
     plugins: [
-      ['babel-plugin-react-compiler', ReactCompilerConfig],
+      ['babel-plugin-react-compiler', ReactCompilerConfig], // 가장 먼저 실행하세요!
+      // ...
     ],
   };
 };
 ```
 
+`babel-plugin-react-compiler`는 다른 Babel 플러그인보다 먼저 실행되어야 합니다. 이는 컴파일러가 사운드 분석(sound analysis)을 위해 입력 소스 정보를 필요로 하기 때문입니다.
+
 ### Vite {/*usage-with-vite*/}
 
 Vite를 사용하고 있다면, `vite-plugin-react`에 플러그인을 추가할 수 있습니다.
@@ -275,6 +330,7 @@ export default defineConfig(() => {
 
 ### Next.js {/*usage-with-nextjs*/}
 
+<<<<<<< HEAD
 Next.js에는 React 컴파일러를 활성화하는 실험적인 구성이 있습니다. 이 구성은 자동으로 Babel이 `babel-plugin-react-compiler`와 함께 설정되도록 보장합니다.
 
 - React 19 릴리즈 후보 버전을 사용하는 Next.js 카나리(Canary) 버전을 설치하세요.
@@ -305,6 +361,9 @@ module.exports = nextConfig;
 - Webpack (기본)
 - Turbopack (`--turbo` 옵션을 통해 활성화)
 
+=======
+Please refer to the [Next.js docs](https://nextjs.org/docs/canary/app/api-reference/next-config-js/reactCompiler) for more information.
+>>>>>>> 9467bc58868e66c53ca9385c8531dcf7b02178c2
 
 ### Remix {/*usage-with-remix*/}
 `vite-plugin-babel`을 설치하고 컴파일러의 Babel 플러그인을 추가하세요.
@@ -337,6 +396,7 @@ export default defineConfig({
 
 ### Webpack {/*usage-with-webpack*/}
 
+<<<<<<< HEAD
 다음과 같이 React 컴파일러를 위한 자체 로더를 만들 수 있습니다.
 
 ```js
@@ -371,6 +431,9 @@ function reactCompilerLoader(sourceCode, sourceMap) {
 
 module.exports = reactCompilerLoader;
 ```
+=======
+A community Webpack loader is [now available here](https://github.com/SukkaW/react-compiler-webpack).
+>>>>>>> 9467bc58868e66c53ca9385c8531dcf7b02178c2
 
 ### Expo {/*usage-with-expo*/}
 
@@ -394,11 +457,23 @@ Rsbuild 앱에서 React Compiler 를 활용하거나 사용하기 위해서는 [
 
 React 컴파일러 워킹 그룹에서도 회원으로 신청하여 피드백을 제공할 수 있습니다. [가입에 대한 자세한 내용은 README](https://github.com/reactwg/react-compiler)에서 확인하세요.
 
+<<<<<<< HEAD
 ### `(0 , _c) is not a function` 에러 {/*0--_c-is-not-a-function-error*/}
 
 이 에러는 React 19 RC 이상을 사용하지 않을 경우 발생합니다. 이 문제를 해결하려면 먼저 [React 19 RC로 앱을 업그레이드](https://ko.react.dev/blog/2024/04/25/react-19-upgrade-guide)하세요.
 
 React 19로 업그레이드할 수 없는 경우, [워킹 그룹](https://github.com/reactwg/react-compiler/discussions/6)에서 설명한 대로 사용자 공간 캐시 함수 구현을 시도해 볼 수 있습니다. 그러나 가능하면 React 19로 업그레이드하는 것을 권장합니다.
+=======
+### What does the compiler assume? {/*what-does-the-compiler-assume*/}
+
+React Compiler assumes that your code:
+
+1. Is valid, semantic JavaScript.
+2. Tests that nullable/optional values and properties are defined before accessing them (for example, by enabling [`strictNullChecks`](https://www.typescriptlang.org/tsconfig/#strictNullChecks) if using TypeScript), i.e., `if (object.nullableProperty) { object.nullableProperty.foo }` or with optional-chaining `object.nullableProperty?.foo`.
+3. Follows the [Rules of React](https://react.dev/reference/rules).
+
+React Compiler can verify many of the Rules of React statically, and will safely skip compilation when it detects an error. To see the errors we recommend also installing [eslint-plugin-react-compiler](https://www.npmjs.com/package/eslint-plugin-react-compiler).
+>>>>>>> 9467bc58868e66c53ca9385c8531dcf7b02178c2
 
 ### 컴포넌트가 최적화되었는지 어떻게 알 수 있을까요? {/*how-do-i-know-my-components-have-been-optimized*/}
 

src/content/reference/react/useReducer.md

@@ -51,9 +51,15 @@ function MyComponent() {
 
 #### 주의 사항 {/*caveats*/}
 
+<<<<<<< HEAD
 * `useReducer`는 Hook이므로 **컴포넌트의 최상위** 또는 커스텀 Hook에서만 호출할 수 있습니다. 반복문이나 조건문에서는 사용할 수 없습니다. 필요한 경우 새로운 컴포넌트를 추출하고 해당 컴포넌트로 state를 옮겨서 사용할 수 있습니다.
 * The `dispatch` function has a stable identity, so you will often see it omitted from effect dependencies, but including it will not cause the effect to fire. If the linter lets you omit a dependency without errors, it is safe to do. [Learn more about removing Effect dependencies.](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect)
 * Strict Mode에서는 [우연한 비순수성](#my-reducer-or-initializer-function-runs-twice)을 찾아내기 위해 reducer와 init 함수를 두번 호출합니다. 개발 환경에서만 한정된 동작이며, 배포 모드에는 영향을 미치지 않습니다. reducer와 init 함수가 순수 함수라면(그래야만 하듯이) 로직에 어떠한 영향도 미치지 않습니다. 호출 중 하나의 결과는 무시합니다.
+=======
+* `useReducer` is a Hook, so you can only call it **at the top level of your component** or your own Hooks. You can't call it inside loops or conditions. If you need that, extract a new component and move the state into it.
+* The `dispatch` function has a stable identity, so you will often see it omitted from Effect dependencies, but including it will not cause the Effect to fire. If the linter lets you omit a dependency without errors, it is safe to do. [Learn more about removing Effect dependencies.](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect)
+* In Strict Mode, React will **call your reducer and initializer twice** in order to [help you find accidental impurities.](#my-reducer-or-initializer-function-runs-twice) This is development-only behavior and does not affect production. If your reducer and initializer are pure (as they should be), this should not affect your logic. The result from one of the calls is ignored.
+>>>>>>> 9467bc58868e66c53ca9385c8531dcf7b02178c2
 
 ---
 

src/content/reference/react/useState.md

@@ -85,7 +85,7 @@ function handleClick() {
 
 * React는 [state 업데이트를 batch 합니다. ](/learn/queueing-a-series-of-state-updates) **모든 이벤트 핸들러가 실행되고** `set` 함수를 호출한 후에 화면을 업데이트합니다. 이렇게 하면 단일 이벤트 중에 여러 번 리렌더링 하는 것을 방지할 수 있습니다. 드물지만 DOM에 접근하기 위해 React가 화면을 더 일찍 업데이트하도록 강제해야 하는 경우, [`flushSync`](/reference/react-dom/flushSync)를 사용할 수 있습니다.
 
-* The `set` function has a stable identity, so you will often see it omitted from effect dependencies, but including it will not cause the effect to fire. If the linter lets you omit a dependency without errors, it is safe to do. [Learn more about removing Effect dependencies.](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect)
+* The `set` function has a stable identity, so you will often see it omitted from Effect dependencies, but including it will not cause the Effect to fire. If the linter lets you omit a dependency without errors, it is safe to do. [Learn more about removing Effect dependencies.](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect)
 
 * *렌더링 도중* `set` 함수를 호출하는 것은 현재 렌더링 중인 컴포넌트 내에서만 허용됩니다. React는 해당 출력을 버리고 즉시 새로운 state로 다시 렌더링을 시도합니다. 이 패턴은 거의 필요하지 않지만 **이전 렌더링의 정보를 저장하는 데 사용할 수 있습니다**. [아래 예시를 참고하세요.](#storing-information-from-previous-renders)