@@ -18,7 +18,7 @@ title: React ์ปดํ์ผ๋ฌ
1818
1919React ์ปดํ์ผ๋ฌ๋ ์ปค๋ฎค๋ํฐ๋ก๋ถํฐ ์ด๊ธฐ ํผ๋๋ฐฑ์ ๋ฐ๊ธฐ ์ํด RC<sup >Release Candidate</sup > ๋ฒ์ ์ผ๋ก ์คํ์์คํํ ์๋ก์ด ์ปดํ์ผ๋ฌ์
๋๋ค. ์ด์ ๋ชจ๋ ๋ถ๊ป ์ด ์ปดํ์ผ๋ฌ๋ฅผ ์ฌ์ฉํด ๋ณด๊ณ ํผ๋๋ฐฑ์ ์ ๊ณตํ ๊ฒ์ ๊ถ์ฅํฉ๋๋ค.
2020
21- The latest RC release can be found with the ` @rc ` tag, and daily experimental releases with ` @experimental ` .
21+ ์ต์ RC ๋ฆด๋ฆฌ์ค๋ ` @rc ` ํ๊ทธ๋ก ์ฐพ์ ์ ์๊ณ , ์ผ์ผ ์คํ์ ๋ฆด๋ฆฌ์ค๋ ` @experimental ` ๋ก ์ฐพ์ ์ ์์ต๋๋ค .
2222</Note >
2323
2424React ์ปดํ์ผ๋ฌ๋ ์ปค๋ฎค๋ํฐ๋ก๋ถํฐ ์ด๊ธฐ ํผ๋๋ฐฑ์ ๋ฐ๊ธฐ ์ํด ์คํ์์คํํ ์๋ก์ด ์ปดํ์ผ๋ฌ์
๋๋ค. React ์ปดํ์ผ๋ฌ๋ ๋น๋ ํ์ ์ ์ฉ ๋๊ตฌ๋ก React ์ฑ์ ์๋์ผ๋ก ์ต์ ํํฉ๋๋ค. ์์ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๋์ํ๋ฉฐ, [ React์ ๊ท์น] ( /reference/rules ) ์ ์ดํดํ๋ฏ๋ก ์ฝ๋๋ฅผ ๋ค์ ์์ฑํ ํ์๊ฐ ์์ต๋๋ค.
@@ -31,13 +31,13 @@ React ์ปดํ์ผ๋ฌ๋ ์ปค๋ฎค๋ํฐ๋ก๋ถํฐ ์ด๊ธฐ ํผ๋๋ฐฑ์ ๋ฐ๊ธฐ ์ํด
3131{` npm install -D babel-plugin-react-compiler@rc eslint-plugin-react-hooks@^6.0.0-rc.1 ` }
3232</TerminalBlock >
3333
34- Or, if you're using Yarn :
34+ ๋๋, Yarn์ ์ฌ์ฉํ๋ค๋ฉด :
3535
3636<TerminalBlock >
3737{` yarn add -D babel-plugin-react-compiler@rc eslint-plugin-react-hooks@^6.0.0-rc.1 ` }
3838</TerminalBlock >
3939
40- If you are not using React 19 yet, please see [ the section below ] ( #using-react-compiler-with-react-17-or-18 ) for further instructions .
40+ React 19๋ฅผ ์์ง ์ฌ์ฉํ์ง ์๋๋ค๋ฉด, ์ถ๊ฐ ์ง์นจ์ ์ํด [ ์๋ ์น์
] ( #using-react-compiler-with-react-17-or-18 ) ์ ํ์ธํ์ธ์ .
4141
4242### ์ปดํ์ผ๋ฌ๋ ๋ฌด์์ ํ๋์? {/* what-does-the-compiler-do* /}
4343
@@ -46,7 +46,7 @@ React ์ปดํ์ผ๋ฌ๋ ์ ํ๋ฆฌ์ผ์ด์
์ ์ต์ ํํ๊ธฐ ์ํด ์ฝ๋๋ฅผ ์
4646์ปดํ์ผ๋ฌ๋ ์๋ฐ์คํฌ๋ฆฝํธ์ React์ ๊ท์น์ ๋ํ ์ง์์ ํ์ฉํ์ฌ ์๋์ผ๋ก ์ปดํฌ๋ํธ์ Hook ๋ด๋ถ์ ๊ฐ ๋๋ ๊ฐ ๊ทธ๋ฃน์ ๋ฉ๋ชจ์ด์ ์ด์
ํฉ๋๋ค. ๊ท์น ์๋ฐ์ ๊ฐ์งํ ๊ฒฝ์ฐ ํด๋น ์ปดํฌ๋ํธ ๋๋ Hook์ ๊ฑด๋๋ฐ๊ณ ๋ค๋ฅธ ์ฝ๋๋ฅผ ์์ ํ๊ฒ ์ปดํ์ผํฉ๋๋ค.
4747
4848<Note >
49- React Compiler can statically detect when Rules of React are broken, and safely opt-out of optimizing just the affected components or hooks. It is not necessary for the compiler to optimize 100% of your codebase .
49+ React ์ปดํ์ผ๋ฌ๋ React์ ๊ท์น์ด ์๋ฐ๋์ ๋๋ฅผ ์ ์ ์ผ๋ก ๊ฐ์งํ ์ ์์ผ๋ฉฐ, ์ํฅ์ ๋ฐ๋ ์ปดํฌ๋ํธ๋ ํ
๋ง ์์ ํ๊ฒ ์ต์ ํ์์ ์ ์ธํ ์ ์์ต๋๋ค. ์ปดํ์ผ๋ฌ๊ฐ ์ฝ๋๋ฒ ์ด์ค์ 100%๋ฅผ ์ต์ ํํ ํ์๋ ์์ต๋๋ค .
5050</Note >
5151
5252์ด๋ฏธ ์ฝ๋๋ฒ ์ด์ค์ ๋ฉ๋ชจ์ด์ ์ด์
์ด ์ ๋์ด ์๋ค๋ฉด, ์ปดํ์ผ๋ฌ๋ฅผ ํตํด ์ฃผ์ ์ฑ๋ฅ ํฅ์์ ๊ธฐ๋ํ๊ธฐ ์ด๋ ค์ธ ์ ์์ต๋๋ค. ๊ทธ๋ฌ๋ ์ค์ ๋ก ์ฑ๋ฅ ๋ฌธ์ ๋ฅผ ์ผ์ผํค๋ ์ฌ๋ฐ๋ฅธ ์์กด์ฑ<sup >dependencies</sup >์ ๋ฉ๋ชจ์ด์ ์ด์
ํ๋ ๊ฒ์ ์ง์ ์ฒ๋ฆฌํ๊ธฐ ๊น๋ค๋ก์ธ ์ ์์ต๋๋ค.
@@ -123,13 +123,13 @@ function TableContainer({ items }) {
123123
124124### ` eslint-plugin-react-hooks ` ์ค์น {/* installing-eslint-plugin-react-compiler* /}
125125
126- React Compiler also powers an ESLint plugin. You can try it out by installing ` eslint-plugin-react-hooks@^6.0.0-rc.1 ` .
126+ React ์ปดํ์ผ๋ฌ๋ ESLint ํ๋ฌ๊ทธ์ธ๋ ์ ๊ณตํฉ๋๋ค. ` eslint-plugin-react-hooks@^6.0.0-rc.1 ` ์ ์ค์นํด์ ์๋ํด๋ณด์ธ์ .
127127
128128<TerminalBlock >
129129{` npm install -D eslint-plugin-react-hooks@^6.0.0-rc.1 ` }
130130</TerminalBlock >
131131
132- See our [ editor setup ] ( /learn/editor-setup#linting ) guide for more details .
132+ ์์ธํ ์ ๋ณด๋ฅผ ์ํด ์ฐ๋ฆฌ์ [ ์๋ํฐ ์ค์ ํ๊ธฐ ] ( /learn/editor-setup#linting ) ๊ฐ์ด๋๋ฅผ ํ์ธํ์ธ์ .
133133
134134ESLint ํ๋ฌ๊ทธ์ธ์ ์๋ํฐ์์ React์ ๊ท์น ์๋ฐ ์ฌํญ์ ํ์ํฉ๋๋ค. ์ด ๊ฒฝ์ฐ ์ปดํ์ผ๋ฌ๊ฐ ํด๋น ์ปดํฌ๋ํธ๋ Hook์ ์ต์ ํ๋ฅผ ๊ฑด๋๋ฐ์์์ ์๋ฏธํฉ๋๋ค. ์ด๊ฒ์ ์์ ํ ์ ์์ ์ธ ๋์์ด๋ฉฐ, ์ปดํ์ผ๋ฌ๋ ์ด๋ฅผ ๋ณต๊ตฌํ๊ณ ์ฝ๋๋ฒ ์ด์ค์ ๋ค๋ฅธ ์ปดํฌ๋ํธ๋ฅผ ๊ณ์ํด์ ์ต์ ํํ ์ ์์ต๋๋ค.
135135
@@ -159,15 +159,15 @@ const ReactCompilerConfig = {
159159
160160์ ํ๋ก์ ํธ๋ฅผ ์์ํ ๊ฒฝ์ฐ, ๊ธฐ๋ณธ ๋์์ผ๋ก ์ ์ฒด ์ฝ๋๋ฒ ์ด์ค์์ ์ปดํ์ผ๋ฌ๋ฅผ ํ์ฑํํ ์ ์์ต๋๋ค.
161161
162- ### Using React Compiler with React 17 or 18 {/* using-react-compiler-with-react-17-or-18* /}
162+ ### React 17 ๋๋ 18์์ ์ปดํ์ผ๋ฌ ์ฌ์ฉ {/* using-react-compiler-with-react-17-or-18* /}
163163
164- 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 .
164+ React ์ปดํ์ผ๋ฌ๋ React 19 RC์์ ์ต์ ์ ์ฑ๋ฅ์ ๋ฐํํฉ๋๋ค. ์
๊ทธ๋ ์ด๋๊ฐ ๋ถ๊ฐ๋ฅํ๋ค๋ฉด ` react-compiler-runtime ` ํจํค์ง๋ฅผ ์ถ๊ฐ ์ค์นํด ์ปดํ์ผ๋ ์ฝ๋๋ฅผ 19 ์ด์ ๋ฒ์ ์์๋ ์คํํ ์ ์์ต๋๋ค. ๋จ, ์ต์ ์ง์ ๋ฒ์ ์ 17์
๋๋ค .
165165
166166<TerminalBlock >
167167{` npm install react-compiler-runtime@rc ` }
168168</TerminalBlock >
169169
170- You should also add the correct ` target ` to your compiler config, where ` target ` is the major version of React you are targeting :
170+ ์ปดํ์ผ๋ฌ ์ค์ ์ ์ฌ๋ฐ๋ฅธ ` target ` ์ ์ถ๊ฐํด์ผ ํ๋ฉฐ, ` target ` ์ ๋์์ผ๋ก ํ๋ React์ ๋ฉ์ด์ ๋ฒ์ ์
๋๋ค :
171171
172172``` js {3}
173173// babel.config.js
@@ -184,17 +184,17 @@ module.exports = function () {
184184};
185185```
186186
187- ### Using the compiler on libraries {/* using-the-compiler-on-libraries* /}
187+ ### ๋ผ์ด๋ธ๋ฌ๋ฆฌ์์ ์ปดํ์ผ๋ฌ ์ฌ์ฉ {/* using-the-compiler-on-libraries* /}
188188
189- 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 .
189+ React ์ปดํ์ผ๋ฌ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ปดํ์ผ์๋ ์ฌ์ฉํ ์ ์์ต๋๋ค. React ์ปดํ์ผ๋ฌ๋ ์ฝ๋ ๋ณํ ์ด์ ์ ์๋ณธ ์์ค ์ฝ๋์์ ์คํ๋์ด์ผ ํ๊ธฐ ๋๋ฌธ์, ์ ํ๋ฆฌ์ผ์ด์
์ ๋น๋ ํ์ดํ๋ผ์ธ์ผ๋ก๋ ์ฌ์ฉํ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ปดํ์ผํ ์ ์์ต๋๋ค. ๋ฐ๋ผ์, ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ ์ง๋ณด์์๊ฐ ์ปดํ์ผ๋ฌ๋ก ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๋
๋ฆฝ์ ์ผ๋ก ์ปดํ์ผํ๊ณ ํ
์คํธํ ํ, ์ปดํ์ผ๋ ์ฝ๋๋ฅผ npm์ ๋ฐฐํฌํ๋ ๊ฒ์ ๊ถ์ฅํฉ๋๋ค .
190190
191- 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 .
191+ ์ฝ๋๊ฐ ์ฌ์ ์ปดํ์ผ๋๊ธฐ ๋๋ฌธ์, ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ฌ์ฉ์๋ค์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ์ ์ฉ๋ ์๋ ๋ฉ๋ชจ์ด์ ์ด์
์ ์ด์ ์ ์ป๊ธฐ ์ํด ์ปดํ์ผ๋ฌ๋ฅผ ํ์ฑํํ ํ์๊ฐ ์์ต๋๋ค. ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ์์ง React 19 ๋ฒ์ ์ด ์๋ ์ฑ์ ๋์์ผ๋ก ํ๋ค๋ฉด, ์ต์ [ ` target ` ์ ์ค์ ํ๊ณ ` react-compiler-runtime ` ์ ์ง์ ์์กด์ฑ์ผ๋ก ์ถ๊ฐํ์ธ์. ] ( #using-react-compiler-with-react-17-or-18 ) . ๋ฐํ์ ํจํค์ง๋ ์ ํ๋ฆฌ์ผ์ด์
๋ฒ์ ์ ๋ฐ๋ผ ์ฌ๋ฐ๋ฅธ API ๊ตฌํ์ ์ฌ์ฉํ๋ฉฐ, ํ์ํ ๊ฒฝ์ฐ ๋๋ฝ๋ API๋ฅผ ํด๋ฆฌํํฉ๋๋ค .
192192
193- 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 ) .
193+ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ฝ๋๋ ์ข
์ข
๋ ๋ณต์กํ ํจํด๊ณผ ํ์ถ๊ตฌ ์ฌ์ฉ์ด ํ์ํ ์ ์์ต๋๋ค. ์ด๋ฐ ์ด์ ๋ก, ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ์ปดํ์ผ๋ฌ๋ฅผ ์ ์ฉํ ๋ ๋ฐ์ํ ์ ์๋ ๋ฌธ์ ๋ฅผ ๋ฐ๊ฒฌํ๊ธฐ ์ํด ์ถฉ๋ถํ ํ
์คํธ๋ฅผ ๊ฐ์ถ๋ ๊ฒ์ ๊ถ์ฅํฉ๋๋ค. ๋ฌธ์ ๋ฅผ ๋ฐ๊ฒฌํ๋ฉด, ํด๋น ์ปดํฌ๋ํธ๋ ํ
์ [ ` 'use no memo' ` ์ง์์ด ] ( #something-is-not-working-after-compilation ) ๋ฅผ ํตํด ์ธ์ ๋ ์ ์ธํ ์ ์์ต๋๋ค .
194194
195- 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 .
195+ ์ฑ๊ณผ ๋น์ทํ๊ฒ, ๋ผ์ด๋ธ๋ฌ๋ฆฌ์์ ์ด์ ์ ๋ณด๊ธฐ ์ํด ๋ชจ๋ ์ปดํฌ๋ํธ๋ ํ
์ 100% ์ปดํ์ผํ ํ์๋ ์์ต๋๋ค. ์ข์ ์์์ ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์์ ์ฑ๋ฅ์ ๋ฏผ๊ฐํ ๋ถ๋ถ์ ํ์
ํ๊ณ ํด๋น ๋ถ๋ถ์ด [ React์ ๊ท์น ] ( /reference/rules ) ์ ์๋ฐํ์ง ์๋์ง ํ์ธํ๋ ๊ฒ์
๋๋ค. ` eslint-plugin-react-compiler ` ๋ฅผ ํตํด ํ์
ํ ์ ์์ต๋๋ค .
196196
197- ## Usage {/* installation* /}
197+ ## ์ฌ์ฉ๋ฒ {/* installation* /}
198198
199199### Babel {/* usage-with-babel* /}
200200
@@ -248,7 +248,7 @@ export default defineConfig(() => {
248248
249249### Next.js {/* usage-with-nextjs* /}
250250
251- Please refer to the [ Next.js docs ] ( https://nextjs.org/docs/app/api-reference/next-config-js/reactCompiler ) for more information .
251+ ์์ธํ ์ ๋ณด๋ฅผ ์ํด [ Next.js ๋ฌธ์ ] ( https://nextjs.org/docs/app/api-reference/next-config-js/reactCompiler ) ๋ฅผ ํ์ธํ์ธ์ .
252252
253253### Remix {/* usage-with-remix* /}
254254` vite-plugin-babel ` ์ ์ค์นํ๊ณ ์ปดํ์ผ๋ฌ์ Babel ํ๋ฌ๊ทธ์ธ์ ์ถ๊ฐํ์ธ์.
@@ -281,11 +281,11 @@ export default defineConfig({
281281
282282### Webpack {/* usage-with-webpack* /}
283283
284- A community webpack loader is [ now available here ] ( https://github.com/SukkaW/react-compiler-webpack ) .
284+ ์ปค๋ฎค๋ํฐ webpack ๋ก๋๊ฐ [ ์ด์ ์ฌ๊ธฐ์์ ์ฌ์ฉ ๊ฐ๋ฅํฉ๋๋ค ] ( https://github.com/SukkaW/react-compiler-webpack ) .
285285
286286### Expo {/* usage-with-expo* /}
287287
288- Please refer to [ Expo's docs ] ( https://docs.expo.dev/guides/react-compiler/ ) to enable and use the React Compiler in Expo apps .
288+ Expo ์ฑ์์ React ์ปดํ์ผ๋ฌ๋ฅผ ํ์ฑํํ๊ณ ์ฌ์ฉํ๋ ค๋ฉด [ Expo์ ๋ฌธ์ ] ( https://docs.expo.dev/guides/react-compiler/ ) ๋ฅผ ํ์ธํ์ธ์ .
289289
290290### Metro (React Native) {/* usage-with-react-native-metro* /}
291291
0 commit comments