Skip to content

Commit c41f847

Browse files
heeji289hg-pyun
andauthored
docs: translate blog content (React Compiler RC) (#1316)
<!-- PR을 보내주셔서 감사합니다! 여러분과 같은 기여자들이 React를 더욱 멋지게 만듭니다! 기존 이슈와 관련된 PR이라면, 아래에 이슈 번호를 추가해주세요. --> issue: #1285 # Translate blog content (React Compiler RC) <!-- 어떤 종류의 PR인지 상세 내용을 작성해주세요. --> 블로그 컨텐츠 React Compiler RC에 대해 번역을 진행했습니다. <img width="939" height="550" alt="image" src="https://github.com/user-attachments/assets/40ca949f-a6c2-4d02-99f8-3743b918db94" /> ## 필수 확인 사항 - [x] [기여자 행동 강령 규약<sup>Code of Conduct</sup>](https://github.com/reactjs/ko.react.dev/blob/main/CODE_OF_CONDUCT.md) - [x] [기여 가이드라인<sup>Contributing</sup>](https://github.com/reactjs/ko.react.dev/blob/main/CONTRIBUTING.md) - [x] [공통 스타일 가이드<sup>Universal Style Guide</sup>](https://github.com/reactjs/ko.react.dev/blob/main/wiki/universal-style-guide.md) - [x] [번역을 위한 모범 사례<sup>Best Practices for Translation</sup>](https://github.com/reactjs/ko.react.dev/blob/main/wiki/best-practices-for-translation.md) - [x] [번역 용어 정리<sup>Translate Glossary</sup>](https://github.com/reactjs/ko.react.dev/blob/main/wiki/translate-glossary.md) - [x] [`textlint` 가이드<sup>Textlint Guide</sup>](https://github.com/reactjs/ko.react.dev/blob/main/wiki/textlint-guide.md) - [x] [맞춤법 검사<sup>Spelling Check</sup>](https://nara-speller.co.kr/speller/) ## 선택 확인 사항 - [ ] 번역 초안 작성<sup>Draft Translation</sup> - [ ] 리뷰 반영<sup>Resolve Reviews</sup> Co-authored-by: heeji289 <heeji289> Co-authored-by: Haegul Pyun <[email protected]>
1 parent ffbeed9 commit c41f847

File tree

1 file changed

+63
-50
lines changed

1 file changed

+63
-50
lines changed
Lines changed: 63 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,88 @@
11
---
2-
title: "React Compiler RC"
2+
title: 'React Compiler RC'
33
author: Lauren Tan and Mofei Zhang
44
date: 2025/04/21
5-
description: We are releasing the compiler's first Release Candidate (RC) today.
6-
5+
description: 컴파일러의 첫 번째 릴리즈 후보(Release Candidate, RC)를 공개합니다.
76
---
87

9-
April 21, 2025 by [Lauren Tan](https://x.com/potetotes) and [Mofei Zhang](https://x.com/zmofei).
8+
2025년 4월 21일, by [Lauren Tan](https://x.com/potetotes) and [Mofei Zhang](https://x.com/zmofei).
109

1110
---
1211

1312
<Intro>
1413

15-
The React team is excited to share new updates:
14+
React 팀이 새로운 업데이트를 발표합니다.
1615

1716
</Intro>
1817

19-
1. We're publishing React Compiler RC today, in preparation of the compiler's stable release.
20-
2. We're merging `eslint-plugin-react-compiler` into `eslint-plugin-react-hooks`.
21-
3. We've added support for swc and are working with oxc to support Babel-free builds.
18+
1. 오늘 공개된 React 컴파일러 RC는 안정화 출시를 위한 준비 단계입니다.
19+
2. `eslint-plugin-react-compiler``eslint-plugin-react-hooks` 에 통합했습니다.
20+
3. swc 지원을 추가했으며 Babel 없는 빌드를 지원하기 위해 oxc와도 협력 중입니다.
2221

2322
---
2423

25-
[React Compiler](https://react.dev/learn/react-compiler) is a build-time tool that optimizes your React app through automatic memoization. Last year, we published React Compiler’s [first beta](https://react.dev/blog/2024/10/21/react-compiler-beta-release) and received lots of great feedback and contributions. We’re excited about the wins we’ve seen from folks adopting the compiler (see case studies from [Sanity Studio](https://github.com/reactwg/react-compiler/discussions/33) and [Wakelet](https://github.com/reactwg/react-compiler/discussions/52)) and are working towards a stable release.
24+
[React 컴파일러](https://react.dev/learn/react-compiler)는 자동 메모이제이션을 통해 React 앱을 최적화할 수 있도록 도와주는 빌드 툴입니다. 지난해, React Compiler의 [첫 번째 베타](https://react.dev/blog/2024/10/21/react-compiler-beta-release)를 공개했고 많은 피드백과 기여를 받았습니다. 실제로 컴파일러를 도입한 사례들 ([Sanity Studio](https://github.com/reactwg/react-compiler/discussions/33), [Wakelet](https://github.com/reactwg/react-compiler/discussions/52))에서도 성과를 확인했습니다. 그리고 이제 안정화 출시를 향해 나아가고 있습니다.
25+
26+
오늘 컴파일러의 첫 번째 RC (Release Candidate)를 공개합니다. RC는 컴파일러의 안정적이고 최종 버전에 가까운 상태로 프로덕션 환경에서 시도해 볼 수 있습니다.
2627

27-
We are releasing the compiler's first Release Candidate (RC) today. The RC is intended to be a stable and near-final version of the compiler, and safe to try out in production.
28+
## 오늘 바로 React 컴파일러 RC 사용해보기 {/*use-react-compiler-rc-today*/}
2829

29-
## Use React Compiler RC today {/*use-react-compiler-rc-today*/}
30-
To install the RC:
30+
RC 설치 방법은 다음과 같습니다.
3131

3232
npm
33+
3334
<TerminalBlock>
34-
{`npm install --save-dev --save-exact babel-plugin-react-compiler@rc`}
35+
{`npm install --save-dev --save-exact babel-plugin-react-compiler@rc`}
3536
</TerminalBlock>
3637

3738
pnpm
39+
3840
<TerminalBlock>
39-
{`pnpm add --save-dev --save-exact babel-plugin-react-compiler@rc`}
41+
{`pnpm add --save-dev --save-exact babel-plugin-react-compiler@rc`}
4042
</TerminalBlock>
4143

4244
yarn
45+
4346
<TerminalBlock>
44-
{`yarn add --dev --exact babel-plugin-react-compiler@rc`}
47+
{`yarn add --dev --exact babel-plugin-react-compiler@rc`}
4548
</TerminalBlock>
4649

47-
As part of the RC, we've been making React Compiler easier to add to your projects and added optimizations to how the compiler generates memoization. React Complier now supports optional chains and array indices as dependencies. We're exploring how to infer even more dependencies like equality checks and string interpolation. These improvements ultimately result in fewer re-renders and more responsive UIs.
50+
RC에서는 React 컴파일러를 프로젝트에 더 쉽게 추가할 수 있도록 개선했고, 메모이제이션을 생성하는 방식을 최적화했습니다. 이제 옵셔널 체이닝과 배열 인덱스를 의존성으로 지원합니다. 동등성 검사나 문자열 보간 같은 더 다양한 의존성 추론 방법도 연구 중입니다. 이런 개선사항들은 궁극적으로 리렌더링을 줄이고 더 반응성 높은 UI를 만드는 데 기여합니다.
51+
52+
커뮤니티 피드백 중 하나는 ref 검증 (ref-in-render validation)에서 가끔 거짓 양성 (false positive)이 발생한다는 것이었습니다. 우리는 컴파일러의 에러 메시지와 힌트를 전적으로 신뢰할 수 있어야 한다는 철학을 지향하므로 이번 RC에서는 해당 검증을 기본적으로 비활성화했습니다. 이 검증 방식을 개선하기 위해 작업할 것이며 후속 릴리즈에서 다시 활성화할 예정입니다.
53+
54+
자세한 컴파일러 사용법은 [문서](https://react.dev/learn/react-compiler)에서 확인할 수 있습니다.
4855

49-
We have also heard from the community that the ref-in-render validation sometimes has false positives. Since as a general philosophy we want you to be able to fully trust in the compiler's error messages and hints, we are turning it off by default for now. We will keep working to improve this validation, and we will re-enable it in a follow up release.
56+
## 피드백에 관해 {/*feedback*/}
5057

51-
You can find more details on using the Compiler in [our docs](https://react.dev/learn/react-compiler).
58+
RC 기간 동안 React 사용자들이 컴파일러를 사용해보시고 React 레포지토리에 피드백을 제공해 주시길 바랍니다. 버그나 예상치 못한 동작을 발견하면 [이슈](https://github.com/facebook/react/issues)를 등록해 주세요. 일반적인 질문이나 제안이 있다면 [React Compiler Working Group](https://github.com/reactwg/react-compiler/discussions)에 남겨 주시면 됩니다.
5259

53-
## Feedback {/*feedback*/}
54-
During the RC period, we encourage all React users to try the compiler and provide feedback in the React repo. Please [open an issue](https://github.com/facebook/react/issues) if you encounter any bugs or unexpected behavior. If you have a general question or suggestion, please post them in the [React Compiler Working Group](https://github.com/reactwg/react-compiler/discussions).
60+
## 하위 호환성 {/*backwards-compatibility*/}
5561

56-
## Backwards Compatibility {/*backwards-compatibility*/}
57-
As noted in the Beta announcement, React Compiler is compatible with React 17 and up. If you are not yet on React 19, you can use React Compiler by specifying a minimum target in your compiler config, and adding `react-compiler-runtime` as a dependency. You can find docs on this [here](https://react.dev/learn/react-compiler#using-react-compiler-with-react-17-or-18).
62+
베타 발표 때 언급했듯이 React 컴파일러는 React 17 이상에서 호환됩니다. 아직 React 19로 업데이트하지 않았다면 컴파일러 설정에서 최소 타겟을 지정하고 `react-compiler-runtime`을 의존성에 추가하면 React 컴파일러를 사용할 수 있습니다. 자세한 방법은 [문서](https://react.dev/learn/react-compiler#using-react-compiler-with-react-17-or-18)에서 확인할 수 있습니다.
5863

59-
## Migrating from eslint-plugin-react-compiler to eslint-plugin-react-hooks {/*migrating-from-eslint-plugin-react-compiler-to-eslint-plugin-react-hooks*/}
60-
If you have already installed eslint-plugin-react-compiler, you can now remove it and use `[email protected]`. Many thanks to [@michaelfaith](https://bsky.app/profile/michael.faith) for contributing to this improvement!
64+
## `eslint-plugin-react-compiler`에서 `eslint-plugin-react-hooks`로 마이그레이션 {/*migrating-from-eslint-plugin-react-compiler-to-eslint-plugin-react-hooks*/}
6165

62-
To install:
66+
이미 `eslint-plugin-react-compiler`를 설치했다면 제거하고 `[email protected]`를 사용해주세요. 이 개선에 기여한 [@michaelfaith](https://bsky.app/profile/michael.faith)에게 감사드립니다!
67+
68+
설치 방법은 다음과 같습니다.
6369

6470
npm
71+
6572
<TerminalBlock>
66-
{`npm install --save-dev [email protected]`}
73+
{`npm install --save-dev [email protected]`}
6774
</TerminalBlock>
6875

6976
pnpm
77+
7078
<TerminalBlock>
71-
{`pnpm add --save-dev [email protected]`}
79+
{`pnpm add --save-dev [email protected]`}
7280
</TerminalBlock>
7381

7482
yarn
83+
7584
<TerminalBlock>
76-
{`yarn add --dev [email protected]`}
85+
{`yarn add --dev [email protected]`}
7786
</TerminalBlock>
7887

7988
```js
@@ -85,44 +94,48 @@ export default [
8594
reactHooks.configs.recommended,
8695

8796
// Legacy Config
88-
reactHooks.configs['recommended-latest']
97+
reactHooks.configs['recommended-latest'],
8998
];
9099
```
91100

92-
To enable the React Compiler rule, add `'react-hooks/react-compiler': 'error'` to your ESLint configuration.
101+
React 컴파일러 규칙을 활성화하려면 ESLint 설정에 `'react-hooks/react-compiler': 'error'`를 추가해주세요.
102+
103+
린터는 컴파일러 설치 여부와 관계 없으므로 `eslint-plugin-react-hooks`를 업그레이드하는 것은 리스크가 없습니다. 바로 업그레이드하는 것을 권장합니다.
104+
105+
## swc 지원 (실험적 기능) {/*swc-support-experimental*/}
93106

94-
The linter does not require the compiler to be installed, so there's no risk in upgrading eslint-plugin-react-hooks. We recommend everyone upgrade today.
107+
React 컴파일러는 Babel, Vite, Rsbuild 등 [여러 빌드 도구](/learn/react-compiler#installation)에서 사용할 수 있습니다.
95108

96-
## swc support (experimental) {/*swc-support-experimental*/}
97-
React Compiler can be installed across [several build tools](/learn/react-compiler#installation) such as Babel, Vite, and Rsbuild.
109+
추가로 [swc](https://swc.rs/) 팀의 강동윤([@kdy1dev](https://x.com/kdy1dev))님과 협력하여 swc 플러그인 지원을 추가 중입니다. 아직 완성되진 않았지만 [Next.js 앱에서 React 컴파일러를 활성화](https://nextjs.org/docs/app/api-reference/config/next-config-js/reactCompiler)하면 눈에 띄게 빌드 성능이 개선됩니다.
98110

99-
In addition to those tools, we have been collaborating with Kang Dongyoon ([@kdy1dev](https://x.com/kdy1dev)) from the [swc](https://swc.rs/) team on adding additional support for React Compiler as an swc plugin. While this work isn't done, Next.js build performance should now be considerably faster when the [React Compiler is enabled in your Next.js app](https://nextjs.org/docs/app/api-reference/config/next-config-js/reactCompiler).
111+
최고의 빌드 성능을 위해 Next.js [15.3.1](https://github.com/vercel/next.js/releases/tag/v15.3.1) 이상 버전 사용을 권장합니다.
100112

101-
We recommend using Next.js [15.3.1](https://github.com/vercel/next.js/releases/tag/v15.3.1) or greater to get the best build performance.
113+
Vite 사용자는 여전히 [vite-plugin-react](https://github.com/vitejs/vite-plugin-react)[Babel 플러그인](https://react.dev/learn/react-compiler#usage-with-vite)에 적용해 컴파일러를 활성화할 수 있습니다. 또한, [oxc](https://oxc.rs/) 팀과도 협력해 [컴파일러 추가 지원](https://github.com/oxc-project/oxc/issues/10048) 예정입니다. [rolldown](https://github.com/rolldown/rolldown)이 공식 릴리즈되고 Vite와 oxc 지원이 완료되면 마이그레이션 방법을 문서에 추가할 계획입니다.
102114

103-
Vite users can continue to use [vite-plugin-react](https://github.com/vitejs/vite-plugin-react) to enable the compiler, by adding it as a [Babel plugin](https://react.dev/learn/react-compiler#usage-with-vite). We are also working with the [oxc](https://oxc.rs/) team to [add support for the compiler](https://github.com/oxc-project/oxc/issues/10048). Once [rolldown](https://github.com/rolldown/rolldown) is officially released and supported in Vite and oxc support is added for React Compiler, we'll update the docs with information on how to migrate.
115+
## React 컴파일러 업그레이드 방법 {/*upgrading-react-compiler*/}
104116

105-
## Upgrading React Compiler {/*upgrading-react-compiler*/}
106-
React Compiler works best when the auto-memoization applied is strictly for performance. Future versions of the compiler may change how memoization is applied, for example it could become more granular and precise.
117+
React 컴파일러는 자동 메모이제이션 기능이 성능 최적화에 집중될 때 가장 효과적입니다. 향후 버전에서는 메모이제이션 방식이 변경될 수 있습니다, 예를 들어 더 정교하고 세밀하게 말이죠.
107118

108-
However, because product code may sometimes break the [rules of React](https://react.dev/reference/rules) in ways that aren't always statically detectable in JavaScript, changing memoization can occasionally have unexpected results. For example, a previously memoized value might be used as a dependency for a useEffect somewhere in the component tree. Changing how or whether this value is memoized can cause over or under-firing of that useEffect. While we encourage [useEffect only for synchronization](https://react.dev/learn/synchronizing-with-effects), your codebase may have useEffects that cover other use-cases such as effects that needs to only run in response to specific values changing.
119+
하지만 실제 제품 코드가 항상 정적으로 탐지 가능한 방식으로 작성되지 않습니다. JavaScript 특성상 코드가 [React의 규칙](https://react.dev/reference/rules)을 위반하는 경우도 있고 이가 빌드 시점에 드러나지 않을 수도 있습니다. 이런 이유로 메모이제이션 방식이 바뀌면 의도치 않은 결과가 발생할 수 있습니다.
120+
예를 들어 어떤 값이 컴파일러에 의해 메모이제이션된 상태로 사용되고 있었는데 해당 값이 컴포넌트 트리 어딘가에서 `useEffect` 의존성으로도 쓰이고 있다고 가정해봅시다. 이 때 그 값의 메모이제이션 방식이 달라지거나 더 이상 메모이제이션되지 않게 되면, `useEffect`가 과도하게 실행되거나 (over-fire) 혹은 필요한 상황에서 실행되지 않는 (under-fire) 문제가 생길 수 있습니다.
121+
기본적으로 [useEffect를 동기화 목적](https://react.dev/learn/synchronizing-with-effects)으로만 쓰길 권장하지만 실제 코드베이스에서는 특정 값이 변할 때만 실행되어야 하는 효과처럼 다른 용도로 `useEffect`가 사용되기도 합니다. 따라서 메모이제이션 변경이 이런 코드들에 영향을 줄 수 있습니다.
109122

110-
In other words, changing memoization may under rare circumstances cause unexpected behavior. For this reason, we recommend following the Rules of React and employing continuous end-to-end testing of your app so you can upgrade the compiler with confidence and identify any rules of React violations that might cause issues.
123+
메모이제이션 방식 변경은 드물지만 예기치 못한 동작을 유발할 수 있습니다. 따라서 React의 규칙을 지키고 지속적인 E2E 테스트를 수행하는 것이 중요합니다. 그래야 컴파일러를 안심하고 업그레이드할 수 있고 React 규칙 위반 문제를 발견할 수 있습니다.
111124

112-
If you don't have good test coverage, we recommend pinning the compiler to an exact version (eg `19.1.0`) rather than a SemVer range (eg `^19.1.0`). You can do this by passing the `--save-exact` (npm/pnpm) or `--exact` flags (yarn) when upgrading the compiler. You should then do any upgrades of the compiler manually, taking care to check that your app still works as expected.
125+
만약 충분한 테스트 커버리지가 없다면 컴파일러를 SemVer 범위(예: `^19.1.0`)로 지정하기보다 특정 버전(예: `19.1.0`)으로 고정하는 것을 권장합니다. npm이나 pnpm을 쓸 경우 `--save-exact`, yarn을 쓸 경우 `--exact` 플래그를 사용하면 됩니다. 이후 컴파일러 업그레이드를 수동으로 진행하면서 앱이 예상하는대로 동작하는지 반드시 확인하는 것이 좋습니다.
113126

114-
## Roadmap to Stable {/*roadmap-to-stable*/}
115-
*This is not a final roadmap, and is subject to change.*
127+
## 안정화까지의 로드맵 {/*roadmap-to-stable*/}
128+
*이 로드맵은 최종 확정된 것이 아니며 변경될 수 있습니다.*
116129

117-
After a period of final feedback from the community on the RC, we plan on a Stable Release for the compiler.
130+
RC에 대해 커뮤니티의 최종 피드백을 받은 뒤 컴파일러의 안정화 (Stable) 버전을 공개할 계획입니다.
118131

119-
* ✅ Experimental: Released at React Conf 2024, primarily for feedback from application developers.
120-
* ✅ Public Beta: Available today, for feedback from library authors.
121-
*Release Candidate (RC): React Compiler works for the majority of rule-following apps and libraries without issue.
122-
* General Availability: After final feedback period from the community.
132+
-실험 단계 (Experimental): React Conf 2024에서 공개. 애플리케이션 개발자들의 피드백을 받기 위함.
133+
-공개 베타 (Public Beta): 오늘부터 사용 가능. 주로 라이브러리 제작자들의 피드백을 받기 위함.
134+
-릴리즈 후보 (RC): React 규칙을 따르는 대부분의 앱과 라이브러리에서 문제없이 동작.
135+
- 안정화 (General Availability): 커뮤니티의 최종 피드백 수집 후 공개 예정.
123136

124-
Post-Stable, we plan to add more compiler optimizations and improvements. This includes both continual improvements to automatic memoization, and new optimizations altogether, with minimal to no change of product code. Each upgrade will continue to improve performance and add better handling of diverse JavaScript and React patterns.
137+
안정화 이후에는 컴파일러 최적화와 개선을 이어갈 계획입니다. 여기에는 자동 메모이제이션의 점진적 개선 뿐만 아니라 제품 코드를 거의 수정하지 않고도 성능을 향상시킬 수 있는 새로운 최적화 기법들이 추가될 예정입니다. 각 업그레이드는 앱 성능을 꾸준히 개선하고, 더 다양한 JavaScript와 React 패턴을 다룰 수 있게 될 것입니다.
125138

126139
---
127140

128-
Thanks to [Joe Savona](https://x.com/en_JS), [Jason Bonta](https://x.com/someextent), [Jimmy Lai](https://x.com/feedthejim), and [Kang Dongyoon](https://x.com/kdy1dev) (@kdy1dev) for reviewing and editing this post.
141+
이 글을 검토하고 다듬어주신 [Joe Savona](https://x.com/en_JS), [Jason Bonta](https://x.com/someextent), [Jimmy Lai](https://x.com/feedthejim), and [강동윤](https://x.com/kdy1dev) (@kdy1dev)께 감사드립니다.

0 commit comments

Comments
 (0)