docs: translate eslint-plugin-react-hooks section

src/content/reference/eslint-plugin-react-hooks/index.md

@@ -5,36 +5,36 @@ version: rc
 
 <Intro>
 
-`eslint-plugin-react-hooks` provides ESLint rules to enforce the [Rules of React](/reference/rules).
+`eslint-plugin-react-hooks`는 [React의 규칙](/reference/rules)을 적용하기 위한 ESLint 규칙을 제공합니다.
 
 </Intro>
 
-This plugin helps you catch violations of React's rules at build time, ensuring your components and hooks follow React's rules for correctness and performance. The lints cover both fundamental React patterns (exhaustive-deps and rules-of-hooks) and issues flagged by React Compiler. React Compiler diagnostics are automatically surfaced by this ESLint plugin, and can be used even if your app hasn't adopted the compiler yet.
+이 플러그인은 빌드 시간에 React 규칙 위반을 감지하여 컴포넌트와 Hook이 정확성과 성능을 위한 React 규칙을 따르도록 도와줍니다. 린트는 기본적인 React 패턴(exhaustive-deps 및 rules-of-hooks)과 React 컴파일러가 표시하는 문제를 모두 다룹니다. React 컴파일러 진단은 이 ESLint 플러그인에 의해 자동으로 표시되며, 앱이 아직 컴파일러를 도입하지 않았더라도 사용할 수 있습니다.
 
 <Note>
-When the compiler reports a diagnostic, it means that the compiler was able to statically detect a pattern that is not supported or breaks the Rules of React. When it detects this, it **automatically** skips over those components and hooks, while keeping the rest of your app compiled. This ensures optimal coverage of safe optimizations that won't break your app.
+컴파일러가 진단을 보고하면 컴파일러가 지원되지 않거나 React 규칙을 위반하는 패턴을 정적으로 감지했다는 것을 의미합니다. 이를 감지하면 해당 컴포넌트와 Hook을 **자동으로** 건너뛰고 나머지 앱은 계속 컴파일합니다. 이렇게 하면 앱을 손상시키지 않는 안전한 최적화의 최적 적용 범위를 보장합니다.
 
-What this means for linting, is that you don’t need to fix all violations immediately. Address them at your own pace to gradually increase the number of optimized components.
+린트에서 이것이 의미하는 바는 모든 위반을 즉시 수정할 필요가 없다는 것입니다. 자신의 속도에 맞춰 해결하여 점진적으로 최적화된 컴포넌트 수를 늘리세요.
 </Note>
 
