docs: translate React Compiler Section

Author: lumirlumir

src/content/reference/react-compiler/compilationMode.md

@@ -4,7 +4,7 @@ title: compilationMode
 
 <Intro>
 
-The `compilationMode` option controls how the React Compiler selects which functions to compile.
+`compilationMode` 옵션은 React 컴파일러가 어떤 함수를 컴파일할지 선택하는 방식을 제어합니다.
 
 </Intro>
 
@@ -18,95 +18,95 @@ The `compilationMode` option controls how the React Compiler selects which funct
 
 ---
 
-## Reference {/*reference*/}
+## 레퍼런스 {/*reference*/}
 
 ### `compilationMode` {/*compilationmode*/}
 
-Controls the strategy for determining which functions the React Compiler will optimize.
+React 컴파일러가 최적화할 함수를 결정하는 전략을 제어합니다.
 
-#### Type {/*type*/}
+#### 타입 {/*type*/}
 
 ```
 'infer' | 'syntax' | 'annotation' | 'all'
 ```
 
-#### Default value {/*default-value*/}
+#### 기본값 {/*default-value*/}
 
 `'infer'`
 
-#### Options {/*options*/}
+#### 옵션 {/*options*/}
 
-- **`'infer'`** (default): The compiler uses intelligent heuristics to identify React components and hooks:
-  - Functions explicitly annotated with `"use memo"` directive
-  - Functions that are named like components (PascalCase) or hooks (`use` prefix) AND create JSX and/or call other hooks
+- **`'infer'`** (기본값): 컴파일러가 지능형 휴리스틱을 사용하여 React 컴포넌트와 Hook을 식별합니다.
+  - `"use memo"` 지시어로 명시적으로 표시된 함수
+  - 컴포넌트(PascalCase) 또는 Hook(`use` 접두사)처럼 이름이 지어진 함수이면서 JSX를 생성하거나 다른 Hook을 호출하는 함수
 
-- **`'annotation'`**: Only compile functions explicitly marked with the `"use memo"` directive. Ideal for incremental adoption.
+- **`'annotation'`**: `"use memo"` 지시어로 명시적으로 표시된 함수만 컴파일합니다. 점진적 도입에 이상적입니다.
 
