diff --git a/src/content/reference/react-compiler/directives.md b/src/content/reference/react-compiler/directives.md index 11e0fa39a..397a305c8 100644 --- a/src/content/reference/react-compiler/directives.md +++ b/src/content/reference/react-compiler/directives.md @@ -1,14 +1,14 @@ --- -title: Directives +title: 지시어 --- -React Compiler directives are special string literals that control whether specific functions are compiled. +React 컴파일러 지시어는 특정 함수에 대한 컴파일 적용 여부를 제어하는 특수 문자열 리터럴입니다. ```js function MyComponent() { - "use memo"; // Opt this component into compilation + "use memo"; // 이 컴포넌트를 컴파일 대상으로 설정합니다 return
{/* ... */}
; } ``` @@ -17,53 +17,53 @@ function MyComponent() { --- -## Overview {/*overview*/} +## 개요 {/*overview*/} -React Compiler directives provide fine-grained control over which functions are optimized by the compiler. They are string literals placed at the beginning of a function body or at the top of a module. +React 컴파일러 지시어는 컴파일러가 최적화할 함수를 세밀하게 제어할 수 있도록 합니다. 함수 본문의 시작 부분이나 모듈의 최상단에 배치되는 문자열 리터럴입니다. -### Available directives {/*available-directives*/} +### 사용 가능한 지시어 {/*available-directives*/} -* **[`"use memo"`](/reference/react-compiler/directives/use-memo)** - Opts a function into compilation -* **[`"use no memo"`](/reference/react-compiler/directives/use-no-memo)** - Opts a function out of compilation +* **[`"use memo"`](/reference/react-compiler/directives/use-memo)** - 함수를 컴파일 대상으로 선택합니다 +* **[`"use no memo"`](/reference/react-compiler/directives/use-no-memo)** - 함수를 컴파일 대상에서 제외합니다 -### Quick comparison {/*quick-comparison*/} +### 빠른 비교 {/*quick-comparison*/} -| Directive | Purpose | When to use | +| 지시어 | 목적 | 사용 시점 | |-----------|---------|-------------| -| [`"use memo"`](/reference/react-compiler/directives/use-memo) | Force compilation | When using `annotation` mode or to override `infer` mode heuristics | -| [`"use no memo"`](/reference/react-compiler/directives/use-no-memo) | Prevent compilation | Debugging issues or working with incompatible code | +| [`"use memo"`](/reference/react-compiler/directives/use-memo) | 컴파일 강제 | `annotation` 모드를 사용하거나 `infer` 모드의 휴리스틱을 재정의할 때 | +| [`"use no memo"`](/reference/react-compiler/directives/use-no-memo) | 컴파일 제외 | 이슈를 디버깅하거나 호환되지 않는 코드를 다룰 때 | --- -## Usage {/*usage*/} +## 사용법 {/*usage*/} -### Function-level directives {/*function-level*/} +### 함수 수준 지시어 {/*function-level*/} -Place directives at the beginning of a function to control its compilation: +함수의 시작 부분에 지시어를 선언하여 컴파일을 제어합니다. ```js -// Opt into compilation +// 컴파일 대상으로 설정 function OptimizedComponent() { "use memo"; return
This will be optimized
; } -// Opt out of compilation +// 컴파일 대상에서 제외 function UnoptimizedComponent() { "use no memo"; return
This won't be optimized
; } ``` -### Module-level directives {/*module-level*/} +### 모듈 수준 지시어 {/*module-level*/} -Place directives at the top of a file to affect all functions in that module: +파일의 최상단에 선언하여 해당 모듈의 모든 함수에 적용됩니다. ```js -// At the very top of the file +// 파일의 최상단에 선언 "use memo"; -// All functions in this file will be compiled +// 이 파일의 모든 함수가 컴파일됩니다 function Component1() { return
Compiled
; } @@ -72,31 +72,31 @@ function Component2() { return
Also compiled
; } -// Can be overridden at function level +// 함수 수준에서 재정의 가능 function Component3() { - "use no memo"; // This overrides the module directive + "use no memo"; // 모듈 수준에서 재정의됩니다 return
Not compiled
; } ``` -### Compilation modes interaction {/*compilation-modes*/} +### 컴파일 모드와의 상호작용 {/*compilation-modes*/} -Directives behave differently depending on your [`compilationMode`](/reference/react-compiler/compilationMode): +지시어는 [`compilationMode`](/reference/react-compiler/compilationMode)에 따라 다르게 동작합니다. -* **`annotation` mode**: Only functions with `"use memo"` are compiled -* **`infer` mode**: Compiler decides what to compile, directives override decisions -* **`all` mode**: Everything is compiled, `"use no memo"` can exclude specific functions +* **`annotation` 모드**: `"use memo"`가 선언된 함수만 컴파일됩니다 +* **`infer` 모드**: 컴파일러가 컴파일할 대상을 결정하며 지시어는 이 결정을 재정의합니다 +* **`all` 모드**: 모든 것이 컴파일되며 `"use no memo"` 로 특정 함수를 제외할 수 있습니다 --- -## Best practices {/*best-practices*/} +## 모범 사례 {/*best-practices*/} -### Use directives sparingly {/*use-sparingly*/} +### 지시어는 신중하게 사용하세요 {/*use-sparingly*/} -Directives are escape hatches. Prefer configuring the compiler at the project level: +이 지시어는 탈출구(escape hatch)입니다. 컴파일러는 프로젝트 수준에서 설정하는 것을 권장합니다. ```js -// ✅ Good - project-wide configuration +// ✅ good - 프로젝트 전역 설정 { plugins: [ ['babel-plugin-react-compiler', { @@ -105,70 +105,70 @@ Directives are escape hatches. Prefer configuring the compiler at the project le ] } -// ⚠️ Use directives only when needed +// ⚠️ 필요할 때마 지시어 사용 function SpecialCase() { - "use no memo"; // Document why this is needed + "use no memo"; // 왜 필요한지 문서화하세요 // ... } ``` -### Document directive usage {/*document-usage*/} +### 지시어 사용 이유를 문서화하세요 {/*document-usage*/} -Always explain why a directive is used: +지시어를 사용하는 이유를 항상 명확히 설명하세요. ```js -// ✅ Good - clear explanation +// ✅ good - 명확한 설명 function DataGrid() { - "use no memo"; // TODO: Remove after fixing issue with dynamic row heights (JIRA-123) - // Complex grid implementation + "use no memo"; // TODO: 동적 row heiht 이슈 해결 후 제거 (JIRA-123) + // 복잡한 그리드 구현 } -// ❌ Bad - no explanation +// ❌ bad - 설명 없음 function Mystery() { "use no memo"; // ... } ``` -### Plan for removal {/*plan-removal*/} +### 제거 계획을 세우세요 {/*plan-removal*/} -Opt-out directives should be temporary: +제외 지시어는 임시로 사용해야 합니다. -1. Add the directive with a TODO comment -2. Create a tracking issue -3. Fix the underlying problem -4. Remove the directive +1. TODO 주석과 함께 지시어를 추가합니다 +2. 추적용 이슈를 생성합니다 +3. 근본적인 문제를 해결합니다 +4. 지시어를 제거합니다 ```js function TemporaryWorkaround() { - "use no memo"; // TODO: Remove after upgrading ThirdPartyLib to v2.0 + "use no memo"; // TODO: ThirdPartyLib를 v2.0으로 업그레이드한 후 제거 return ; } ``` --- -## Common patterns {/*common-patterns*/} +## 일반적인 패턴 {/*common-patterns*/} -### Gradual adoption {/*gradual-adoption*/} +### 점진적 도입 {/*gradual-adoption*/} -When adopting the React Compiler in a large codebase: +대규모 코드베이스에서 React 컴파일러를 도입할 때 다음과 같은 방식이 일반적입니다. ```js -// Start with annotation mode +// annotation 모드로 시작 { compilationMode: 'annotation' } -// Opt in stable components +// 안정적인 컴파일러를 컴파일 대상으로 설정 function StableComponent() { "use memo"; - // Well-tested component + // 충분히 테스트된 컴포넌트 } -// Later, switch to infer mode and opt out problematic ones +// 나중에 infer 모드로 전환하고 문제가 있는 컴포넌트는 제외 function ProblematicComponent() { - "use no memo"; // Fix issues before removing + "use no memo"; // 제거 전에 이슈를 해결하세요 // ... } ``` @@ -176,23 +176,23 @@ function ProblematicComponent() { --- -## Troubleshooting {/*troubleshooting*/} +## 문제 해결 {/*troubleshooting*/} -For specific issues with directives, see the troubleshooting sections in: +지시어와 관련된 구체적인 문제는 다음 문제 해결 섹션을 참고하세요. -* [`"use memo"` troubleshooting](/reference/react-compiler/directives/use-memo#troubleshooting) -* [`"use no memo"` troubleshooting](/reference/react-compiler/directives/use-no-memo#troubleshooting) +* [`"use memo"` 문제 해결](/reference/react-compiler/directives/use-memo#troubleshooting) +* [`"use no memo"` 문제 해결](/reference/react-compiler/directives/use-no-memo#troubleshooting) -### Common issues {/*common-issues*/} +### 자주 발생하는 이슈 {/*common-issues*/} -1. **Directive ignored**: Check placement (must be first) and spelling -2. **Compilation still happens**: Check `ignoreUseNoForget` setting -3. **Module directive not working**: Ensure it's before all imports +1. **지시어가 무시됨**: 위치(파일 또는 함수의 첫 줄인지)와 철자를 확인하세요. +2. **컴파일이 계속됨**: `ignoreUseNoForget` 설정을 확인하세요. +3. **모듈 수준 지시어가 작동하지 않음**: 모든 import 문보다 앞에 있는지 확인하세요. --- -## See also {/*see-also*/} +## 참고 {/*see-also*/} -* [`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](https://react.dev/learn/react-compiler) - Getting started guide +* [`compilationMode`](/reference/react-compiler/compilationMode) - 컴파일러가 최적화 대상을 선택하는 방식을 설정합니다 +* [`Configuration`](/reference/react-compiler/configuration) - 전체 컴파일러 설정 옵션 +* [React Compiler documentation](https://react.dev/learn/react-compiler) - 시작 가이드 diff --git a/src/sidebarReference.json b/src/sidebarReference.json index 623f6aa87..98b52a38c 100644 --- a/src/sidebarReference.json +++ b/src/sidebarReference.json @@ -379,7 +379,7 @@ ] }, { - "title": "Directives", + "title": "지시어", "path": "/reference/react-compiler/directives", "routes": [ {