-## Recommended Rules {/*recommended*/}
-
-These rules are included in the `recommended` preset in `eslint-plugin-react-hooks`:
-
-* [`exhaustive-deps`](/reference/eslint-plugin-react-hooks/lints/exhaustive-deps) - Validates that dependency arrays for React hooks contain all necessary dependencies
-* [`rules-of-hooks`](/reference/eslint-plugin-react-hooks/lints/rules-of-hooks) - Validates that components and hooks follow the Rules of Hooks
-* [`component-hook-factories`](/reference/eslint-plugin-react-hooks/lints/component-hook-factories) - Validates higher order functions defining nested components or hooks
-* [`config`](/reference/eslint-plugin-react-hooks/lints/config) - Validates the compiler configuration options
-* [`error-boundaries`](/reference/eslint-plugin-react-hooks/lints/error-boundaries) - Validates usage of Error Boundaries instead of try/catch for child errors
-* [`gating`](/reference/eslint-plugin-react-hooks/lints/gating) - Validates configuration of gating mode
-* [`globals`](/reference/eslint-plugin-react-hooks/lints/globals) - Validates against assignment/mutation of globals during render
-* [`immutability`](/reference/eslint-plugin-react-hooks/lints/immutability) - Validates against mutating props, state, and other immutable values
-* [`incompatible-library`](/reference/eslint-plugin-react-hooks/lints/incompatible-library) - Validates against usage of libraries which are incompatible with memoization
-* [`preserve-manual-memoization`](/reference/eslint-plugin-react-hooks/lints/preserve-manual-memoization) - Validates that existing manual memoization is preserved by the compiler
-* [`purity`](/reference/eslint-plugin-react-hooks/lints/purity) - Validates that components/hooks are pure by checking known-impure functions
-* [`refs`](/reference/eslint-plugin-react-hooks/lints/refs) - Validates correct usage of refs, not reading/writing during render
-* [`set-state-in-effect`](/reference/eslint-plugin-react-hooks/lints/set-state-in-effect) - Validates against calling setState synchronously in an effect
-* [`set-state-in-render`](/reference/eslint-plugin-react-hooks/lints/set-state-in-render) - Validates against setting state during render
-* [`static-components`](/reference/eslint-plugin-react-hooks/lints/static-components) - Validates that components are static, not recreated every render
-* [`unsupported-syntax`](/reference/eslint-plugin-react-hooks/lints/unsupported-syntax) - Validates against syntax that React Compiler does not support
-* [`use-memo`](/reference/eslint-plugin-react-hooks/lints/use-memo) - Validates usage of the `useMemo` hook without a return value
+## 권장 규칙 {/*recommended*/}
+
+이 규칙들은 `eslint-plugin-react-hooks`의 `recommended` 프리셋에 포함되어 있습니다.
+
+* [`exhaustive-deps`](/reference/eslint-plugin-react-hooks/lints/exhaustive-deps) - React Hook의 의존성 배열에 필요한 모든 의존성이 포함되어 있는지 검증합니다.
+* [`rules-of-hooks`](/reference/eslint-plugin-react-hooks/lints/rules-of-hooks) - 컴포넌트와 Hook이 Hook의 규칙을 따르는지 검증합니다.
+* [`component-hook-factories`](/reference/eslint-plugin-react-hooks/lints/component-hook-factories) - 중첩된 컴포넌트나 Hook을 정의하는 고차 함수를 검증합니다.
+* [`config`](/reference/eslint-plugin-react-hooks/lints/config) - 컴파일러 설정 옵션을 검증합니다.
+* [`error-boundaries`](/reference/eslint-plugin-react-hooks/lints/error-boundaries) - 자식 오류에 대해 try/catch 대신 Error Boundary 사용을 검증합니다.
+* [`gating`](/reference/eslint-plugin-react-hooks/lints/gating) - 게이팅 모드 설정을 검증합니다.
+* [`globals`](/reference/eslint-plugin-react-hooks/lints/globals) - 렌더링 중 전역 변수의 할당/변이를 검증합니다.
+* [`immutability`](/reference/eslint-plugin-react-hooks/lints/immutability) - props, state 및 기타 불변 값의 변이를 검증합니다.
+* [`incompatible-library`](/reference/eslint-plugin-react-hooks/lints/incompatible-library) - 메모이제이션과 호환되지 않는 라이브러리 사용을 검증합니다.
+* [`preserve-manual-memoization`](/reference/eslint-plugin-react-hooks/lints/preserve-manual-memoization) - 기존의 수동 메모이제이션이 컴파일러에 의해 유지되는지 검증합니다.
+* [`purity`](/reference/eslint-plugin-react-hooks/lints/purity) - 알려진 불순 함수를 확인하여 컴포넌트/Hook이 순수한지 검증합니다.
+* [`refs`](/reference/eslint-plugin-react-hooks/lints/refs) - 렌더링 중 읽기/쓰기가 아닌 ref의 올바른 사용을 검증합니다.
+* [`set-state-in-effect`](/reference/eslint-plugin-react-hooks/lints/set-state-in-effect) - Effect에서 setState를 동기적으로 호출하는 것을 검증합니다.
+* [`set-state-in-render`](/reference/eslint-plugin-react-hooks/lints/set-state-in-render) - 렌더링 중 state 설정을 검증합니다.
+* [`static-components`](/reference/eslint-plugin-react-hooks/lints/static-components) - 컴포넌트가 매 렌더링마다 재생성되지 않고 정적인지 검증합니다.
+* [`unsupported-syntax`](/reference/eslint-plugin-react-hooks/lints/unsupported-syntax) - React 컴파일러가 지원하지 않는 문법을 검증합니다.
+* [`use-memo`](/reference/eslint-plugin-react-hooks/lints/use-memo) - 반환값 없이 `useMemo` Hook을 사용하는 것을 검증합니다.

