diff --git a/src/content/learn/react-compiler/debugging.md b/src/content/learn/react-compiler/debugging.md
index 52cf6f3bd..d7d13ef46 100644
--- a/src/content/learn/react-compiler/debugging.md
+++ b/src/content/learn/react-compiler/debugging.md
@@ -20,7 +20,7 @@ React 컴파일러는 [React의 규칙](/reference/rules)을 따르는 코드를
### 컴파일러 오류 vs 런타임 문제 {/*compiler-errors-vs-runtime-issues*/}
-**컴파일러 오류**는 빌드 시점에 발생하며 코드가 컴파일되지 않게 합니다. 컴파일러는 문제가 있는 코드를 실패시키기보다 건너뛰도록 설계되어 있기 때문에 이러한 오류는 드뭅니다.
+**컴파일러 오류**는 빌드 시점에 발생하며 코드가 컴파일되지 않게 합니다. 컴파일러는 문제가 있는 코드를 실패시키기보다 건너뛰도록 설계되어 있기 때문에 이러한 오류는 자주 발생하지 않습니다.
**런타임 문제**는 컴파일된 코드가 예상과 다르게 동작할 때 발생합니다. React 컴파일러 관련 문제가 발생하면 대부분 런타임 문제입니다. 이는 일반적으로 컴파일러가 감지할 수 없는 미묘한 방식으로 코드가 React의 규칙을 위반하고, 컴파일러가 건너뛰어야 했던 컴포넌트를 실수로 컴파일했을 때 발생합니다.
diff --git a/src/content/learn/react-compiler/incremental-adoption.md b/src/content/learn/react-compiler/incremental-adoption.md
index 1167645ea..091f8fc2c 100644
--- a/src/content/learn/react-compiler/incremental-adoption.md
+++ b/src/content/learn/react-compiler/incremental-adoption.md
@@ -3,15 +3,15 @@ title: 점진적 도입
---
-React 컴파일러는 점진적으로 도입할 수 있어서 코드베이스의 특정 부분에서 먼저 시도해 볼 수 있습니다. 이 가이드에서는 기존 프로젝트에서 컴파일러를 단계적으로 배포하는 방법을 알아봅니다.
+React 컴파일러는 점진적으로 도입할 수 있으며, 코드베이스의 특정 부분에서 먼저 시도해 볼 수 있습니다. 이 가이드에서는 기존 프로젝트에서 컴파일러를 단계적으로 배포하는 방법을 알아봅니다.
* 점진적 도입이 권장되는 이유
* 디렉터리 기반 도입을 위한 Babel overrides 사용
-* 선택적 컴파일을 위한 "use memo" 지시어 사용
-* 컴포넌트 제외를 위한 "use no memo" 지시어 사용
+* 선택적 컴파일을 위한 `"use memo"` 지시어 사용
+* 컴포넌트 제외를 위한 `"use no memo"` 지시어 사용
* 게이팅을 통한 런타임 기능 플래그
* 도입 진행 상황 모니터링
@@ -32,7 +32,7 @@ React 컴파일러는 전체 코드베이스를 자동으로 최적화하도록
React 컴파일러를 점진적으로 도입하는 세 가지 주요 방법이 있습니다.
1. **Babel overrides** - 특정 디렉터리에 컴파일러 적용
-2. **"use memo"로 선택적 적용** - 명시적으로 선택한 컴포넌트만 컴파일
+2. **`"use memo"`로 선택적 적용** - 명시적으로 선택한 컴포넌트만 컴파일
3. **런타임 게이팅** - 기능 플래그로 컴파일 제어
모든 방법은 전체 배포 전에 애플리케이션의 특정 부분에서 컴파일러를 테스트할 수 있게 해줍니다.
@@ -119,9 +119,9 @@ module.exports = {
```
-## "use memo"를 사용한 선택적 모드 {/*opt-in-mode-with-use-memo*/}
+## `"use memo"`를 사용한 선택적 모드 {/*opt-in-mode-with-use-memo*/}
-최대한의 제어를 위해 `compilationMode: 'annotation'`을 사용하여 `"use memo"` 지시어로 명시적으로 선택한 컴포넌트와 Hook만 컴파일할 수 있습니다.
+최대한의 제어를 위해 `compilationMode: 'annotation'`을 사용하여 `"use memo"` 지시어를 통해 명시적으로 선택한 컴포넌트와 Hook만 컴파일할 수 있습니다.
이 방법은 개별 컴포넌트와 Hook에 대한 세밀한 제어를 제공합니다. 전체 디렉터리에 영향을 주지 않고 특정 컴포넌트에서 컴파일러를 테스트하고 싶을 때 유용합니다.
@@ -167,9 +167,9 @@ function useSortedData(data) {
```
`compilationMode: 'annotation'`을 사용하면 다음을 해야 합니다.
-- 최적화하려는 모든 컴포넌트에 `"use memo"` 추가
-- 모든 커스텀 Hook에 `"use memo"` 추가
-- 새 컴포넌트에도 추가하는 것을 기억
+- 최적화하려는 모든 컴포넌트에 `"use memo"`를 추가합니다.
+- 모든 커스텀 Hook에 `"use memo"`를 추가합니다.
+- 이후에 새로 작성하는 컴포넌트에도 추가하는 것을 잊지 마세요.
이를 통해 컴파일러의 영향을 평가하는 동안 어떤 컴포넌트가 컴파일되는지 정밀하게 제어할 수 있습니다.
diff --git a/src/content/learn/react-compiler/index.md b/src/content/learn/react-compiler/index.md
index 190d32da0..eb4c01a09 100644
--- a/src/content/learn/react-compiler/index.md
+++ b/src/content/learn/react-compiler/index.md
@@ -8,7 +8,7 @@ title: React 컴파일러
## 설치 {/*installation*/}
-[React 컴파일러 설치](/learn/react-compiler/installation)를 시작하고 빌드 도구와 함께 구성하는 방법을 알아보세요.
+[React 컴파일러 설치](/learn/react-compiler/installation)를 통해 시작하고 빌드 도구와 함께 구성하는 방법을 알아보세요.
## 점진적 도입 {/*incremental-adoption*/}
diff --git a/src/content/learn/react-compiler/installation.md b/src/content/learn/react-compiler/installation.md
index f748b6670..c0888d52a 100644
--- a/src/content/learn/react-compiler/installation.md
+++ b/src/content/learn/react-compiler/installation.md
@@ -187,15 +187,15 @@ ESLint 규칙은 다음과 같은 역할을 합니다.
React 컴파일러에 의해 최적화된 컴포넌트는 React DevTools에서 "Memo ✨" 배지가 표시됩니다.
-1. [React Developer Tools](/learn/react-developer-tools) 브라우저 확장 프로그램을 설치합니다
-2. 개발 모드에서 앱을 엽니다
-3. React DevTools를 엽니다
-4. 컴포넌트 이름 옆에 ✨ 이모지가 있는지 확인합니다
+1. [React Developer Tools](/learn/react-developer-tools) 브라우저 확장 프로그램을 설치합니다.
+2. 개발 모드에서 앱을 엽니다.
+3. React DevTools를 엽니다.
+4. 컴포넌트 이름 옆에 ✨ 이모지가 있는지 확인합니다.
컴파일러가 작동하는 경우
-- 컴포넌트에 "Memo ✨" 배지가 React DevTools에 표시됩니다
-- 비용이 큰 계산이 자동으로 메모이제이션됩니다
-- 수동으로 `useMemo`를 사용할 필요가 없습니다
+- 컴포넌트에 "Memo ✨" 배지가 React DevTools에 표시됩니다.
+- 비용이 큰 계산이 자동으로 메모이제이션됩니다.
+- 수동으로 `useMemo`를 사용할 필요가 없습니다.
### 빌드 출력 확인 {/*check-build-output*/}
diff --git a/src/content/learn/react-compiler/introduction.md b/src/content/learn/react-compiler/introduction.md
index 9b31cd314..ad3c3a5bd 100644
--- a/src/content/learn/react-compiler/introduction.md
+++ b/src/content/learn/react-compiler/introduction.md
@@ -99,7 +99,7 @@ React 컴파일러의 자동 메모이제이션은 주로 **업데이트 성능
#### 리렌더링 최적화 {/*optimizing-re-renders*/}
-React는 UI를 현재 state의 함수로 표현할 수 있게 해줍니다 (더 구체적으로는 props, state, context). 현재 구현에서 컴포넌트의 state가 변경되면 React는 `useMemo()`, `useCallback()`, `React.memo()`를 사용한 수동 메모이제이션을 적용하지 않는 한 해당 컴포넌트 _및 모든 자식 컴포넌트_를 리렌더링합니다. 예를 들어, 다음 예시에서 ``은 ``의 state가 변경될 때마다 리렌더링됩니다.
+React는 UI를 현재 state의 함수로 표현할 수 있게 해줍니다 (더 구체적으로는 props, state, context). 현재 구현에서 컴포넌트의 state가 변경되면 React는 `useMemo()`, `useCallback()`, `React.memo()`를 사용한 수동 메모이제이션을 적용하지 않는 한 해당 컴포넌트 및 모든 자식 컴포넌트를 리렌더링합니다. 예를 들어, 다음 예시에서 ``은 ``의 state가 변경될 때마다 리렌더링됩니다.
```javascript
function FriendList({ friends }) {
@@ -144,7 +144,7 @@ function TableContainer({ items }) {
- React 컴파일러는 모든 함수가 아닌 React 컴포넌트와 Hook만 메모이제이션합니다.
- React 컴파일러의 메모이제이션은 여러 컴포넌트나 Hook 간에 공유되지 않습니다.
-따라서 `expensivelyProcessAReallyLargeArrayOfObjects`가 여러 다른 컴포넌트에서 사용되는 경우, 정확히 동일한 items가 전달되더라도 비용이 많이 드는 계산이 반복적으로 실행됩니다. 코드를 더 복잡하게 만들기 전에 먼저 [프로파일링](reference/react/useMemo#how-to-tell-if-a-calculation-is-expensive)하여 정말로 비용이 많이 드는지 확인하는 것을 권장합니다.
+따라서 `expensivelyProcessAReallyLargeArrayOfObjects`가 여러 다른 컴포넌트에서 사용되는 경우, 정확히 동일한 `items`가 전달되더라도 비용이 많이 드는 계산이 반복적으로 실행됩니다. 코드를 더 복잡하게 만들기 전에 먼저 [프로파일링](reference/react/useMemo#how-to-tell-if-a-calculation-is-expensive)하여 정말로 비용이 많이 드는지 확인하는 것을 권장합니다.
## 컴파일러를 사용해 봐야 하나요? {/*should-i-try-out-the-compiler*/}
diff --git a/src/content/reference/react-compiler/compiling-libraries.md b/src/content/reference/react-compiler/compiling-libraries.md
index bcd284d01..df9a1d173 100644
--- a/src/content/reference/react-compiler/compiling-libraries.md
+++ b/src/content/reference/react-compiler/compiling-libraries.md
@@ -1,30 +1,30 @@
---
-title: Compiling Libraries
+title: 라이브러리 컴파일
---
-This guide helps library authors understand how to use React Compiler to ship optimized library code to their users.
+이 가이드는 라이브러리 작성자가 React 컴파일러를 사용하여 최적화된 라이브러리 코드를 사용자에게 제공하는 방법을 설명합니다.
-## Why Ship Compiled Code? {/*why-ship-compiled-code*/}
+## 컴파일된 코드를 배포해야 하는 이유 {/*why-ship-compiled-code*/}
-As a library author, you can compile your library code before publishing to npm. This provides several benefits:
+라이브러리 작성자는 npm에 배포하기 전에 라이브러리 코드를 컴파일할 수 있습니다. 이는 여러 가지 이점을 제공합니다.
-- **Performance improvements for all users** - Your library users get optimized code even if they aren't using React Compiler yet
-- **No configuration required by users** - The optimizations work out of the box
-- **Consistent behavior** - All users get the same optimized version regardless of their build setup
+- **모든 사용자를 위한 성능 향상** - 라이브러리 사용자가 아직 React 컴파일러를 사용하지 않더라도 최적화된 코드를 얻습니다.
+- **사용자에게 설정이 필요 없음** - 최적화가 바로 작동합니다.
+- **일관된 동작** - 모든 사용자가 빌드 설정에 관계없이 동일한 최적화된 버전을 얻습니다.
-## Setting Up Compilation {/*setting-up-compilation*/}
+## 컴파일 설정하기 {/*setting-up-compilation*/}
-Add React Compiler to your library's build process:
+라이브러리의 빌드 프로세스에 React 컴파일러를 추가하세요.
npm install -D babel-plugin-react-compiler@latest
-Configure your build tool to compile your library. For example, with Babel:
+라이브러리를 컴파일하도록 빌드 도구를 설정하세요. Babel을 사용하는 예시입니다.
```js
// babel.config.js
@@ -36,13 +36,13 @@ module.exports = {
};
```
-## Backwards Compatibility {/*backwards-compatibility*/}
+## 하위 호환성 {/*backwards-compatibility*/}
-If your library supports React versions below 19, you'll need additional configuration:
+라이브러리가 React 19 미만 버전을 지원하는 경우 추가 설정이 필요합니다.
-### 1. Install the runtime package {/*install-runtime-package*/}
+### 1. 런타임 패키지 설치하기 {/*install-runtime-package*/}
-We recommend installing react-compiler-runtime as a direct dependency:
+`react-compiler-runtime`을 직접 의존성`dependencies`으로 설치하는 것을 권장합니다.
npm install react-compiler-runtime@latest
@@ -59,48 +59,48 @@ npm install react-compiler-runtime@latest
}
```
-### 2. Configure the target version {/*configure-target-version*/}
+### 2. `target` 버전 설정하기 {/*configure-target-version*/}
-Set the minimum React version your library supports:
+라이브러리가 지원하는 최소 React 버전을 설정하세요.
```js
{
- target: '17', // Minimum supported React version
+ target: '17', // 지원하는 최소 React 버전
}
```
-## Testing Strategy {/*testing-strategy*/}
+## 테스트 전략 {/*testing-strategy*/}
-Test your library both with and without compilation to ensure compatibility. Run your existing test suite against the compiled code, and also create a separate test configuration that bypasses the compiler. This helps catch any issues that might arise from the compilation process and ensures your library works correctly in all scenarios.
+호환성을 보장하기 위해 컴파일 유무에 관계없이 라이브러리를 테스트하세요. 컴파일된 코드에 대해 기존 테스트를 실행하고 컴파일러를 우회하는 별도의 테스트 설정도 만드세요. 이렇게 하면 컴파일 과정에서 발생할 수 있는 문제를 발견하고 모든 시나리오에서 라이브러리가 올바르게 작동하는지 확인할 수 있습니다.
-## Troubleshooting {/*troubleshooting*/}
+## 문제 해결 {/*troubleshooting*/}
-### Library doesn't work with older React versions {/*library-doesnt-work-with-older-react-versions*/}
+### 라이브러리가 이전 React 버전에서 작동하지 않는 경우 {/*library-doesnt-work-with-older-react-versions*/}
-If your compiled library throws errors in React 17 or 18:
+컴파일된 라이브러리가 React 17 또는 18에서 오류를 발생시키는 경우입니다.
-1. Verify you've installed `react-compiler-runtime` as a dependency
-2. Check that your `target` configuration matches your minimum supported React version
-3. Ensure the runtime package is included in your published bundle
+1. `react-compiler-runtime`이 의존성으로 설치되어 있는지 확인하세요.
+2. `target` 설정이 지원하는 최소 React 버전과 일치하는지 확인하세요.
+3. 런타임 패키지가 배포된 번들에 포함되어 있는지 확인하세요.
-### Compilation conflicts with other Babel plugins {/*compilation-conflicts-with-other-babel-plugins*/}
+### 다른 Babel 플러그인과의 컴파일 충돌 {/*compilation-conflicts-with-other-babel-plugins*/}
-Some Babel plugins may conflict with React Compiler:
+일부 Babel 플러그인은 React 컴파일러와 충돌할 수 있습니다.
-1. Place `babel-plugin-react-compiler` early in your plugin list
-2. Disable conflicting optimizations in other plugins
-3. Test your build output thoroughly
+1. `babel-plugin-react-compiler`를 플러그인 목록의 앞쪽에 배치하세요.
+2. 다른 플러그인에서 충돌하는 최적화를 비활성화하세요.
+3. 빌드 출력을 철저히 테스트하세요.
-### Runtime module not found {/*runtime-module-not-found*/}
+### 런타임 모듈을 찾을 수 없는 경우 {/*runtime-module-not-found*/}
-If users see "Cannot find module 'react-compiler-runtime'":
+사용자가 "Cannot find module 'react-compiler-runtime'" 오류를 보는 경우입니다.
-1. Ensure the runtime is listed in `dependencies`, not `devDependencies`
-2. Check that your bundler includes the runtime in the output
-3. Verify the package is published to npm with your library
+1. 런타임이 `devDependencies`가 아닌 `dependencies`에 나열되어 있는지 확인하세요.
+2. 번들러가 출력에 런타임을 포함하는지 확인하세요.
+3. 패키지가 라이브러리와 함께 npm에 배포되었는지 확인하세요.
-## Next Steps {/*next-steps*/}
+## 다음 단계 {/*next-steps*/}
-- Learn about [debugging techniques](/learn/react-compiler/debugging) for compiled code
-- Check the [configuration options](/reference/react-compiler/configuration) for all compiler options
-- Explore [compilation modes](/reference/react-compiler/compilationMode) for selective optimization
+- 컴파일된 코드를 위한 [디버깅 기법](/learn/react-compiler/debugging)에 대해 알아보세요.
+- 모든 컴파일러 옵션을 위한 [설정 옵션](/reference/react-compiler/configuration)을 확인하세요.
+- 선택적 최적화를 위한 [컴파일 모드](/reference/react-compiler/compilationMode)를 살펴보세요.
diff --git a/src/content/reference/react-compiler/directives.md b/src/content/reference/react-compiler/directives.md
index 397a305c8..c58fcb63c 100644
--- a/src/content/reference/react-compiler/directives.md
+++ b/src/content/reference/react-compiler/directives.md
@@ -8,7 +8,7 @@ React 컴파일러 지시어는 특정 함수에 대한 컴파일 적용 여부
```js
function MyComponent() {
- "use memo"; // 이 컴포넌트를 컴파일 대상으로 설정합니다
+ "use memo"; // 이 컴포넌트를 컴파일 대상으로 설정합니다.
return {/* ... */}
;
}
```
@@ -23,14 +23,14 @@ React 컴파일러 지시어는 컴파일러가 최적화할 함수를 세밀하
### 사용 가능한 지시어 {/*available-directives*/}
-* **[`"use memo"`](/reference/react-compiler/directives/use-memo)** - 함수를 컴파일 대상으로 선택합니다
-* **[`"use no memo"`](/reference/react-compiler/directives/use-no-memo)** - 함수를 컴파일 대상에서 제외합니다
+* **[`"use memo"`](/reference/react-compiler/directives/use-memo)** - 함수를 컴파일 대상으로 선택합니다.
+* **[`"use no memo"`](/reference/react-compiler/directives/use-no-memo)** - 함수를 컴파일 대상에서 제외합니다.
### 빠른 비교 {/*quick-comparison*/}
| 지시어 | 목적 | 사용 시점 |
|-----------|---------|-------------|
-| [`"use memo"`](/reference/react-compiler/directives/use-memo) | 컴파일 강제 | `annotation` 모드를 사용하거나 `infer` 모드의 휴리스틱을 재정의할 때 |
+| [`"use memo"`](/reference/react-compiler/directives/use-memo) | 컴파일 강제 | `annotation` 모드를 사용하거나 `infer` 모드의 휴리스틱을 재정의Override할 때 |
| [`"use no memo"`](/reference/react-compiler/directives/use-no-memo) | 컴파일 제외 | 이슈를 디버깅하거나 호환되지 않는 코드를 다룰 때 |
---
@@ -57,7 +57,7 @@ function UnoptimizedComponent() {
### 모듈 수준 지시어 {/*module-level*/}
-파일의 최상단에 선언하여 해당 모듈의 모든 함수에 적용됩니다.
+파일의 최상단에 선언하여 해당 모듈의 모든 함수에 적용합니다.
```js
// 파일의 최상단에 선언
@@ -83,9 +83,9 @@ function Component3() {
지시어는 [`compilationMode`](/reference/react-compiler/compilationMode)에 따라 다르게 동작합니다.
-* **`annotation` 모드**: `"use memo"`가 선언된 함수만 컴파일됩니다
-* **`infer` 모드**: 컴파일러가 컴파일할 대상을 결정하며 지시어는 이 결정을 재정의합니다
-* **`all` 모드**: 모든 것이 컴파일되며 `"use no memo"` 로 특정 함수를 제외할 수 있습니다
+* **`annotation` 모드**: `"use memo"`가 선언된 함수만 컴파일됩니다.
+* **`infer` 모드**: 컴파일러가 컴파일할 대상을 결정하며 지시어는 이 결정을 재정의Override합니다.
+* **`all` 모드**: 모든 것이 컴파일되며 `"use no memo"`로 특정 함수를 제외할 수 있습니다.
---
@@ -93,10 +93,10 @@ function Component3() {
### 지시어는 신중하게 사용하세요 {/*use-sparingly*/}
-이 지시어는 탈출구(escape hatch)입니다. 컴파일러는 프로젝트 수준에서 설정하는 것을 권장합니다.
+지시어는 탈출구Escape Hatch입니다. 컴파일러는 프로젝트 수준에서 설정하는 것을 권장합니다.
```js
-// ✅ good - 프로젝트 전역 설정
+// ✅ Good - 프로젝트 전역 설정
{
plugins: [
['babel-plugin-react-compiler', {
@@ -105,7 +105,7 @@ function Component3() {
]
}
-// ⚠️ 필요할 때마 지시어 사용
+// ⚠️ 필요할 때마다 지시어 사용
function SpecialCase() {
"use no memo"; // 왜 필요한지 문서화하세요
// ...
@@ -117,13 +117,13 @@ function SpecialCase() {
지시어를 사용하는 이유를 항상 명확히 설명하세요.
```js
-// ✅ good - 명확한 설명
+// ✅ Good - 명확한 설명
function DataGrid() {
- "use no memo"; // TODO: 동적 row heiht 이슈 해결 후 제거 (JIRA-123)
+ "use no memo"; // TODO: 동적 row height 이슈 해결 후 제거 (JIRA-123)
// 복잡한 그리드 구현
}
-// ❌ bad - 설명 없음
+// ❌ Bad - 설명 없음
function Mystery() {
"use no memo";
// ...
@@ -132,12 +132,12 @@ function Mystery() {
### 제거 계획을 세우세요 {/*plan-removal*/}
-제외 지시어는 임시로 사용해야 합니다.
+컴파일 제외 지시어는 임시로 사용해야 합니다.
-1. TODO 주석과 함께 지시어를 추가합니다
-2. 추적용 이슈를 생성합니다
-3. 근본적인 문제를 해결합니다
-4. 지시어를 제거합니다
+1. TODO 주석과 함께 지시어를 추가합니다.
+2. 추적용 이슈를 생성합니다.
+3. 근본적인 문제를 해결합니다.
+4. 지시어를 제거합니다.
```js
function TemporaryWorkaround() {
@@ -160,7 +160,7 @@ function TemporaryWorkaround() {
compilationMode: 'annotation'
}
-// 안정적인 컴파일러를 컴파일 대상으로 설정
+// 안정적인 컴포넌트를 컴파일 대상으로 설정
function StableComponent() {
"use memo";
// 충분히 테스트된 컴포넌트
@@ -193,6 +193,6 @@ function ProblematicComponent() {
## 참고 {/*see-also*/}
-* [`compilationMode`](/reference/react-compiler/compilationMode) - 컴파일러가 최적화 대상을 선택하는 방식을 설정합니다
-* [`Configuration`](/reference/react-compiler/configuration) - 전체 컴파일러 설정 옵션
-* [React Compiler documentation](https://react.dev/learn/react-compiler) - 시작 가이드
+* [`compilationMode`](/reference/react-compiler/compilationMode) - 컴파일러가 최적화 대상을 선택하는 방식을 설정합니다.
+* [`Configuration`](/reference/react-compiler/configuration) - 전체 컴파일러 설정 옵션.
+* [React Compiler documentation](/learn/react-compiler) - 시작 가이드.
diff --git a/src/content/reference/react-compiler/directives/use-memo.md b/src/content/reference/react-compiler/directives/use-memo.md
index 8b809a41c..767e7e6b4 100644
--- a/src/content/reference/react-compiler/directives/use-memo.md
+++ b/src/content/reference/react-compiler/directives/use-memo.md
@@ -5,13 +5,13 @@ titleForTitleTag: "'use memo' 지시어"
-`"use memo"`는 React 컴파일러의 최적화 대상으로 함수를 표시합니다.
+`"use memo"`는 특정 함수를 React 컴파일러의 최적화 대상으로 표시합니다.
-대부분의 경우 `"use memo"`는 필요하지 않습니다. 이 지시어는 최적화 대상을 명시적으로 표시해야 하는 `annotation` 모드에서 주로 사용됩니다. `infer` 모드에서는 컴파일러가 이름 규칙(컴포넌트는 PascalCase, Hook은 `use` 접두사)을 기반으로 컴포넌트와 Hook을 자동으로 감지합니다. `infer` 모드에서 컴포넌트나 Hook이 컴파일되지 않는다면, `"use memo"`로 강제로 컴파일하기 보다는 이름 규칙을 올바르게 수정해야 합니다.
+대부분의 경우 `"use memo"`는 필요하지 않습니다. 이 지시어는 최적화 대상을 명시적으로 표시해야 하는 `annotation` 모드에서 주로 사용합니다. `infer` 모드에서는 컴파일러가 이름 규칙(컴포넌트는 PascalCase, Hook은 `use` 접두사)을 기반으로 컴포넌트와 Hook을 자동으로 감지합니다. `infer` 모드에서 컴포넌트나 Hook이 컴파일되지 않는다면, `"use memo"`로 강제로 컴파일하기 보다는 이름 규칙을 올바르게 수정해야 합니다.
@@ -23,9 +23,9 @@ titleForTitleTag: "'use memo' 지시어"
### `"use memo"` {/*use-memo*/}
-함수를 React 컴파일러 최적화 대상으로 표시하려면 함수의 시작 부분에 `"use memo"`를 추가하세요.
+특정 함수를 React 컴파일러 최적화 대상으로 표시하려면 함수의 시작 부분에 `"use memo"`를 추가하세요.
-```js {1}
+```js {2}
function MyComponent() {
"use memo";
// ...
@@ -36,7 +36,7 @@ function MyComponent() {
#### 주의 사항 {/*caveats*/}
-* `"use memo"`는 함수 본문의 최상단에 있어야 하며, import나 다른 코드보다 앞에 있어야 합니다 (주석은 괜찮습니다).
+* `"use memo"`는 함수 본문의 최상단에 있어야 하며, import나 다른 코드보다 앞에 있어야 합니다. (주석은 괜찮습니다.)
* 지시어는 백틱이 아니라 큰따옴표 또는 작은따옴표로 작성해야 합니다.
* 지시어는 `"use memo"`와 정확히 일치해야 합니다.
* 함수의 첫 번째 지시어만 처리되며, 그 이후의 지시어는 무시됩니다.
@@ -118,7 +118,7 @@ function ProductCard({ product }) {
// ...
}
-// ❌ 최적화되지 않음(지시어 없음)
+// ❌ 최적화되지 않음 (지시어 없음)
function ProductList({ products }) {
// ...
}
diff --git a/src/content/reference/react-compiler/directives/use-no-memo.md b/src/content/reference/react-compiler/directives/use-no-memo.md
index 2a854e495..ba9bfb822 100644
--- a/src/content/reference/react-compiler/directives/use-no-memo.md
+++ b/src/content/reference/react-compiler/directives/use-no-memo.md
@@ -5,7 +5,7 @@ titleForTitleTag: "'use no memo' directive"
-`"use no memo"` prevents a function from being optimized by React Compiler.
+`"use no memo"`는 React 컴파일러가 특정 함수를 최적화하지 않도록 합니다.
@@ -13,135 +13,135 @@ titleForTitleTag: "'use no memo' directive"
---
-## Reference {/*reference*/}
+## 레퍼런스 {/*reference*/}
### `"use no memo"` {/*use-no-memo*/}
-Add `"use no memo"` at the beginning of a function to prevent React Compiler optimization.
+React 컴파일러 최적화를 방지하려면 함수의 시작 부분에 `"use no memo"`를 추가하세요.
-```js {1}
+```js {2}
function MyComponent() {
"use no memo";
// ...
}
```
-When a function contains `"use no memo"`, the React Compiler will skip it entirely during optimization. This is useful as a temporary escape hatch when debugging or when dealing with code that doesn't work correctly with the compiler.
+함수에 `"use no memo"`가 포함되어 있으면 React 컴파일러는 최적화 중에 해당 함수를 완전히 건너뜁니다. 이것은 디버깅할 때나, 컴파일러와 제대로 동작하지 않는 코드를 다룰 때 임시 탈출구로 유용합니다.
-#### Caveats {/*caveats*/}
+#### 주의 사항 {/*caveats*/}
-* `"use no memo"` must be at the very beginning of a function body, before any imports or other code (comments are OK).
-* The directive must be written with double or single quotes, not backticks.
-* The directive must exactly match `"use no memo"` or its alias `"use no forget"`.
-* This directive takes precedence over all compilation modes and other directives.
-* It's intended as a temporary debugging tool, not a permanent solution.
+* `"use no memo"`는 import나 다른 코드보다 먼저 함수 본문의 맨 처음에 있어야 합니다. (주석은 괜찮습니다.)
+* 지시어는 백틱이 아닌 큰따옴표나 작은따옴표로 작성해야 합니다.
+* 지시어는 `"use no memo"` 또는 별칭인 `"use no forget"`과 정확히 일치해야 합니다.
+* 이 지시어는 모든 컴파일 모드와 다른 지시어보다 우선합니다.
+* 이것은 영구적인 해결책이 아닌 임시 디버깅 도구로 사용하기 위한 것입니다.
-### How `"use no memo"` opts-out of optimization {/*how-use-no-memo-opts-out*/}
+### `"use no memo"`가 최적화를 제외하는 방법 {/*how-use-no-memo-opts-out*/}
-React Compiler analyzes your code at build time to apply optimizations. `"use no memo"` creates an explicit boundary that tells the compiler to skip a function entirely.
+React 컴파일러는 빌드 시간에 코드를 분석하여 최적화를 적용합니다. `"use no memo"`는 컴파일러에게 함수를 완전히 건너뛰도록 알려주는 명시적인 경계를 만듭니다.
-This directive takes precedence over all other settings:
-* In `all` mode: The function is skipped despite the global setting
-* In `infer` mode: The function is skipped even if heuristics would optimize it
+이 지시어는 다른 모든 설정보다 우선합니다.
+* `all` 모드에서: 전역 설정에도 불구하고 함수를 건너뜁니다.
+* `infer` 모드에서: 휴리스틱이 최적화할 경우에도 함수를 건너뜁니다.
-The compiler treats these functions as if the React Compiler wasn't enabled, leaving them exactly as written.
+컴파일러는 React 컴파일러가 활성화되지 않은 것처럼 이러한 함수를 처리하여 작성된 그대로 유지합니다.
-### When to use `"use no memo"` {/*when-to-use*/}
+### `"use no memo"`를 사용해야 하는 경우 {/*when-to-use*/}
-`"use no memo"` should be used sparingly and temporarily. Common scenarios include:
+`"use no memo"`는 드물게 그리고 임시로 사용해야 합니다. 일반적인 시나리오는 다음과 같습니다.
-#### Debugging compiler issues {/*debugging-compiler*/}
-When you suspect the compiler is causing issues, temporarily disable optimization to isolate the problem:
+#### 컴파일러 문제 디버깅 {/*debugging-compiler*/}
+컴파일러가 문제를 일으키는 것으로 의심되면 문제를 분리하기 위해 일시적으로 최적화를 비활성화하세요.
```js
function ProblematicComponent({ data }) {
- "use no memo"; // TODO: Remove after fixing issue #123
+ "use no memo"; // TODO: 이슈 #123 수정 후 제거
- // Rules of React violations that weren't statically detected
+ // 정적으로 감지되지 않은 React 규칙 위반
// ...
}
```
-#### Third-party library integration {/*third-party*/}
-When integrating with libraries that might not be compatible with the compiler:
+#### 서드 파티 라이브러리 통합 {/*third-party*/}
+컴파일러와 호환되지 않을 수 있는 라이브러리와 통합할 때 사용합니다.
```js
function ThirdPartyWrapper() {
"use no memo";
- useThirdPartyHook(); // Has side effects that compiler might optimize incorrectly
+ useThirdPartyHook(); // 컴파일러가 잘못 최적화할 수 있는 사이드 이펙트가 있음
// ...
}
```
---
-## Usage {/*usage*/}
+## 사용법 {/*usage*/}
-The `"use no memo"` directive is placed at the beginning of a function body to prevent React Compiler from optimizing that function:
+`"use no memo"` 지시어는 React 컴파일러가 해당 함수를 최적화하지 않도록 함수 본문의 시작 부분에 배치합니다.
```js
function MyComponent() {
"use no memo";
- // Function body
+ // 함수 본문
}
```
-The directive can also be placed at the top of a file to affect all functions in that module:
+지시어는 해당 모듈의 모든 함수에 영향을 미치도록 파일 상단에 배치할 수도 있습니다.
```js
"use no memo";
-// All functions in this file will be skipped by the compiler
+// 이 파일의 모든 함수는 컴파일러에 의해 건너뛰어집니다
```
-`"use no memo"` at the function level overrides the module level directive.
+함수 수준의 `"use no memo"`는 모듈 수준의 지시어를 재정의합니다.
---
-## Troubleshooting {/*troubleshooting*/}
+## 문제 해결 {/*troubleshooting*/}
-### Directive not preventing compilation {/*not-preventing*/}
+### 지시어가 컴파일을 방지하지 않는 경우 {/*not-preventing*/}
-If `"use no memo"` isn't working:
+`"use no memo"`가 작동하지 않는 경우입니다.
```js
-// ❌ Wrong - directive after code
+// ❌ 잘못된 예 - 코드 뒤에 지시어
function Component() {
const data = getData();
- "use no memo"; // Too late!
+ "use no memo"; // 너무 늦음!
}
-// ✅ Correct - directive first
+// ✅ 올바른 예 - 지시어가 먼저
function Component() {
"use no memo";
const data = getData();
}
```
-Also check:
-* Spelling - must be exactly `"use no memo"`
-* Quotes - must use single or double quotes, not backticks
+다음도 확인하세요.
+* 철자 - `"use no memo"`와 정확히 일치해야 합니다.
+* 따옴표 - 백틱이 아닌 작은따옴표나 큰따옴표를 사용해야 합니다.
-### Best practices {/*best-practices*/}
+### 모범 사례 {/*best-practices*/}
-**Always document why** you're disabling optimization:
+최적화를 비활성화하는 **이유를 항상 문서화하세요**.
```js
-// ✅ Good - clear explanation and tracking
+// ✅ 좋은 예 - 명확한 설명과 추적
function DataProcessor() {
- "use no memo"; // TODO: Remove after fixing rule of react violation
+ "use no memo"; // TODO: React 규칙 위반 수정 후 제거
// ...
}
-// ❌ Bad - no explanation
+// ❌ 나쁜 예 - 설명 없음
function Mystery() {
"use no memo";
// ...
}
```
-### See also {/*see-also*/}
+### 참고 {/*see-also*/}
-* [`"use memo"`](/reference/react-compiler/directives/use-memo) - Opt into compilation
-* [React Compiler](/learn/react-compiler) - Getting started guide
+* [`"use memo"`](/reference/react-compiler/directives/use-memo) - 컴파일에 포함하기
+* [React 컴파일러](/learn/react-compiler) - 시작 가이드
diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md
index 6e8f881ea..b1d0e86c7 100644
--- a/src/content/reference/react/index.md
+++ b/src/content/reference/react/index.md
@@ -35,7 +35,7 @@ The React Compiler is a build-time optimization tool that automatically memoizes
* [Configuration](/reference/react-compiler/configuration) - Configuration options for React Compiler.
* [Directives](/reference/react-compiler/directives) - Function-level directives to control compilation.
-* [Compiling Libraries](/reference/react-compiler/compiling-libraries) - Guide for shipping pre-compiled library code.
+* [라이브러리 컴파일](/reference/react-compiler/compiling-libraries) - Guide for shipping pre-compiled library code.
## ESLint Plugin React Hooks {/*eslint-plugin-react-hooks*/}
diff --git a/src/sidebarReference.json b/src/sidebarReference.json
index 98b52a38c..1d623df86 100644
--- a/src/sidebarReference.json
+++ b/src/sidebarReference.json
@@ -393,7 +393,7 @@
]
},
{
- "title": "Compiling Libraries",
+ "title": "라이브러리 컴파일",
"path": "/reference/react-compiler/compiling-libraries"
},
{