You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
React Compiler can be adopted incrementally, allowing you to try it on specific parts of your codebase first. This guide shows you how to gradually roll out the compiler in existing projects.
6
+
React 컴파일러는 점진적으로 도입할 수 있어서 코드베이스의 특정 부분에서 먼저 시도해 볼 수 있습니다. 이 가이드에서는 기존 프로젝트에서 컴파일러를 단계적으로 배포하는 방법을 알아봅니다.
7
7
</Intro>
8
8
9
9
<YouWillLearn>
10
10
11
-
*Why incremental adoption is recommended
12
-
*Using Babel overrides for directory-based adoption
13
-
*Using the "use memo" directive for opt-in compilation
14
-
*Using the "use no memo" directive to exclude components
React Compiler is designed to optimize your entire codebase automatically, but you don't have to adopt it all at once. Incremental adoption gives you control over the rollout process, letting you test the compiler on small parts of your app before expanding to the rest.
22
+
React 컴파일러는 전체 코드베이스를 자동으로 최적화하도록 설계되었지만, 한 번에 모두 도입할 필요는 없습니다. 점진적 도입은 배포 과정을 제어할 수 있게 해주어 앱의 작은 부분에서 컴파일러를 테스트한 후 나머지 부분으로 확장할 수 있습니다.
23
23
24
-
Starting small helps you build confidence in the compiler's optimizations. You can verify that your app behaves correctly with compiled code, measure performance improvements, and identify any edge cases specific to your codebase. This approach is especially valuable for production applications where stability is critical.
24
+
작은 부분부터 시작하면 컴파일러의 최적화에 대한 신뢰를 쌓을 수 있습니다. 컴파일된 코드로 앱이 올바르게 동작하는지 확인하고, 성능 개선을 측정하고, 코드베이스에 특정한 엣지 케이스를 식별할 수 있습니다. 이 접근 방식은 안정성이 중요한 프로덕션 애플리케이션에 특히 유용합니다.
25
25
26
-
Incremental adoption also makes it easier to address any Rules of React violations the compiler might find. Instead of fixing violations across your entire codebase at once, you can tackle them systematically as you expand compiler coverage. This keeps the migration manageable and reduces the risk of introducing bugs.
26
+
점진적 도입은 컴파일러가 발견할 수 있는 React 규칙 위반을 해결하기도 더 쉽게 만듭니다. 전체 코드베이스의 위반을 한 번에 수정하는 대신 컴파일러 적용 범위를 확장하면서 체계적으로 해결할 수 있습니다. 이를 통해 마이그레이션을 관리하기 쉽게 유지하고 버그 도입 위험을 줄일 수 있습니다.
27
27
28
-
By controlling which parts of your code get compiled, you can also run A/B tests to measure the real-world impact of the compiler's optimizations. This data helps you make informed decisions about full adoption and demonstrates the value to your team.
28
+
컴파일되는 코드 부분을 제어함으로써 A/B 테스트를 실행하여 컴파일러 최적화의 실제 영향을 측정할 수도 있습니다. 이 데이터는 전체 도입에 대한 정보에 기반한 결정을 내리고 팀에 가치를 보여주는 데 도움이 됩니다.
29
29
30
-
## Approaches to Incremental Adoption {/*approaches-to-incremental-adoption*/}
30
+
## 점진적 도입 방법 {/*approaches-to-incremental-adoption*/}
31
31
32
-
There are three main approaches to adopt React Compiler incrementally:
32
+
React 컴파일러를 점진적으로 도입하는 세 가지 주요 방법이 있습니다.
33
33
34
-
1.**Babel overrides** - Apply the compiler to specific directories
35
-
2.**Opt-in with "use memo"** - Only compile components that explicitly opt in
36
-
3.**Runtime gating** - Control compilation with feature flags
34
+
1.**Babel overrides** - 특정 디렉터리에 컴파일러 적용
35
+
2.**"use memo"로 선택적 적용** - 명시적으로 선택한 컴포넌트만 컴파일
36
+
3.**런타임 게이팅** - 기능 플래그로 컴파일 제어
37
37
38
-
All approaches allow you to test the compiler on specific parts of your application before full rollout.
38
+
모든 방법은 전체 배포 전에 애플리케이션의 특정 부분에서 컴파일러를 테스트할 수 있게 해줍니다.
39
39
40
-
## Directory-Based Adoption with Babel Overrides {/*directory-based-adoption*/}
40
+
## Babel Overrides를 사용한 디렉터리 기반 도입 {/*directory-based-adoption*/}
41
41
42
-
Babel's`overrides`option lets you apply different plugins to different parts of your codebase. This is ideal for gradually adopting React Compiler directory by directory.
42
+
Babel의`overrides`옵션을 사용하면 코드베이스의 여러 부분에 서로 다른 플러그인을 적용할 수 있습니다. 디렉터리별로 React 컴파일러를 점진적으로 도입하는 데 적합합니다.
43
43
44
-
### Basic Configuration {/*basic-configuration*/}
44
+
### 기본 설정 {/*basic-configuration*/}
45
45
46
-
Start by applying the compiler to a specific directory:
46
+
특정 디렉터리에 컴파일러를 적용하는 것부터 시작합니다.
47
47
48
48
```js
49
49
// babel.config.js
50
50
module.exports= {
51
51
plugins: [
52
-
//Global plugins that apply to all files
52
+
//모든 파일에 적용되는 전역 플러그인
53
53
],
54
54
overrides: [
55
55
{
@@ -62,15 +62,15 @@ module.exports = {
62
62
};
63
63
```
64
64
65
-
### Expanding Coverage {/*expanding-coverage*/}
65
+
### 적용 범위 확장 {/*expanding-coverage*/}
66
66
67
-
As you gain confidence, add more directories:
67
+
신뢰가 쌓이면 더 많은 디렉터리를 추가합니다.
68
68
69
69
```js
70
70
// babel.config.js
71
71
module.exports= {
72
72
plugins: [
73
-
//Global plugins
73
+
//전역 플러그인
74
74
],
75
75
overrides: [
76
76
{
@@ -82,16 +82,16 @@ module.exports = {
82
82
{
83
83
test:'./src/legacy/**/*.{js,jsx,ts,tsx}',
84
84
plugins: [
85
-
//Different plugins for legacy code
85
+
//레거시 코드용 다른 플러그인
86
86
]
87
87
}
88
88
]
89
89
};
90
90
```
91
91
92
-
### With Compiler Options {/*with-compiler-options*/}
92
+
### 컴파일러 옵션과 함께 사용 {/*with-compiler-options*/}
93
93
94
-
You can also configure compiler options per override:
94
+
override별로 컴파일러 옵션을 설정할 수도 있습니다.
95
95
96
96
```js
97
97
// babel.config.js
@@ -102,15 +102,15 @@ module.exports = {
102
102
test:'./src/experimental/**/*.{js,jsx,ts,tsx}',
103
103
plugins: [
104
104
['babel-plugin-react-compiler', {
105
-
//options ...
105
+
//옵션 ...
106
106
}]
107
107
]
108
108
},
109
109
{
110
110
test:'./src/production/**/*.{js,jsx,ts,tsx}',
111
111
plugins: [
112
112
['babel-plugin-react-compiler', {
113
-
//options ...
113
+
//옵션 ...
114
114
}]
115
115
]
116
116
}
@@ -119,15 +119,15 @@ module.exports = {
119
119
```
120
120
121
121
122
-
## Opt-in Mode with "use memo" {/*opt-in-mode-with-use-memo*/}
122
+
## "use memo"를 사용한 선택적 모드 {/*opt-in-mode-with-use-memo*/}
123
123
124
-
For maximum control, you can use `compilationMode: 'annotation'` to only compile components and hooks that explicitly opt in with the `"use memo"` directive.
124
+
최대한의 제어를 위해 `compilationMode: 'annotation'`을 사용하여 `"use memo"` 지시어로 명시적으로 선택한 컴포넌트와 Hook만 컴파일할 수 있습니다.
125
125
126
126
<Note>
127
-
This approach gives you fine-grained control over individual components and hooks. It's useful when you want to test the compiler on specific components without affecting entire directories.
127
+
이 방법은 개별 컴포넌트와 Hook에 대한 세밀한 제어를 제공합니다. 전체 디렉터리에 영향을 주지 않고 특정 컴포넌트에서 컴파일러를 테스트하고 싶을 때 유용합니다.
### 어노테이션 모드 설정 {/*annotation-mode-configuration*/}
131
131
132
132
```js
133
133
// babel.config.js
@@ -140,13 +140,13 @@ module.exports = {
140
140
};
141
141
```
142
142
143
-
### Using the Directive {/*using-the-directive*/}
143
+
### 지시어 사용 {/*using-the-directive*/}
144
144
145
-
Add `"use memo"` at the beginning of functions you want to compile:
145
+
컴파일하려는 함수의 시작 부분에 `"use memo"`를 추가합니다.
146
146
147
147
```js
148
148
functionTodoList({ todos }) {
149
-
"use memo"; //Opt this component into compilation
149
+
"use memo"; //이 컴포넌트를 컴파일 대상으로 선택
150
150
151
151
constsortedTodos=todos.slice().sort();
152
152
@@ -160,28 +160,28 @@ function TodoList({ todos }) {
160
160
}
161
161
162
162
functionuseSortedData(data) {
163
-
"use memo"; //Opt this hook into compilation
163
+
"use memo"; //이 Hook을 컴파일 대상으로 선택
164
164
165
165
returndata.slice().sort();
166
166
}
167
167
```
168
168
169
-
With `compilationMode: 'annotation'`, you must:
170
-
-Add `"use memo"`to every component you want optimized
171
-
-Add `"use memo"`to every custom hook
172
-
-Remember to add it to new components
169
+
`compilationMode: 'annotation'`을 사용하면 다음을 해야 합니다.
170
+
-최적화하려는 모든 컴포넌트에 `"use memo"`추가
171
+
-모든 커스텀 Hook에 `"use memo"`추가
172
+
-새 컴포넌트에도 추가하는 것을 기억
173
173
174
-
This gives you precise control over which components are compiled while you evaluate the compiler's impact.
174
+
이를 통해 컴파일러의 영향을 평가하는 동안 어떤 컴포넌트가 컴파일되는지 정밀하게 제어할 수 있습니다.
175
175
176
-
## Runtime Feature Flags with Gating {/*runtime-feature-flags-with-gating*/}
176
+
## 게이팅을 통한 런타임 기능 플래그 {/*runtime-feature-flags-with-gating*/}
177
177
178
-
The `gating`option enables you to control compilation at runtime using feature flags. This is useful for running A/B tests or gradually rolling out the compiler based on user segments.
178
+
`gating`옵션을 사용하면 기능 플래그를 사용하여 런타임에 컴파일을 제어할 수 있습니다. A/B 테스트를 실행하거나 사용자 세그먼트에 따라 컴파일러를 점진적으로 배포하는 데 유용합니다.
179
179
180
-
### How Gating Works {/*how-gating-works*/}
180
+
### 게이팅 작동 방식 {/*how-gating-works*/}
181
181
182
-
The compiler wraps optimized code in a runtime check. If the gate returns `true`, the optimized version runs. Otherwise, the original code runs.
182
+
컴파일러는 최적화된 코드를 런타임 검사로 감쌉니다. 게이트가 `true`를 반환하면 최적화된 버전이 실행됩니다. 그렇지 않으면 원본 코드가 실행됩니다.
0 commit comments