wip

Author: lumirlumir

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

@@ -4,89 +4,89 @@ title: rules-of-hooks
 
 <Intro>
 
-Validates that components and hooks follow the [Rules of Hooks](/reference/rules/rules-of-hooks).
+컴포넌트와 Hook이 [Hook의 규칙](/reference/rules/rules-of-hooks)을 따르는지 검증합니다.
 
 </Intro>
 
-## Rule Details {/*rule-details*/}
+## 규칙 세부 사항 {/*rule-details*/}
 
-React relies on the order in which hooks are called to correctly preserve state between renders. Each time your component renders, React expects the exact same hooks to be called in the exact same order. When hooks are called conditionally or in loops, React loses track of which state corresponds to which hook call, leading to bugs like state mismatches and "Rendered fewer/more hooks than expected" errors.
+React는 Hook이 호출되는 순서에 의존하여 렌더링 간에 state를 올바르게 보존합니다. 컴포넌트가 렌더링될 때마다 React는 정확히 같은 Hook이 정확히 같은 순서로 호출되기를 기대합니다. Hook이 조건부로 호출되거나 루프에서 호출되면 React는 어떤 state가 어떤 Hook 호출에 해당하는지 추적할 수 없게 되어 state 불일치와 "Rendered fewer/more hooks than expected" 오류 같은 버그가 발생합니다.
 
-## Common Violations {/*common-violations*/}
+## 일반적인 위반 사례 {/*common-violations*/}
 
-These patterns violate the Rules of Hooks:
+다음 패턴들은 Hook의 규칙을 위반합니다.
 
-- **Hooks in conditions** (`if`/`else`, ternary, `&&`/`||`)
-- **Hooks in loops** (`for`, `while`, `do-while`)
-- **Hooks after early returns**
-- **Hooks in callbacks/event handlers**
-- **Hooks in async functions**
-- **Hooks in class methods**
-- **Hooks at module level**
+- **조건문의 Hook** (`if`/`else`, 삼항 연산자, `&&`/`||`)
+- **루프의 Hook** (`for`, `while`, `do-while`)
+- **조기 return 이후의 Hook**
+- **콜백/이벤트 핸들러의 Hook**
+- **async 함수의 Hook**
+- **클래스 메서드의 Hook**
+- **모듈 레벨의 Hook**
 
 <Note>
 
-### `use` hook {/*use-hook*/}
+### `use` Hook {/*use-hook*/}
 
-The `use` hook is different from other React hooks. You can call it conditionally and in loops:
+`use` Hook은 다른 React Hook과 다릅니다. 조건부로 호출하거나 루프에서 호출할 수 있습니다.
 
 ```js
-// ✅ `use` can be conditional
+// ✅ `use`는 조건문에서 호출 가능
 if (shouldFetch) {
   const data = use(fetchPromise);
 }
 
-// ✅ `use` can be in loops
+// ✅ `use`는 루프에서 호출 가능
 for (const promise of promises) {
   results.push(use(promise));
 }
 ```
 
-However, `use` still has restrictions:
-- Can't be wrapped in try/catch
-- Must be called inside a component or hook
+하지만 `use`에는 여전히 제약이 있습니다.
+- `try`/`catch`로 감쌀 수 없습니다.
+- 컴포넌트나 Hook 내부에서 호출해야 합니다.
 
-Learn more: [`use` API Reference](/reference/react/use)
+더 알아보기: [`use` API 레퍼런스](/reference/react/use)
 
 </Note>
 
-### Invalid {/*invalid*/}
+### 잘못된 예 {/*invalid*/}
 
-Examples of incorrect code for this rule:
+이 규칙에 대한 잘못된 코드 예시입니다.
 
 ```js
-// ❌ Hook in condition
+// ❌ 조건문의 Hook
 if (isLoggedIn) {
   const [user, setUser] = useState(null);
 }
 
-// ❌ Hook after early return
+// ❌ 조기 return 이후의 Hook
 if (!data) return <Loading />;
 const [processed, setProcessed] = useState(data);
 
-// ❌ Hook in callback
+// ❌ 콜백의 Hook
 <button onClick={() => {
   const [clicked, setClicked] = useState(false);
 }}/>
 
-// ❌ `use` in try/catch
+// ❌ try/catch의 `use`
 try {
   const data = use(promise);
 } catch (e) {
-  // error handling
+  // 오류 처리
 }
 
-// ❌ Hook at module level
-const globalState = useState(0); // Outside component
+// ❌ 모듈 레벨의 Hook
+const globalState = useState(0); // 컴포넌트 외부
 ```
 
-### Valid {/*valid*/}
+### 올바른 예 {/*valid*/}
 
