wip

Author: lumirlumir

src/content/learn/react-compiler/debugging.md

@@ -20,7 +20,7 @@ React 컴파일러는 [React의 규칙](/reference/rules)을 따르는 코드를
 
 ### 컴파일러 오류 vs 런타임 문제 {/*compiler-errors-vs-runtime-issues*/}
 
-**컴파일러 오류**는 빌드 시점에 발생하며 코드가 컴파일되지 않게 합니다. 컴파일러는 문제가 있는 코드를 실패시키기보다 건너뛰도록 설계되어 있기 때문에 이러한 오류는 드뭅니다.
+**컴파일러 오류**는 빌드 시점에 발생하며 코드가 컴파일되지 않게 합니다. 컴파일러는 문제가 있는 코드를 실패시키기보다 건너뛰도록 설계되어 있기 때문에 이러한 오류는 자주 발생하지 않습니다.
 
 **런타임 문제**는 컴파일된 코드가 예상과 다르게 동작할 때 발생합니다. React 컴파일러 관련 문제가 발생하면 대부분 런타임 문제입니다. 이는 일반적으로 컴파일러가 감지할 수 없는 미묘한 방식으로 코드가 React의 규칙을 위반하고, 컴파일러가 건너뛰어야 했던 컴포넌트를 실수로 컴파일했을 때 발생합니다.
 

src/content/learn/react-compiler/incremental-adoption.md

@@ -3,15 +3,15 @@ title: 점진적 도입
 ---
 
 <Intro>
-React 컴파일러는 점진적으로 도입할 수 있어서 코드베이스의 특정 부분에서 먼저 시도해 볼 수 있습니다. 이 가이드에서는 기존 프로젝트에서 컴파일러를 단계적으로 배포하는 방법을 알아봅니다.
+React 컴파일러는 점진적으로 도입할 수 있으며, 코드베이스의 특정 부분에서 먼저 시도해 볼 수 있습니다. 이 가이드에서는 기존 프로젝트에서 컴파일러를 단계적으로 배포하는 방법을 알아봅니다.
 </Intro>
 
 <YouWillLearn>
 
 * 점진적 도입이 권장되는 이유
 * 디렉터리 기반 도입을 위한 Babel overrides 사용
-* 선택적 컴파일을 위한 "use memo" 지시어 사용
-* 컴포넌트 제외를 위한 "use no memo" 지시어 사용
+* 선택적 컴파일을 위한 `"use memo"` 지시어 사용
+* 컴포넌트 제외를 위한 `"use no memo"` 지시어 사용
 * 게이팅을 통한 런타임 기능 플래그
 * 도입 진행 상황 모니터링
 
@@ -32,7 +32,7 @@ React 컴파일러는 전체 코드베이스를 자동으로 최적화하도록
 React 컴파일러를 점진적으로 도입하는 세 가지 주요 방법이 있습니다.
 
 1. **Babel overrides** - 특정 디렉터리에 컴파일러 적용
-2. **"use memo"로 선택적 적용** - 명시적으로 선택한 컴포넌트만 컴파일
+2. **`"use memo"`로 선택적 적용** - 명시적으로 선택한 컴포넌트만 컴파일
 3. **런타임 게이팅** - 기능 플래그로 컴파일 제어
 
 모든 방법은 전체 배포 전에 애플리케이션의 특정 부분에서 컴파일러를 테스트할 수 있게 해줍니다.
