docs: translate React Compiler memo guidance

[lee-eojin]

react/memo 페이지의 React 컴파일러 관련 내용 번역

df15e35 docs: translate memoization interaction guidance
21ce438 docs: translate React Compiler memo guidance
3500f4b docs: translate memo troubleshooting headings

원본 react.dev에 최근 추가된 React 컴파일러 관련 중요한 내용이 reference/react/memo 페이지에 영어로 남아 있어 번역했습니다. 컴파일러 도입 이후 memo의 역할 변화를 설명하는 섹션이 새로 들어오면서, 해당 부분과 그 주변 일부 구간이 미번역 상태였습니다.

번역 대상은 다음 세 부분입니다.

• "React 컴파일러를 사용한다면 React.memo가 여전히 필요한가요?" 섹션 전체 (이번에 추가된 핵심 구간)
• DeepDive "모든 곳에 memo를 추가해야 할까요?"의 도입 문단
• 문제 해결(Troubleshooting) 섹션 헤더 및 소제목

- If your app is like this site, and most interactions are coarse (like replacing a page or an entire section), memoization is usually unnecessary. On the other hand, if your app is more like a drawing editor, and most interactions are granular (like moving shapes), then you might find memoization very helpful.
+ 이 사이트처럼 앱에서 대부분의 상호작용이 (페이지나 섹션 전체를 교체하는 것처럼) 큰 단위로 이루어진다면, 메모이제이션은 대개 필요하지 않습니다. 반면에 그림 편집기처럼 대부분의 상호작용이 (도형을 움직이는 것처럼) 세밀한 단위로 이루어진다면, 메모이제이션이 매우 유용할 수 있습니다.

- ### Do I still need React.memo if I use React Compiler? {/*react-compiler-memo*/}
+ ### React 컴파일러를 사용한다면 React.memo가 여전히 필요한가요? {/*react-compiler-memo*/}

- When you enable [React Compiler](/learn/react-compiler), you typically don't need `React.memo` anymore. The compiler automatically optimizes component re-rendering for you.
+ [React 컴파일러](/learn/react-compiler)를 활성화하면 일반적으로 `React.memo`가 더 이상 필요하지 않습니다. 컴파일러가 컴포넌트 리렌더링을 자동으로 최적화해 주기 때문입니다.

- Here's how it works:
+ 작동 방식은 다음과 같습니다.

- **Without React Compiler**, you need `React.memo` to prevent unnecessary re-renders:
+ **React 컴파일러를 활성화하지 않으면** 불필요한 리렌더링을 막기 위해 `React.memo`가 필요합니다.

- // Parent re-renders every second
+ // 부모가 매초 리렌더링됩니다

- // Without memo, this re-renders every second even though props don't change
+ // memo가 없으면 Props가 변경되지 않아도 매초 리렌더링됩니다

- **With React Compiler enabled**, the same optimization happens automatically:
+ **React 컴파일러를 활성화하면** 동일한 최적화가 자동으로 이루어집니다.

- // No memo needed - compiler prevents re-renders automatically
+ // memo가 필요 없습니다. 컴파일러가 리렌더링을 자동으로 막아 줍니다

- Here's the key part of what the React Compiler generates:
+ React 컴파일러가 생성하는 코드의 핵심 부분은 다음과 같습니다.

- // ... other code ...
+ // ... 그 외 코드 ...

- // ... return statement ...
+ // ... return 문 ...

- Notice the highlighted lines: The compiler wraps `<ExpensiveChild name="John" />` in a cache check. Since the `name` prop is always `"John"`, this JSX is created once and reused on every parent re-render. This is exactly what `React.memo` does - it prevents the child from re-rendering when its props haven't changed.
+ 강조된 줄을 살펴보세요. 컴파일러는 `<ExpensiveChild name="John" />`를 캐시 검사로 감쌉니다. `name` Prop이 항상 `"John"`이므로, 이 JSX는 한 번만 생성되고 부모가 리렌더링될 때마다 재사용됩니다. 이는 정확히 `React.memo`가 하는 일과 같습니다. 즉, 자식의 Props가 변경되지 않았을 때 자식이 리렌더링되지 않도록 막아 줍니다.

- The React Compiler automatically:
- 1. Tracks that the `name` prop passed to `ExpensiveChild` hasn't changed
- 2. Reuses the previously created JSX for `<ExpensiveChild name="John" />`
- 3. Skips re-rendering `ExpensiveChild` entirely
+ React 컴파일러는 자동으로 다음을 수행합니다.
+ 1. `ExpensiveChild`에 전달된 `name` Prop이 변경되지 않았음을 추적합니다.
+ 2. 이전에 생성한 `<ExpensiveChild name="John" />` JSX를 재사용합니다.
+ 3. `ExpensiveChild`의 리렌더링을 완전히 건너뜁니다.

- This means **you can safely remove `React.memo` from your components when using React Compiler**. The compiler provides the same optimization automatically, making your code cleaner and easier to maintain.
+ 즉, **React 컴파일러를 사용할 때는 컴포넌트에서 `React.memo`를 안전하게 제거할 수 있습니다.** 컴파일러가 동일한 최적화를 자동으로 제공하므로 코드가 더 깔끔해지고 유지보수하기 쉬워집니다.

- The compiler's optimization is actually more comprehensive than `React.memo`. It also memoizes intermediate values and expensive computations within your components, similar to combining `React.memo` with `useMemo` throughout your component tree.
+ 컴파일러의 최적화는 사실 `React.memo`보다 더 포괄적입니다. 컴포넌트 내부의 중간값과 비용이 많이 드는 계산까지 메모이제이션하는데, 이는 컴포넌트 트리 전반에 걸쳐 `React.memo`와 `useMemo`를 함께 사용하는 것과 비슷합니다.

- ## Troubleshooting {/*troubleshooting*/}
- ### My component re-renders when a prop is an object, array, or function {/*my-component-rerenders-when-a-prop-is-an-object-or-array*/}
+ ## 문제 해결 {/*troubleshooting*/}
+ ### Prop이 객체, 배열 또는 함수일 때 컴포넌트가 리렌더링됩니다 {/*my-component-rerenders-when-a-prop-is-an-object-or-array*/}

필수 확인 사항

• 기여자 행동 강령 규약^{Code of Conduct}
• 기여 가이드라인^Contributing
• 공통 스타일 가이드^{Universal Style Guide}
• 번역을 위한 모범 사례^{Best Practices for Translation}
• 번역 용어 정리^{Translate Glossary}
• textlint 가이드^{Textlint Guide}
• 맞춤법 검사^{Spelling Check}

선택 확인 사항

• 번역 초안 작성^{Draft Translation}
• 리뷰 반영^{Resolve Reviews}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
ko-legacy-reactjs-org	Ignored	Preview	Jun 23, 2026 12:48pm

[github-actions]

Size changes

Details

📦 Next.js Bundle Analysis for undefined

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