src/content/reference/eslint-plugin-react-hooks/lints/component-hook-factories.md

@@ -4,27 +4,27 @@ title: component-hook-factories
 
 <Intro>
 
-Validates against higher order functions defining nested components or hooks. Components and hooks should be defined at the module level.
+중첩된 컴포넌트나 Hook을 정의하는 고차 함수를 검증합니다. 컴포넌트와 Hook은 모듈 레벨에서 정의해야 합니다.
 
 </Intro>
 
-## Rule Details {/*rule-details*/}
+## 규칙 세부 사항 {/*rule-details*/}
 
-Defining components or hooks inside other functions creates new instances on every call. React treats each as a completely different component, destroying and recreating the entire component tree, losing all state, and causing performance problems.
+다른 함수 내부에서 컴포넌트나 Hook을 정의하면 호출할 때마다 새로운 인스턴스가 생성됩니다. React는 각각을 완전히 다른 컴포넌트로 취급하여 전체 컴포넌트 트리를 파괴하고 다시 생성하며, 모든 state를 잃고 성능 문제를 일으킵니다.
 
-### Invalid {/*invalid*/}
+### 잘못된 예 {/*invalid*/}
 
-Examples of incorrect code for this rule:
+이 규칙에 대한 잘못된 코드 예시입니다.
 
 ```js
-// ❌ Factory function creating components
+// ❌ 컴포넌트를 생성하는 팩토리 함수
 function createComponent(defaultValue) {
   return function Component() {
     // ...
   };
 }
 
-// ❌ Component defined inside component
+// ❌ 컴포넌트 내부에서 정의된 컴포넌트
 function Parent() {
   function Child() {
     // ...
@@ -33,38 +33,38 @@ function Parent() {
   return <Child />;
 }
 
-// ❌ Hook factory function
+// ❌ Hook 팩토리 함수
 function createCustomHook(endpoint) {
   return function useData() {
     // ...
   };
 }
 ```
 
-### Valid {/*valid*/}
+### 올바른 예 {/*valid*/}
 
-Examples of correct code for this rule:
+이 규칙에 대한 올바른 코드 예시입니다.
 
 ```js
-// ✅ Component defined at module level
+// ✅ 모듈 레벨에서 정의된 컴포넌트
 function Component({ defaultValue }) {
   // ...
 }
 
-// ✅ Custom hook at module level
+// ✅ 모듈 레벨에서 정의된 커스텀 Hook
 function useData(endpoint) {
   // ...
 }
 ```
 
-## Troubleshooting {/*troubleshooting*/}
+## 문제 해결 {/*troubleshooting*/}
 
-### I need dynamic component behavior {/*dynamic-behavior*/}
+### 동적 컴포넌트 동작이 필요한 경우 {/*dynamic-behavior*/}
 
-You might think you need a factory to create customized components:
+커스터마이즈된 컴포넌트를 만들기 위해 팩토리가 필요하다고 생각할 수 있습니다.
 
 ```js
-// ❌ Wrong: Factory pattern
+// ❌ 잘못된 예: 팩토리 패턴
 function makeButton(color) {
   return function Button({children}) {
     return (
@@ -79,10 +79,10 @@ const RedButton = makeButton('red');
 const BlueButton = makeButton('blue');
 ```
 
