You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/reference/eslint-plugin-react-hooks/lints/exhaustive-deps.md
+23-23Lines changed: 23 additions & 23 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,23 +4,23 @@ title: exhaustive-deps
4
4
5
5
<Intro>
6
6
7
-
Validates that dependency arrays for React hooks contain all necessary dependencies.
7
+
React Hook의 의존성 배열에 필요한 모든 의존성이 포함되어 있는지 검증합니다.
8
8
9
9
</Intro>
10
10
11
-
## Rule Details {/*rule-details*/}
11
+
## 규칙 자세히보기 {/*rule-details*/}
12
12
13
-
React hooks like `useEffect`, `useMemo`, and `useCallback` accept dependency arrays. When a value referenced inside these hooks isn't included in the dependency array, React won't re-run the effect or recalculate the value when that dependency changes. This causes stale closures where the hook uses outdated values.
13
+
`useEffect`, `useMemo`, `useCallback`과 같은 React Hook은 의존성 배열을 받습니다. 이 Hook들 안에서 참조한 값이 의존성 배열에 포함되지 않으면 그 값이 바뀌어도 React가 effect를 다시 실행하거나 값을 다시 계산하지 않습니다. 그 결과 Hook이 예전 값을 계속 붙잡고 사용하는 "stale closure(오래된 클로저)" 문제가 생겨 최신 값이 아닌 상태로 동작하게 됩니다.
14
14
15
-
## Common Violations {/*common-violations*/}
15
+
## 흔한 위반 사항 {/*common-violations*/}
16
16
17
-
This error often happens when you try to "trick" React about dependencies to control when an effect runs. Effects should synchronize your component with external systems. The dependency array tells React which values the effect uses, so React knows when to re-synchronize.
17
+
이 오류는 effect 실행 시점을 조절하려고 의존성을 의도적으로 누락할 때 자주 발생합니다. Effect는 컴포넌트를 외부 시스템과 동기화하기 위한 용도여야 합니다. 의존성 배열은 effect가 어떤 값을 사용하고 있는지 React에게 알려주며, React는 이를 바탕으로 언제 다시 동기화해야 하는지 판단합니다.
18
18
19
-
If you find yourself fighting with the linter, you likely need to restructure your code. See [Removing Effect Dependencies](/learn/removing-effect-dependencies)to learn how.
19
+
린터 경고를 계속 피하려고 하거나 맞추기 어렵다고 느낀다면, 코드 구조를 다시 구성해야 할 가능성이 큽니다. 방법은 [Effect의 의존성 제거하기](/learn/removing-effect-dependencies)문서를 참고하세요.
20
20
21
-
### Invalid {/*invalid*/}
21
+
### 유효하지 않음 {/*invalid*/}
22
22
23
-
Examples of incorrect code for this rule:
23
+
이 규칙에 대한 잘못된 코드 예시
24
24
25
25
```js
26
26
// ❌ Missing dependency
@@ -39,9 +39,9 @@ useMemo(() => {
39
39
}, [items]); // Missing 'sortOrder'
40
40
```
41
41
42
-
### Valid {/*valid*/}
42
+
### 유효 {/*valid*/}
43
43
44
-
Examples of correct code for this rule:
44
+
이 규칙에 대한 올바른 예시
45
45
46
46
```js
47
47
// ✅ All dependencies included
@@ -55,11 +55,11 @@ useEffect(() => {
55
55
}, [userId]);
56
56
```
57
57
58
-
## Troubleshooting {/*troubleshooting*/}
58
+
## 문제 해결 {/*troubleshooting*/}
59
59
60
-
### Adding a function dependency causes infinite loops {/*function-dependency-loops*/}
60
+
### 함수를 의존성으로 추가하면 무한 루프가 발생할 수 있습니다 {/*function-dependency-loops*/}
61
61
62
-
You have an effect, but you're creating a new function on every render:
62
+
effect를 사용하고 있지만, 렌더링이 일어날 때마다 새로운 함수를 매번 생성하고 있습니다.
63
63
64
64
```js
65
65
// ❌ Causes infinite loop
@@ -72,7 +72,7 @@ useEffect(() => {
72
72
}, [logItems]); // Infinite loop!
73
73
```
74
74
75
-
In most cases, you don't need the effect. Call the function where the action happens instead:
75
+
대부분의 경우 effect는 필요하지 않습니다. 대신 그 동작이 실제로 발생하는 지점에서 함수를 호출하세요.
76
76
77
77
```js
78
78
// ✅ Call it from the event handler
@@ -88,7 +88,7 @@ items.forEach(item => {
88
88
});
89
89
```
90
90
91
-
If you genuinely need the effect (for example, to subscribe to something external), make the dependency stable:
91
+
정말로 effect가 필요한 경우(예: 외부 무언가를 구독해야 하는 경우)에는, 의존성이 안정적이도록 만드세요.
92
92
93
93
```js
94
94
// ✅ useCallback keeps the function reference stable
@@ -106,9 +106,9 @@ useEffect(() => {
106
106
}, [items]);
107
107
```
108
108
109
-
### Running an effect only once {/*effect-on-mount*/}
109
+
### effect를 한 번만 실행하기 {/*effect-on-mount*/}
110
110
111
-
You want to run an effect once on mount, but the linter complains about missing dependencies:
111
+
마운트 시점에 effect를 한 번만 실행하고 싶지만, 린터가 누락된 의존성에 대해 경고합니다.
112
112
113
113
```js
114
114
// ❌ Missing dependency
@@ -117,7 +117,7 @@ useEffect(() => {
117
117
}, []); // Missing 'userId'
118
118
```
119
119
120
-
Either include the dependency (recommended) or use a ref if you truly need to run once:
120
+
의존성을 포함하는 것이 권장되며, 정말로 한 번만 실행해야 한다면 Ref를 사용하세요.
121
121
122
122
```js
123
123
// ✅ Include dependency
@@ -138,9 +138,9 @@ useEffect(() => {
138
138
}, [userId]);
139
139
```
140
140
141
-
## Options {/*options*/}
141
+
## 옵션 {/*options*/}
142
142
143
-
You can configure custom effect hooks using shared ESLint settings (available in `eslint-plugin-react-hooks` 6.1.1 and later):
143
+
공유 ESLint 설정을 사용해 커스텀 Effect Hook을 설정할 수 있습니다(`eslint-plugin-react-hooks` 6.1.1 이상에서 지원).
144
144
145
145
```js
146
146
{
@@ -152,9 +152,9 @@ You can configure custom effect hooks using shared ESLint settings (available in
152
152
}
153
153
```
154
154
155
-
-`additionalEffectHooks`: Regex pattern matching custom hooks that should be checked for exhaustive dependencies. This configuration is shared across all `react-hooks`rules.
155
+
-`additionalEffectHooks`: 철저한 의존성 검사를 적용해야 하는 커스텀 Hook을 정규식 패턴으로 지정합니다. 이 설정은 모든 `react-hooks`규칙에서 공통으로 사용됩니다.
156
156
157
-
For backward compatibility, this rule also accepts a rule-level option:
157
+
하위 호환성을 위해 이 규칙은 규칙 단위 옵션도 함께 지원합니다.
158
158
159
159
```js
160
160
{
@@ -166,4 +166,4 @@ For backward compatibility, this rule also accepts a rule-level option:
166
166
}
167
167
```
168
168
169
-
-`additionalHooks`: Regex for hooks that should be checked for exhaustive dependencies. **Note:**If this rule-level option is specified, it takes precedence over the shared `settings`configuration.
169
+
-`additionalHooks`: 빠짐없는 의존성 검사(exhaustive deps)를 적용해야 하는 Hook을 정규식으로 지정합니다. **참고:**이 규칙별 옵션을 지정하면 공유 `settings`설정보다 우선 적용됩니다.
React Compiler directives are special string literals that control whether specific functions are compiled.
6
+
React 컴파일러 지시어는 특정 함수에 대한 컴파일 적용 여부를 제어하는 특수 문자열 리터럴입니다.
7
7
</Intro>
8
8
9
9
```js
10
10
functionMyComponent() {
11
-
"use memo"; //Opt this component into compilation
11
+
"use memo"; //이 컴포넌트를 컴파일 대상으로 설정합니다
12
12
return<div>{/* ... */}</div>;
13
13
}
14
14
```
@@ -17,53 +17,53 @@ function MyComponent() {
17
17
18
18
---
19
19
20
-
## Overview {/*overview*/}
20
+
## 개요 {/*overview*/}
21
21
22
-
React Compiler directives provide fine-grained control over which functions are optimized by the compiler. They are string literals placed at the beginning of a function body or at the top of a module.
22
+
React 컴파일러 지시어는 컴파일러가 최적화할 함수를 세밀하게 제어할 수 있도록 합니다. 함수 본문의 시작 부분이나 모듈의 최상단에 배치되는 문자열 리터럴입니다.
23
23
24
-
### Available directives {/*available-directives*/}
24
+
### 사용 가능한 지시어 {/*available-directives*/}
25
25
26
-
***[`"use memo"`](/reference/react-compiler/directives/use-memo)** - Opts a function into compilation
27
-
***[`"use no memo"`](/reference/react-compiler/directives/use-no-memo)** - Opts a function out of compilation
26
+
***[`"use memo"`](/reference/react-compiler/directives/use-memo)** - 함수를 컴파일 대상으로 선택합니다
27
+
***[`"use no memo"`](/reference/react-compiler/directives/use-no-memo)** - 함수를 컴파일 대상에서 제외합니다
28
28
29
-
### Quick comparison {/*quick-comparison*/}
29
+
### 빠른 비교 {/*quick-comparison*/}
30
30
31
-
|Directive|Purpose|When to use|
31
+
|지시어|목적|사용 시점|
32
32
|-----------|---------|-------------|
33
-
|[`"use memo"`](/reference/react-compiler/directives/use-memo)|Force compilation|When using `annotation`mode or to override `infer`mode heuristics|
34
-
|[`"use no memo"`](/reference/react-compiler/directives/use-no-memo)|Prevent compilation|Debugging issues or working with incompatible code|
0 commit comments