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
You are probably here because you got the following error message:
7
+
다음과 같은 오류 메시지가 나왔기 때문에 여기에 있을 것입니다.
8
8
9
-
> Hooks can only be called inside the body of a function component.
9
+
> Hooks can only be called inside the body of a function component.
10
+
>
11
+
> (Hooks는 함수 컴포넌트의 본문 내에서만 호출할 수 있습니다.)
10
12
11
-
There are three common reasons you might be seeing it:
13
+
다음 세 가지 일반적인 이유로 이 오류 메시지를 보게 됩니다.
12
14
13
-
1.You might have**mismatching versions** of React and React DOM.
14
-
2.You might be **breaking the [Rules of Hooks](/docs/hooks-rules.html)**.
15
-
3.You might have **more than one copy of React** in the same app.
15
+
1.React와 React DOM의**버전이 일치하지 않을 수 있습니다.**
16
+
2.**[Hooks 규칙](/docs/hooks-rules.html)을 위반했을 수 있습니다.**
17
+
3.같은 앱에 **React가 한 개 이상**있을 수 있습니다.
16
18
17
-
Let's look at each of these cases.
19
+
각각의 경우를 살펴보겠습니다.
18
20
19
-
## Mismatching Versions of React and React DOM {#mismatching-versions-of-react-and-react-dom}
21
+
## React와 React DOM의 버전 불일치 {#mismatching-versions-of-react-and-react-dom}
20
22
21
-
You might be using a version of `react-dom` (< 16.8.0) or `react-native` (< 0.59) that doesn't yet support Hooks. You can run `npm ls react-dom` or `npm ls react-native` in your application folder to check which version you're using. If you find more than one of them, this might also create problems (more on that below).
23
+
Hooks를 아직 지원하지 않는`react-dom`(<16.8.0) 또는`react-native` (<0.59)의 버전을 사용 중일 수 있습니다.
24
+
애플리케이션 폴더에서 `npm ls react-dom` 또는 `npm ls react-native`를 실행하여 사용 중인 버전을 확인할 수 있습니다. 만약 한 개보다 많이 나오면 문제가 발생할 수도 있습니다. (아래에서 자세히 설명합니다.)
22
25
23
-
## Breaking the Rules of Hooks {#breaking-the-rules-of-hooks}
26
+
## Hooks 규칙 위반 {#breaking-the-rules-of-hooks}
24
27
25
-
You can only call Hooks **while React is rendering a function component**:
28
+
React에서 **함수 컴포넌트를 렌더링하는 동안**에만 Hooks를 호출할 수 있습니다.
26
29
27
-
* ✅ Call them at the top level in the body of a function component.
28
-
* ✅ Call them at the top level in the body of a [custom Hook](/docs/hooks-custom.html).
30
+
* ✅ 함수 컴포넌트 본문의 최상위 레벨에서 호출하세요.
31
+
* ✅ [사용자 정의 Hook](/docs/hooks-custom.html) 본체의 최상위 레벨에서 호출하세요.
29
32
30
-
**Learn more about this in the [Rules of Hooks](/docs/hooks-rules.html).**
33
+
**이에 대한 자세한 내용은 [Hooks 규칙](/docs/hooks-rules.html)에서 알아보세요.**
To avoid confusion, it’s **not** supported to call Hooks in other cases:
49
+
혼란을 주지 않기 위해 다른 경우에는 Hooks를 호출하는 것이 지원되지 **않습니다**.
47
50
48
-
* 🔴 Do not call Hooks in class components.
49
-
* 🔴 Do not call in event handlers.
50
-
* 🔴 Do not call Hooks inside functions passed to `useMemo`, `useReducer`, or`useEffect`.
51
+
* 🔴 클래스 컴포넌트에서 Hooks를 호출하지 마세요.
52
+
* 🔴 이벤트 핸들러에서 호출하지 마세요.
53
+
* 🔴 `useMemo`, `useReducer` 또는`useEffect`에 전달 된 함수 내에서 Hooks를 호출하지 마세요.
51
54
52
-
If you break these rules, you might see this error.
55
+
이러한 규칙을 위반하면 아래와 같은 오류가 표시될 수 있습니다.
53
56
54
57
```js{3-4,11-12,20-21}
55
58
function Bad1() {
56
59
function handleClick() {
57
-
// 🔴 Bad: inside an event handler (to fix, move it outside!)
60
+
// 🔴 금지: 이벤트 핸들러 내에서 사용 (고치려면 바깥으로 옮기세요!)
58
61
const theme = useContext(ThemeContext);
59
62
}
60
63
// ...
61
64
}
62
65
63
66
function Bad2() {
64
67
const style = useMemo(() => {
65
-
// 🔴 Bad: inside useMemo (to fix, move it outside!)
68
+
// 🔴 금지: useMemo 안에서 사용 (고치려면 바깥으로 옮기세요!)
66
69
const theme = useContext(ThemeContext);
67
70
return createStyle(theme);
68
71
});
@@ -71,52 +74,51 @@ function Bad2() {
71
74
72
75
class Bad3 extends React.Component {
73
76
render() {
74
-
// 🔴 Bad: inside a class component
77
+
// 🔴 금지: 클래스 컴포넌트 안에서 사용
75
78
useEffect(() => {})
76
79
// ...
77
80
}
78
81
}
79
82
```
80
83
81
-
You can use the[`eslint-plugin-react-hooks`plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks) to catch some of these mistakes.
84
+
이런 실수를 방지하기 위해[`eslint-plugin-react-hooks`플러그인](https://www.npmjs.com/package/eslint-plugin-react-hooks)을 사용 할 수 있습니다.
82
85
83
-
>Note
86
+
>주의
84
87
>
85
-
>[Custom Hooks](/docs/hooks-custom.html)*may* call other Hooks (that's their whole purpose). This works because custom Hooks are also supposed to only be called while a function component is rendering.
88
+
>[사용자 정의 Hooks](/docs/hooks-custom.html)는 다른 Hooks를 호출*할 수도* 있습니다 (이것이 사용자 정의 Hooks의 목적입니다). 사용자 정의 Hooks도 함수 컴포넌트가 렌더링되는 동안에만 호출되도록 되어있기 때문에 문제없이 동작합니다.
86
89
90
+
## React 중복 {#duplicate-react}
87
91
88
-
## Duplicate React {#duplicate-react}
92
+
Hooks가 작동하려면 애플리케이션 코드에서 가져온 `react`가 `react-dom` 패키지 내부에서 가져온 `react`와 같은 모듈이어야 합니다.
89
93
90
-
In order for Hooks to work, the `react` import from your application code needs to resolve to the same module as the `react` import from inside the `react-dom` package.
94
+
가져온 `react`가 서로 다른 곳에서 왔을 때 이 경고가 표시됩니다. **실수로 `react` 패키지의 두 복사본**이 있는 경우에 이런 일이 발생할 수 있습니다.
91
95
92
-
If these `react` imports resolve to two different exports objects, you will see this warning. This may happen if you **accidentally end up with two copies** of the `react` package.
93
-
94
-
If you use Node for package management, you can run this check in your project folder:
96
+
Node 패키지 매니저(NPM)를 사용하는 경우 프로젝트 폴더에서 아래 명령어를 통해 확인 해볼 수 있습니다.
95
97
96
98
npm ls react
97
99
98
-
If you see more than one React, you'll need to figure out why this happens and fix your dependency tree. For example, maybe a library you're using incorrectly specifies `react` as a dependency (rather than a peer dependency). Until that library is fixed, [Yarn resolutions](https://yarnpkg.com/lang/en/docs/selective-version-resolutions/) is one possible workaround.
100
+
하나 이상의 React가 표시되면 왜 이런 일이 발생하는지 파악하고 의존성 트리를 수정해야합니다. 예를 들어, 사용 중인 라이브러리에서 `react`를 피어 의존성(peer dependency)이 아닌 의존성(dependency)으로 지정했을 수도 있습니다. 해당 라이브러리가 수정 될 때까지, [Yarn resolution](https://yarnpkg.com/lang/en/docs/selective-version-resolutions/)이 이 문제의 해결 방안 중 하나입니다.
99
101
100
-
You can also try to debug this problem by adding some logs and restarting your development server:
102
+
또한 로그를 추가하거나 개발 서버를 다시 시작해서 이 문제를 디버깅 할 수 있습니다.
101
103
102
104
```js
103
-
//Add this in node_modules/react-dom/index.js
105
+
// node_modules/react-dom/index.js에 아래를 추가하세요.
104
106
window.React1=require('react');
105
107
106
-
//Add this in your component file
108
+
//컴포넌트 파일에 아래를 추가하세요.
107
109
require('react-dom');
108
110
window.React2=require('react');
109
111
console.log(window.React1===window.React2);
110
112
```
111
113
112
-
If it prints `false` then you might have two Reacts and need to figure out why that happened. [This issue](https://github.com/facebook/react/issues/13991) includes some common reasons encountered by the community.
114
+
`false`가 출력되면 두 개의 React가 있는 것이고 그 이유를 알아낼 필요가 있습니다. [이 이슈](https://github.com/facebook/react/issues/13991)에는 커뮤니티에서 흔히 발생하는 몇 가지 일반적인 이유를 확인 할 수 있습니다.
113
115
114
-
This problem can also come up when you use `npm link`or an equivalent. In that case, your bundler might "see" two Reacts — one in application folder and one in your library folder. Assuming `myapp` and `mylib` are sibling folders, one possible fix is to run`npm link ../myapp/node_modules/react` from `mylib`. This should make the library use the application's React copy.
116
+
이 문제는 `npm link`같은 것을 사용할 때 나타날 수 있습니다. 이 경우 하나는 애플리케이션 폴더에, 다른 하나는 라이브러리 폴더에 React가 있는 것을 볼 수 있을지 모릅니다. `myapp`과 `mylib`이 형제 폴더라고 가정 할 때, 한가지 가능한 해결책은 `mylib`에서`npm link ../myapp/node_modules/react`를 실행하는 것입니다. 이렇게하면 라이브러리가 애플리케이션의 React를 사용하게 합니다.
115
117
116
-
>Note
118
+
>주의
117
119
>
118
-
>In general, React supports using multiple independent copies on one page (for example, if an app and a third-party widget both use it). It only breaks if`require('react')` resolves differently between the component and the `react-dom` copy it was rendered with.
120
+
>일반적으로 React는 한 페이지에서 여러 독립된 사본을 사용하도록 지원합니다 (예시: 앱과 서드 파티 위젯 모두에서 사용하는 경우). 렌더링 된 컴포넌트와 `react-dom`간에`require('react')`를 다르게 참조되는 경우에만 깨집니다.
119
121
120
-
## Other Causes {#other-causes}
122
+
## 다른 원인 {#other-causes}
121
123
122
-
If none of this worked, please comment in [this issue](https://github.com/facebook/react/issues/13991) and we'll try to help. Try to create a small reproducing example — you might discover the problem as you're doing it.
124
+
이 모든게 도움이 되지 않았다면 [이 이슈](https://github.com/facebook/react/issues/13991)에 코멘트를 남기세요. 그러면 도와 드리겠습니다. 재현할 수 있는 작은 예시를 만들어보면 그 문제를 발견 할지도 모릅니다.
0 commit comments