-Examples of correct code for this rule:
+이 규칙에 대한 올바른 코드 예시입니다.
 
 ```js
 function Component({ isSpecial, shouldFetch, fetchPromise }) {
-  // ✅ Hooks at top level
+  // ✅ 최상위 레벨의 Hook
   const [count, setCount] = useState(0);
   const [name, setName] = useState('');
 
@@ -95,7 +95,7 @@ function Component({ isSpecial, shouldFetch, fetchPromise }) {
   }
 
   if (shouldFetch) {
-    // ✅ `use` can be conditional
+    // ✅ `use`는 조건문에서 호출 가능
     const data = use(fetchPromise);
     return <div>{data}</div>;
   }
@@ -104,25 +104,25 @@ function Component({ isSpecial, shouldFetch, fetchPromise }) {
 }
 ```
 
-## Troubleshooting {/*troubleshooting*/}
+## 문제 해결 {/*troubleshooting*/}
 
-### I want to fetch data based on some condition {/*conditional-data-fetching*/}
+### 조건에 따라 데이터를 가져오고 싶은 경우 {/*conditional-data-fetching*/}
 
-You're trying to conditionally call useEffect:
+`useEffect`를 조건부로 호출하려고 합니다.
 
 ```js
-// ❌ Conditional hook
+// ❌ 조건부 Hook
 if (isLoggedIn) {
   useEffect(() => {
     fetchUserData();
   }, []);
 }
 ```
 
-Call the hook unconditionally, check condition inside:
+Hook을 무조건 호출하고 내부에서 조건을 확인하세요.
 
 ```js
-// ✅ Condition inside hook
+// ✅ Hook 내부의 조건
 useEffect(() => {
   if (isLoggedIn) {
     fetchUserData();
@@ -132,37 +132,37 @@ useEffect(() => {
 
 <Note>
 
-There are better ways to fetch data rather than in a useEffect. Consider using React Query, useSWR, or React Router 6.4+ for data fetching. These solutions handle deduplicating requests, caching responses, and avoiding network waterfalls.
+`useEffect`에서 데이터를 가져오는<sup>Fetch</sup> 것보다 더 나은 방법이 있습니다. 데이터 가져오기에는 React Query, useSWR 또는 React Router 6.4+를 사용하는 것을 고려하세요. 이러한 솔루션은 요청 중복 제거, 응답 캐싱, 네트워크 워터폴 방지를 처리합니다.
 
-Learn more: [Fetching Data](/learn/synchronizing-with-effects#fetching-data)
+더 알아보기: [데이터 가져오기](/learn/synchronizing-with-effects#fetching-data)
 
 </Note>
 
-### I need different state for different scenarios {/*conditional-state-initialization*/}
+### 다른 시나리오에 따라 다른 state가 필요한 경우 {/*conditional-state-initialization*/}
 
-You're trying to conditionally initialize state:
+state를 조건부로 초기화하려고 합니다.
 
 ```js
-// ❌ Conditional state
+// ❌ 조건부 state
 if (userType === 'admin') {
   const [permissions, setPermissions] = useState(adminPerms);
 } else {
   const [permissions, setPermissions] = useState(userPerms);
 }
 ```
 
-Always call useState, conditionally set the initial value:
+항상 `useState`를 호출하고 초기값을 조건부로 설정하세요.
 
 ```js
-// ✅ Conditional initial value
+// ✅ 조건부 초기값
 const [permissions, setPermissions] = useState(
   userType === 'admin' ? adminPerms : userPerms
 );
 ```
 
-## Options {/*options*/}
+## 옵션 {/*options*/}
 
-You can configure custom effect hooks using shared ESLint settings (available in `eslint-plugin-react-hooks` 6.1.1 and later):
+공유 ESLint 설정을 사용하여 커스텀 Effect Hook을 설정할 수 있습니다 (`eslint-plugin-react-hooks` 6.1.1 이상에서 사용 가능).
 
 ```js
 {
@@ -174,6 +174,6 @@ You can configure custom effect hooks using shared ESLint settings (available in
 }
 ```
 
-- `additionalEffectHooks`: Regex pattern matching custom hooks that should be treated as effects. This allows `useEffectEvent` and similar event functions to be called from your custom effect hooks.
+- `additionalEffectHooks`: Effect로 취급되어야 하는 커스텀 Hook을 일치시키는 정규식 패턴입니다. 이를 통해 `useEffectEvent` 및 유사한 이벤트 함수를 커스텀 Effect Hook에서 호출할 수 있습니다.
 
-This shared configuration is used by both `rules-of-hooks` and `exhaustive-deps` rules, ensuring consistent behavior across all hook-related linting.
+이 공유 설정은 `rules-of-hooks`와 `exhaustive-deps` 규칙 모두에서 사용되어 모든 Hook 관련 린트에서 일관된 동작을 보장합니다.