@@ -132,31 +132,31 @@ export default defineConfig([
}
```
-To enable React Compiler rules, we recommend using the `recommended` preset. You can also check out the [README](https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/README.md) for more instructions. Here are a few examples we featured at React Conf:
+React 컴파일러 규칙을 활성화하려면 `recommended` 프리셋을 사용하는 것을 권장합니다. 더 많은 지침은 [README](https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/README.md)를 참조할 수 있습니다. 다음은 React Conf에서 소개된 몇 가지 예시입니다.
-- Catching `setState` patterns that cause render loops with [`set-state-in-render`](/reference/eslint-plugin-react-hooks/lints/set-state-in-render).
-- Flagging expensive work inside effects via [`set-state-in-effect`](/reference/eslint-plugin-react-hooks/lints/set-state-in-effect).
-- Preventing unsafe ref access during render with [`refs`](/reference/eslint-plugin-react-hooks/lints/refs).
+- [`set-state-in-render`](/reference/eslint-plugin-react-hooks/lints/set-state-in-render)로 렌더링 루프를 유발하는 `setState` 패턴 포착.
+- [`set-state-in-effect`](/reference/eslint-plugin-react-hooks/lints/set-state-in-effect)를 통해 이펙트 내의 비용이 많이 드는 작업 플래그 지정.
+- [`refs`](/reference/eslint-plugin-react-hooks/lints/refs)로 렌더링 중 안전하지 않은 ref 접근 방지.
-## What should I do about useMemo, useCallback, and React.memo? {/*what-should-i-do-about-usememo-usecallback-and-reactmemo*/}
-By default, React Compiler will memoize your code based on its analysis and heuristics. In most cases, this memoization will be as precise, or moreso, than what you may have written — and as noted above, the compiler can memoize even in cases where `useMemo`/`useCallback` cannot be used, such as after an early return.
+## useMemo, useCallback, React.memo는 어떻게 해야 하나요? {/*what-should-i-do-about-usememo-usecallback-and-reactmemo*/}
+기본적으로 React 컴파일러는 분석과 휴리스틱을 기반으로 코드를 메모이제이션합니다. 대부분의 경우, 이 메모이제이션은 직접 작성한 것만큼 또는 그 이상으로 정밀할 것입니다. 그리고 위에서 언급했듯이, 컴파일러는 조기 반환 후와 같이 `useMemo`/`useCallback`을 사용할 수 없는 경우에도 메모이제이션할 수 있습니다.
-However, in some cases developers may need more control over memoization. The `useMemo` and `useCallback` hooks can continue to be used with React Compiler as an escape hatch to provide control over which values are memoized. A common use-case for this is if a memoized value is used as an effect dependency, in order to ensure that an effect does not fire repeatedly even when its dependencies do not meaningfully change.
+그러나 경우에 따라 개발자가 메모이제이션을 더 세밀하게 제어해야 할 수도 있습니다. `useMemo`와 `useCallback` 훅은 React 컴파일러와 함께 계속 사용하여 어떤 값을 메모이제이션할지 제어하는 탈출구로 사용할 수 있습니다. 이에 대한 흔한 사용 사례는 메모이제이션된 값이 이펙트 의존성으로 사용될 때, 의존성이 의미 있게 변경되지 않았음에도 이펙트가 반복적으로 실행되지 않도록 보장하는 것입니다.
-For new code, we recommend relying on the compiler for memoization and using `useMemo`/`useCallback` where needed to achieve precise control.
+새로운 코드의 경우, 메모이제이션은 컴파일러에 의존하고 정밀한 제어가 필요한 경우에만 `useMemo`/`useCallback`을 사용하는 것을 권장합니다.
-For existing code, we recommend either leaving existing memoization in place (removing it can change compilation output) or carefully testing before removing the memoization.
+기존 코드의 경우, 기존 메모이제이션을 그대로 두거나(제거하면 컴파일 출력이 변경될 수 있음) 메모이제이션을 제거하기 전에 신중하게 테스트하는 것을 권장합니다.
-## New apps should use React Compiler {/*new-apps-should-use-react-compiler*/}
-We have partnered with the Expo, Vite, and Next.js teams to add the compiler to the new app experience.
+## 새로운 앱은 React 컴파일러를 사용해야 합니다 {/*new-apps-should-use-react-compiler*/}
+Expo, Vite, Next.js 팀과 협력하여 새로운 앱 경험에 컴파일러를 추가했습니다.
-[Expo SDK 54](https://docs.expo.dev/guides/react-compiler/) and up has the compiler enabled by default, so new apps will automatically be able to take advantage of the compiler from the start.
+[Expo SDK 54](https://docs.expo.dev/guides/react-compiler/) 이상에서는 컴파일러가 기본적으로 활성화되어 있으므로, 새로운 앱은 처음부터 자동으로 컴파일러의 이점을 활용할 수 있습니다.
{`npx create-expo-app@latest`}
-[Vite](https://vite.dev/guide/) and [Next.js](https://nextjs.org/docs/app/api-reference/cli/create-next-app) users can choose the compiler enabled templates in `create-vite` and `create-next-app`.
+[Vite](https://vite.dev/guide/) 및 [Next.js](https://nextjs.org/docs/app/api-reference/cli/create-next-app) 사용자는 `create-vite` 및 `create-next-app`에서 컴파일러가 활성화된 템플릿을 선택할 수 있습니다.
{`npm create vite@latest`}
@@ -168,27 +168,27 @@ We have partnered with the Expo, Vite, and Next.js teams to add the compiler to
{`npx create-next-app@latest`}
-## Adopt React Compiler incrementally {/*adopt-react-compiler-incrementally*/}
-If you're maintaining an existing application, you can roll out the compiler at your own pace. We published a step-by-step [incremental adoption guide](/learn/react-compiler/incremental-adoption) that covers gating strategies, compatibility checks, and rollout tooling so you can enable the compiler with confidence.
+## React 컴파일러 점진적으로 도입하기 {/*adopt-react-compiler-incrementally*/}
+기존 애플리케이션을 유지보수하는 경우, 자신의 속도에 맞춰 컴파일러를 출시할 수 있습니다. 게이팅 전략, 호환성 검사, 출시 도구를 다루는 단계별 [점진적 도입 가이드](/learn/react-compiler/incremental-adoption)를 게시하여 안심하고 컴파일러를 활성화할 수 있도록 했습니다.
-## swc support (experimental) {/*swc-support-experimental*/}
-React Compiler can be installed across [several build tools](/learn/react-compiler#installation) such as Babel, Vite, and Rsbuild.
+## swc 지원 (실험적) {/*swc-support-experimental*/}
+React 컴파일러는 Babel, Vite, Rsbuild와 같은 [여러 빌드 도구](/learn/react-compiler#installation)에 걸쳐 설치할 수 있습니다.
-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).
+이러한 도구 외에도, [swc](https://swc.rs/) 팀의 강동윤([@kdy1dev](https://x.com/kdy1dev))님과 협력하여 React 컴파일러를 swc 플러그인으로 추가 지원하는 작업을 진행하고 있습니다. 이 작업이 완료되지는 않았지만, [Next.js 앱에서 React 컴파일러를 활성화](https://nextjs.org/docs/app/api-reference/config/next-config-js/reactCompiler)하면 이제 Next.js 빌드 성능이 상당히 빨라질 것입니다.
-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.
+최상의 빌드 성능을 얻으려면 Next.js [15.3.1](https://github.com/vercel/next.js/releases/tag/v15.3.1) 이상을 사용하는 것을 권장합니다.
-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](/learn/react-compiler/installation#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.
+Vite 사용자는 계속해서 [vite-plugin-react](https://github.com/vitejs/vite-plugin-react)를 사용하여 컴파일러를 활성화할 수 있으며, 이를 [Babel 플러그인](/learn/react-compiler/installation#vite)으로 추가하면 됩니다. 또한 [oxc](https://oxc.rs/) 팀과 협력하여 [컴파일러 지원을 추가](https://github.com/oxc-project/oxc/issues/10048)하고 있습니다. [rolldown](https://github.com/rolldown/rolldown)이 공식적으로 출시되고 Vite에서 지원되며 React 컴파일러에 대한 oxc 지원이 추가되면, 마이그레이션 방법에 대한 정보로 문서를 업데이트할 것입니다.
-## Upgrading React Compiler {/*upgrading-react-compiler*/}
-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.
+## React 컴파일러 업그레이드하기 {/*upgrading-react-compiler*/}
+React 컴파일러는 적용된 자동 메모이제이션이 순전히 성능을 위한 것일 때 가장 잘 작동합니다. 향후 버전의 컴파일러는 메모이제이션이 적용되는 방식을 변경할 수 있으며, 예를 들어 더 세분화되고 정밀해질 수 있습니다.
-However, because product code may sometimes break the [rules of React](/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](/learn/synchronizing-with-effects), your codebase may have `useEffect`s that cover other use cases, such as effects that needs to only run in response to specific values changing.
+그러나 제품 코드는 때때로 자바스크립트에서 항상 정적으로 감지할 수 없는 방식으로 [React의 규칙](/reference/rules)을 위반할 수 있기 때문에, 메모이제이션을 변경하면 때때로 예기치 않은 결과가 발생할 수 있습니다. 예를 들어, 이전에 메모이제이션된 값이 컴포넌트 트리의 어딘가에서 `useEffect`의 의존성으로 사용될 수 있습니다. 이 값이 메모이제이션되는 방식이나 여부를 변경하면 해당 `useEffect`가 과도하게 또는 부족하게 실행될 수 있습니다. [동기화를 위해서만 useEffect를 사용](/learn/synchronizing-with-effects)하도록 권장하지만, 코드베이스에는 특정 값 변경에만 응답하여 실행되어야 하는 이펙트와 같은 다른 사용 사례를 다루는 `useEffect`가 있을 수 있습니다.
-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.
+즉, 메모이제이션을 변경하면 드문 경우에 예기치 않은 동작이 발생할 수 있습니다. 이러한 이유로, React의 규칙을 따르고 앱의 지속적인 엔드투엔드 테스트를 사용하여 안심하고 컴파일러를 업그레이드하고 문제를 일으킬 수 있는 React 규칙 위반을 식별하는 것을 권장합니다.
-If you don't have good test coverage, we recommend pinning the compiler to an exact version (eg `1.0.0`) rather than a SemVer range (eg `^1.0.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.
+테스트 커버리지가 좋지 않은 경우, 컴파일러를 SemVer 범위(예: `^1.0.0`)가 아닌 정확한 버전(예: `1.0.0`)으로 고정하는 것을 권장합니다. 컴파일러를 업그레이드할 때 `--save-exact`(npm/pnpm) 또는 `--exact` 플래그(yarn)를 전달하여 이를 수행할 수 있습니다. 그런 다음 컴파일러의 모든 업그레이드를 수동으로 수행하고 앱이 여전히 예상대로 작동하는지 주의 깊게 확인해야 합니다.
---
-Thanks to [Jason Bonta](https://x.com/someextent), [Jimmy Lai](https://x.com/feedthejim), [Kang Dongyoon](https://x.com/kdy1dev) (@kdy1dev), and [Dan Abramov](https://bsky.app/profile/danabra.mov) for reviewing and editing this post.
+이 게시물을 검토하고 편집해주신 [Jason Bonta](https://x.com/someextent), [Jimmy Lai](https://x.com/feedthejim), [Kang Dongyoon](https://x.com/kdy1dev) (@kdy1dev), [Dan Abramov](https://bsky.app/profile/danabra.mov)님께 감사드립니다.
diff --git a/src/content/blog/index.md b/src/content/blog/index.md
index 1d86f3125..04dc1606e 100644
--- a/src/content/blog/index.md
+++ b/src/content/blog/index.md
@@ -10,7 +10,13 @@ title: React 블로그
-
+
+
+오늘 컴파일러의 첫 릴리즈 버전을 출시하며, 도입을 더 쉽게 할 린팅 및 툴링 개선 사항도 함께 공개합니다.
+
+
+
+
We're releasing the compiler's first stable release today, plus linting and tooling improvements to make adoption easier.