-- **`'syntax'`**: Only compile components and hooks that use Flow's [component](https://flow.org/en/docs/react/component-syntax/) and [hook](https://flow.org/en/docs/react/hook-syntax/) syntax.
+- **`'syntax'`**: Flow의 [component](https://flow.org/en/docs/react/component-syntax/) 및 [hook](https://flow.org/en/docs/react/hook-syntax/) 문법을 사용하는 컴포넌트와 Hook만 컴파일합니다.
 
-- **`'all'`**: Compile all top-level functions. Not recommended as it may compile non-React functions.
+- **`'all'`**: 모든 최상위 함수를 컴파일합니다. React가 아닌 함수도 컴파일할 수 있으므로 권장하지 않습니다.
 
-#### Caveats {/*caveats*/}
+#### 주의 사항 {/*caveats*/}
 
-- The `'infer'` mode requires functions to follow React naming conventions to be detected
-- Using `'all'` mode may negatively impact performance by compiling utility functions
-- The `'syntax'` mode requires Flow and won't work with TypeScript
-- Regardless of mode, functions with `"use no memo"` directive are always skipped
+- `'infer'` 모드는 함수가 React 명명 규칙을 따라야 감지할 수 있습니다.
+- `'all'` 모드를 사용하면 유틸리티 함수까지 컴파일하여 성능에 부정적인 영향을 미칠 수 있습니다.
+- `'syntax'` 모드는 Flow가 필요하며 TypeScript와는 작동하지 않습니다.
+- 모드와 관계없이 `"use no memo"` 지시어가 있는 함수는 항상 건너뜁니다.
 
 ---
 
-## Usage {/*usage*/}
+## 사용법 {/*usage*/}
 
-### Default inference mode {/*default-inference-mode*/}
+### 기본 추론 모드 {/*default-inference-mode*/}
 
-The default `'infer'` mode works well for most codebases that follow React conventions:
+기본 `'infer'` 모드는 React 규칙을 따르는 대부분의 코드베이스에서 잘 작동합니다.
 
 ```js
 {
   compilationMode: 'infer'
 }
 ```
 
-With this mode, these functions will be compiled:
+이 모드에서는 다음 함수들이 컴파일됩니다.
 
 ```js
-// ✅ Compiled: Named like a component + returns JSX
+// ✅ 컴파일됨: 컴포넌트처럼 이름이 지어졌고 JSX를 반환함
 function Button(props) {
   return <button>{props.label}</button>;
 }
 
-// ✅ Compiled: Named like a hook + calls hooks
+// ✅ 컴파일됨: Hook처럼 이름이 지어졌고 Hook을 호출함
 function useCounter() {
   const [count, setCount] = useState(0);
   return [count, setCount];
 }
 
-// ✅ Compiled: Explicit directive
+// ✅ 컴파일됨: 명시적인 지시어
 function expensiveCalculation(data) {
   "use memo";
   return data.reduce(/* ... */);
 }
 
-// ❌ Not compiled: Not a component/hook pattern
+// ❌ 컴파일되지 않음: 컴포넌트/Hook 패턴이 아님
 function calculateTotal(items) {
   return items.reduce((a, b) => a + b, 0);
 }
 ```
 
-### Incremental adoption with annotation mode {/*incremental-adoption*/}
+### 어노테이션 모드를 사용한 점진적 도입 {/*incremental-adoption*/}
 
-For gradual migration, use `'annotation'` mode to only compile marked functions:
+점진적 마이그레이션을 위해 `'annotation'` 모드를 사용하여 표시된 함수만 컴파일합니다.
 
 ```js
 {
   compilationMode: 'annotation'
 }
 ```
 
-Then explicitly mark functions to compile:
+그런 다음 컴파일할 함수를 명시적으로 표시합니다.
 
 ```js
-// Only this function will be compiled
+// 이 함수만 컴파일됩니다
 function ExpensiveList(props) {
   "use memo";
   return (
@@ -118,51 +118,51 @@ function ExpensiveList(props) {
   );
 }
 
-// This won't be compiled without the directive
+// 지시어가 없으면 컴파일되지 않습니다
 function NormalComponent(props) {
   return <div>{props.content}</div>;
 }
 ```
 
-### Using Flow syntax mode {/*flow-syntax-mode*/}
+### Flow 문법 모드 사용하기 {/*flow-syntax-mode*/}
 
-If your codebase uses Flow instead of TypeScript:
+코드베이스가 TypeScript 대신 Flow를 사용하는 경우입니다.
 
 ```js
 {
   compilationMode: 'syntax'
 }
 ```
 
-Then use Flow's component syntax:
+그런 다음 Flow의 컴포넌트 문법을 사용합니다.
 
 ```js
-// Compiled: Flow component syntax
+// 컴파일됨: Flow 컴포넌트 문법
 component Button(label: string) {
   return <button>{label}</button>;
 }
 
-// Compiled: Flow hook syntax
+// 컴파일됨: Flow Hook 문법
 hook useCounter(initial: number) {
   const [count, setCount] = useState(initial);
   return [count, setCount];
 }
 
-// Not compiled: Regular function syntax
+// 컴파일되지 않음: 일반 함수 문법
 function helper(data) {
   return process(data);
 }
 ```
 
-### Opting out specific functions {/*opting-out*/}
+### 특정 함수 제외하기 {/*opting-out*/}
 
-Regardless of compilation mode, use `"use no memo"` to skip compilation:
+컴파일 모드와 관계없이 `"use no memo"`를 사용하여 컴파일을 건너뛸 수 있습니다.
 
 ```js
 function ComponentWithSideEffects() {
-  "use no memo"; // Prevent compilation
+  "use no memo"; // 컴파일 방지
 
-  // This component has side effects that shouldn't be memoized
+  // 이 컴포넌트는 메모이제이션되어서는 안 되는 사이드 이펙트가 있습니다
   logToAnalytics('component_rendered');
 
   return <div>Content</div>;
@@ -171,29 +171,29 @@ function ComponentWithSideEffects() {
 
 ---
 
-## Troubleshooting {/*troubleshooting*/}
+## 문제 해결 {/*troubleshooting*/}
 
-### Component not being compiled in infer mode {/*component-not-compiled-infer*/}
+### infer 모드에서 컴포넌트가 컴파일되지 않는 경우 {/*component-not-compiled-infer*/}
 
-In `'infer'` mode, ensure your component follows React conventions:
+`'infer'` 모드에서는 컴포넌트가 React 규칙을 따르는지 확인하세요.
 
 ```js
-// ❌ Won't be compiled: lowercase name
+// ❌ 컴파일되지 않음: 소문자 이름
 function button(props) {
   return <button>{props.label}</button>;
 }
 
-// ✅ Will be compiled: PascalCase name
+// ✅ 컴파일됨: PascalCase 이름
 function Button(props) {
   return <button>{props.label}</button>;
 }
 
-// ❌ Won't be compiled: doesn't create JSX or call hooks
+// ❌ 컴파일되지 않음: JSX를 생성하거나 Hook을 호출하지 않음
 function useData() {
   return window.localStorage.getItem('data');
 }
 
-// ✅ Will be compiled: calls a hook
+// ✅ 컴파일됨: Hook을 호출함
 function useData() {
   const [data] = useState(() => window.localStorage.getItem('data'));
   return data;

src/content/reference/react-compiler/configuration.md

@@ -10,7 +10,7 @@ title: 설정
 
 <Note>
 
-대부분의 앱에서는 기본 옵션이 기본적으로 잘 작동합니다. 특별한 필요가 있다면 이러한 고급 옵션을 사용할 수 있습니다.
+대부분의 앱에서는 기본 옵션이 기본적으로 잘 작동합니다. 특별한 필요성이 있는 경우에 이러한 고급 옵션을 사용할 수 있습니다.
 
 </Note>
 
@@ -31,9 +31,9 @@ module.exports = {
 
 ## 컴파일 제어 {/*compilation-control*/}
 
-이 옵션들은 컴파일러가 *무엇*을 최적화하고, *어떻게* 컴포넌트와 hooks를 컴파일 대상으로 선택할지를 제어합니다.
+이 옵션들은 컴파일러가 *무엇*을 최적화하고, *어떻게* 컴포넌트와 Hook을 컴파일 대상으로 선택할지를 제어합니다.
 
-* [`compilationMode`](/reference/react-compiler/compilationMode)는 컴파일할 함수를 선택하는 전략을 제어합니다. (예: 모든 함수, 어노테이션된 함수만, 또는 컴파일러의 자동 감지).
+* [`compilationMode`](/reference/react-compiler/compilationMode)는 컴파일할 함수를 선택하는 전략을 제어합니다. (예: 모든 함수, 어노테이션된 함수만, 또는 컴파일러의 자동 감지)
 
 ```js
 {
@@ -127,7 +127,7 @@ module.exports = {
 
 ### React 17/18 프로젝트 {/*react-17-18*/}
 
-React 17/18 프로젝트에서는 런타임 패키지와 target 설정이 필요합니다.
+React 17/18 프로젝트에서는 런타임 패키지와 `target` 설정이 필요합니다.
 
 ```bash
 npm install react-compiler-runtime@latest