-Pass [JSX as children](/learn/passing-props-to-a-component#passing-jsx-as-children) instead:
+대신 [JSX를 자식으로 전달](/learn/passing-props-to-a-component#passing-jsx-as-children)하세요.
 
 ```js
-// ✅ Better: Pass JSX as children
+// ✅ 더 나은 방법: JSX를 자식으로 전달
 function Button({color, children}) {
   return (
     <button style={{backgroundColor: color}}>

src/content/reference/eslint-plugin-react-hooks/lints/config.md

@@ -4,44 +4,44 @@ title: config
 
 <Intro>
 
-Validates the compiler [configuration options](/reference/react-compiler/configuration).
+컴파일러 [설정 옵션](/reference/react-compiler/configuration)을 검증합니다.
 
 </Intro>
 
-## Rule Details {/*rule-details*/}
+## 규칙 세부 사항 {/*rule-details*/}
 
-React Compiler accepts various [configuration options](/reference/react-compiler/configuration)  to control its behavior. This rule validates that your configuration uses correct option names and value types, preventing silent failures from typos or incorrect settings.
+React 컴파일러는 동작을 제어하기 위해 다양한 [설정 옵션](/reference/react-compiler/configuration)을 받습니다. 이 규칙은 설정이 올바른 옵션 이름과 값 타입을 사용하는지 검증하여 오타나 잘못된 설정으로 인한 무시되는 오류를 방지합니다.
 
-### Invalid {/*invalid*/}
+### 잘못된 예 {/*invalid*/}
 
-Examples of incorrect code for this rule:
+이 규칙에 대한 잘못된 코드 예시입니다.
 
 ```js
-// ❌ Unknown option name
+// ❌ 알 수 없는 옵션 이름
 module.exports = {
   plugins: [
     ['babel-plugin-react-compiler', {
-      compileMode: 'all' // Typo: should be compilationMode
+      compileMode: 'all' // 오타: compilationMode여야 함
     }]
   ]
 };
 
-// ❌ Invalid option value
+// ❌ 유효하지 않은 옵션 값
 module.exports = {
   plugins: [
     ['babel-plugin-react-compiler', {
-      compilationMode: 'everything' // Invalid: use 'all' or 'infer'
+      compilationMode: 'everything' // 유효하지 않음: 'all' 또는 'infer'를 사용하세요
     }]
   ]
 };
 ```
 
-### Valid {/*valid*/}
+### 올바른 예 {/*valid*/}
 
-Examples of correct code for this rule:
+이 규칙에 대한 올바른 코드 예시입니다.
 
 ```js
-// ✅ Valid compiler configuration
+// ✅ 유효한 컴파일러 설정
 module.exports = {
   plugins: [
     ['babel-plugin-react-compiler', {
@@ -52,38 +52,38 @@ module.exports = {
 };
 ```
 
-## Troubleshooting {/*troubleshooting*/}
+## 문제 해결 {/*troubleshooting*/}
 
-### Configuration not working as expected {/*config-not-working*/}
+### 설정이 예상대로 작동하지 않는 경우 {/*config-not-working*/}
 
-Your compiler configuration might have typos or incorrect values:
+컴파일러 설정에 오타나 잘못된 값이 있을 수 있습니다.
 
 ```js
-// ❌ Wrong: Common configuration mistakes
+// ❌ 잘못된 예: 일반적인 설정 실수
 module.exports = {
   plugins: [
     ['babel-plugin-react-compiler', {
-      // Typo in option name
+      // 옵션 이름 오타
       compilationMod: 'all',
-      // Wrong value type
+      // 잘못된 값 타입
       panicThreshold: true,
-      // Unknown option
+      // 알 수 없는 옵션
       optimizationLevel: 'max'
     }]
   ]
 };
 ```
 
-Check the [configuration documentation](/reference/react-compiler/configuration) for valid options:
+유효한 옵션은 [설정 문서](/reference/react-compiler/configuration)를 확인하세요.
 
 ```js
-// ✅ Better: Valid configuration
+// ✅ 더 나은 방법: 유효한 설정
 module.exports = {
   plugins: [
     ['babel-plugin-react-compiler', {
-      compilationMode: 'all', // or 'infer'
-      panicThreshold: 'none', // or 'critical_errors', 'all_errors'
-      // Only use documented options
+      compilationMode: 'all', // 또는 'infer'
+      panicThreshold: 'none', // 또는 'critical_errors', 'all_errors'
+      // 문서화된 옵션만 사용하세요
     }]
   ]
 };

src/content/reference/eslint-plugin-react-hooks/lints/error-boundaries.md

@@ -4,35 +4,35 @@ title: error-boundaries
 
 <Intro>
 
-Validates usage of Error Boundaries instead of try/catch for errors in child components.
+자식 컴포넌트의 오류에 대해 try/catch 대신 Error Boundary 사용을 검증합니다.
 
 </Intro>
 
-## Rule Details {/*rule-details*/}
+## 규칙 세부 사항 {/*rule-details*/}
 
-Try/catch blocks can't catch errors that happen during React's rendering process. Errors thrown in rendering methods or hooks bubble up through the component tree. Only [Error Boundaries](/reference/react/Component#catching-rendering-errors-with-an-error-boundary) can catch these errors.
+try/catch 블록은 React의 렌더링 과정에서 발생하는 오류를 잡을 수 없습니다. 렌더링 메서드나 Hook에서 발생한 오류는 컴포넌트 트리를 타고 위로 전파됩니다. 오직 [Error Boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary)만이 이러한 오류를 잡을 수 있습니다.
 
-### Invalid {/*invalid*/}
+### 잘못된 예 {/*invalid*/}
 
-Examples of incorrect code for this rule:
+이 규칙에 대한 잘못된 코드 예시입니다.
 
 ```js
-// ❌ Try/catch won't catch render errors
+// ❌ try/catch는 렌더링 오류를 잡을 수 없음
 function Parent() {
   try {
-    return <ChildComponent />; // If this throws, catch won't help
+    return <ChildComponent />; // 여기서 오류가 발생하면 catch가 도움이 되지 않음
   } catch (error) {
     return <div>Error occurred</div>;
   }
 }
 ```
 
-### Valid {/*valid*/}
+### 올바른 예 {/*valid*/}
 
-Examples of correct code for this rule:
+이 규칙에 대한 올바른 코드 예시입니다.
 
 ```js
-// ✅ Using error boundary
+// ✅ Error Boundary 사용
 function Parent() {
   return (
     <ErrorBoundary>
@@ -42,24 +42,24 @@ function Parent() {
 }
 ```
 
-## Troubleshooting {/*troubleshooting*/}
+## 문제 해결 {/*troubleshooting*/}
 
-### Why is the linter telling me not to wrap `use` in `try`/`catch`? {/*why-is-the-linter-telling-me-not-to-wrap-use-in-trycatch*/}
+### 린터가 `use`를 `try`/`catch`로 감싸지 말라고 하는 이유는 무엇인가요? {/*why-is-the-linter-telling-me-not-to-wrap-use-in-trycatch*/}
 
-The `use` hook doesn't throw errors in the traditional sense, it suspends component execution. When `use` encounters a pending promise, it suspends the component and lets React show a fallback. Only Suspense and Error Boundaries can handle these cases. The linter warns against `try`/`catch` around `use` to prevent confusion as the `catch` block would never run.
+`use` Hook은 전통적인 의미에서 오류를 던지지 않고 컴포넌트 실행을 일시 중단합니다. `use`가 대기 중인 Promise를 만나면 컴포넌트를 일시 중단하고 React가 폴백을 표시하도록 합니다. Suspense와 Error Boundary만이 이러한 경우를 처리할 수 있습니다. 린터는 `catch` 블록이 절대 실행되지 않으므로 혼란을 방지하기 위해 `use` 주위의 `try`/`catch`에 대해 경고합니다.
 
 ```js
-// ❌ Try/catch around `use` hook
+// ❌ `use` Hook 주위의 try/catch
 function Component({promise}) {
   try {
-    const data = use(promise); // Won't catch - `use` suspends, not throws
+    const data = use(promise); // 잡을 수 없음 - `use`는 던지지 않고 일시 중단함
     return <div>{data}</div>;
   } catch (error) {
-    return <div>Failed to load</div>; // Unreachable
+    return <div>Failed to load</div>; // 도달 불가
   }
 }
 
-// ✅ Error boundary catches `use` errors
+// ✅ Error Boundary가 `use` 오류를 잡음
 function App() {
   return (
     <ErrorBoundary fallback={<div>Failed to load</div>}>