@@ -119,9 +119,9 @@ module.exports = {
 ```
 
 
-## "use memo"를 사용한 선택적 모드 {/*opt-in-mode-with-use-memo*/}
+## `"use memo"`를 사용한 선택적 모드 {/*opt-in-mode-with-use-memo*/}
 
-최대한의 제어를 위해 `compilationMode: 'annotation'`을 사용하여 `"use memo"` 지시어로 명시적으로 선택한 컴포넌트와 Hook만 컴파일할 수 있습니다.
+최대한의 제어를 위해 `compilationMode: 'annotation'`을 사용하여 `"use memo"` 지시어를 통해 명시적으로 선택한 컴포넌트와 Hook만 컴파일할 수 있습니다.
 
 <Note>
 이 방법은 개별 컴포넌트와 Hook에 대한 세밀한 제어를 제공합니다. 전체 디렉터리에 영향을 주지 않고 특정 컴포넌트에서 컴파일러를 테스트하고 싶을 때 유용합니다.
@@ -169,7 +169,7 @@ function useSortedData(data) {
 `compilationMode: 'annotation'`을 사용하면 다음을 해야 합니다.
 - 최적화하려는 모든 컴포넌트에 `"use memo"` 추가
 - 모든 커스텀 Hook에 `"use memo"` 추가
-- 새 컴포넌트에도 추가하는 것을 기억
+- 이후에 새로 작성하는 컴포넌트에도 추가
 
 이를 통해 컴파일러의 영향을 평가하는 동안 어떤 컴포넌트가 컴파일되는지 정밀하게 제어할 수 있습니다.
 

src/content/learn/react-compiler/index.md

@@ -8,7 +8,7 @@ title: React 컴파일러
 
 ## 설치 {/*installation*/}
 
-[React 컴파일러 설치](/learn/react-compiler/installation)를 시작하고 빌드 도구와 함께 구성하는 방법을 알아보세요.
+[React 컴파일러 설치](/learn/react-compiler/installation)를 통해 시작하고 빌드 도구와 함께 구성하는 방법을 알아보세요.
 
 
 ## 점진적 도입 {/*incremental-adoption*/}

src/content/learn/react-compiler/installation.md

@@ -187,15 +187,15 @@ ESLint 규칙은 다음과 같은 역할을 합니다.
 
 React 컴파일러에 의해 최적화된 컴포넌트는 React DevTools에서 "Memo ✨" 배지가 표시됩니다.
 
-1. [React Developer Tools](/learn/react-developer-tools) 브라우저 확장 프로그램을 설치합니다
-2. 개발 모드에서 앱을 엽니다
-3. React DevTools를 엽니다
-4. 컴포넌트 이름 옆에 ✨ 이모지가 있는지 확인합니다
+1. [React Developer Tools](/learn/react-developer-tools) 브라우저 확장 프로그램을 설치합니다.
+2. 개발 모드에서 앱을 엽니다.
+3. React DevTools를 엽니다.
+4. 컴포넌트 이름 옆에 ✨ 이모지가 있는지 확인합니다.
 
 컴파일러가 작동하는 경우
-- 컴포넌트에 "Memo ✨" 배지가 React DevTools에 표시됩니다
-- 비용이 큰 계산이 자동으로 메모이제이션됩니다
-- 수동으로 `useMemo`를 사용할 필요가 없습니다
+- 컴포넌트에 "Memo ✨" 배지가 React DevTools에 표시됩니다.
+- 비용이 큰 계산이 자동으로 메모이제이션됩니다.
+- 수동으로 `useMemo`를 사용할 필요가 없습니다.
 
 ### 빌드 출력 확인 {/*check-build-output*/}
 

src/content/learn/react-compiler/introduction.md

@@ -99,7 +99,7 @@ React 컴파일러의 자동 메모이제이션은 주로 **업데이트 성능
 
 #### 리렌더링 최적화 {/*optimizing-re-renders*/}
 
-React는 UI를 현재 state의 함수로 표현할 수 있게 해줍니다 (더 구체적으로는 props, state, context). 현재 구현에서 컴포넌트의 state가 변경되면 React는 `useMemo()`, `useCallback()`, `React.memo()`를 사용한 수동 메모이제이션을 적용하지 않는 한 해당 컴포넌트 _및 모든 자식 컴포넌트_를 리렌더링합니다. 예를 들어, 다음 예시에서 `<MessageButton>`은 `<FriendList>`의 state가 변경될 때마다 리렌더링됩니다.
+React는 UI를 현재 state의 함수로 표현할 수 있게 해줍니다 (더 구체적으로는 props, state, context). 현재 구현에서 컴포넌트의 state가 변경되면 React는 `useMemo()`, `useCallback()`, `React.memo()`를 사용한 수동 메모이제이션을 적용하지 않는 한 해당 컴포넌트 <em>및 모든 자식 컴포넌트</em>를 리렌더링합니다. 예를 들어, 다음 예시에서 `<MessageButton>`은 `<FriendList>`의 state가 변경될 때마다 리렌더링됩니다.
 
 ```javascript
 function FriendList({ friends }) {
@@ -144,7 +144,7 @@ function TableContainer({ items }) {
 - React 컴파일러는 모든 함수가 아닌 React 컴포넌트와 Hook만 메모이제이션합니다.
 - React 컴파일러의 메모이제이션은 여러 컴포넌트나 Hook 간에 공유되지 않습니다.
 
-따라서 `expensivelyProcessAReallyLargeArrayOfObjects`가 여러 다른 컴포넌트에서 사용되는 경우, 정확히 동일한 items가 전달되더라도 비용이 많이 드는 계산이 반복적으로 실행됩니다. 코드를 더 복잡하게 만들기 전에 먼저 [프로파일링](reference/react/useMemo#how-to-tell-if-a-calculation-is-expensive)하여 정말로 비용이 많이 드는지 확인하는 것을 권장합니다.
+따라서 `expensivelyProcessAReallyLargeArrayOfObjects`가 여러 다른 컴포넌트에서 사용되는 경우, 정확히 동일한 `items`가 전달되더라도 비용이 많이 드는 계산이 반복적으로 실행됩니다. 코드를 더 복잡하게 만들기 전에 먼저 [프로파일링](reference/react/useMemo#how-to-tell-if-a-calculation-is-expensive)하여 정말로 비용이 많이 드는지 확인하는 것을 권장합니다.
 </DeepDive>
 
 ## 컴파일러를 사용해 봐야 하나요? {/*should-i-try-out-the-compiler*/}