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
혼란을 주지 않기 위해 다른 경우에는 Hooks를 호출하는 것이 지원되지 **않습니다**.
48
50
49
-
* 🔴 클래스 컴포넌트에서 Hooks를 호출하지 마십시오.
50
-
* 🔴 이벤트 핸들러에서 호출하지 마십시오.
51
-
* 🔴 `useMemo`, `useReducer` 또는 `useEffect`에 전달 된 함수 내에서 Hooks를 호출하지 마십시오.
51
+
* 🔴 클래스 컴포넌트에서 Hooks를 호출하지 마세요.
52
+
* 🔴 이벤트 핸들러에서 호출하지 마세요.
53
+
* 🔴 `useMemo`, `useReducer` 또는 `useEffect`에 전달 된 함수 내에서 Hooks를 호출하지 마세요.
52
54
53
55
이러한 규칙을 위반하면 아래와 같은 오류가 표시될 수 있습니다.
54
56
55
57
```js{3-4,11-12,20-21}
56
58
function Bad1() {
57
59
function handleClick() {
58
-
// 🔴 Bad: 이벤트 핸들러 내에서 사용 (고치려면 바깥으로 옮기십시오!)
60
+
// 🔴 금지: 이벤트 핸들러 내에서 사용 (고치려면 바깥으로 옮기세요!)
59
61
const theme = useContext(ThemeContext);
60
62
}
61
63
// ...
62
64
}
63
65
64
66
function Bad2() {
65
67
const style = useMemo(() => {
66
-
// 🔴 Bad: useMemo 안에서 사용 (고치려면 바깥으로 옮기십시오!)
68
+
// 🔴 금지: useMemo 안에서 사용 (고치려면 바깥으로 옮기세요!)
67
69
const theme = useContext(ThemeContext);
68
70
return createStyle(theme);
69
71
});
@@ -72,7 +74,7 @@ function Bad2() {
72
74
73
75
class Bad3 extends React.Component {
74
76
render() {
75
-
// 🔴 Bad: 클래스 컴포넌트 안에서 사용
77
+
// 🔴 금지: 클래스 컴포넌트 안에서 사용
76
78
useEffect(() => {})
77
79
// ...
78
80
}
@@ -83,7 +85,7 @@ class Bad3 extends React.Component {
83
85
84
86
>주의
85
87
>
86
-
>[사용자 정의 Hooks](/docs/hooks-custom.html)는 다른 Hooks를 호출*할 수도* 있습니다 (이것이 사용자 정의 Hooks의 목적입니다). 사용자 정의 Hooks도 함수 컴포넌트가 렌더링되는 동안에만 호출 되도록 되어있기 때문에 문제없이 동작 합니다.
88
+
>[사용자 정의 Hooks](/docs/hooks-custom.html)는 다른 Hooks를 호출*할 수도* 있습니다 (이것이 사용자 정의 Hooks의 목적입니다). 사용자 정의 Hooks도 함수 컴포넌트가 렌더링되는 동안에만 호출되도록 되어있기 때문에 문제없이 동작합니다.
87
89
88
90
## React 중복 {#duplicate-react}
89
91
@@ -100,10 +102,10 @@ Node 패키지 매니저(NPM)를 사용하는 경우 프로젝트 폴더에서
>일반적으로 React는 한 페이지에서 여러 독립된 사본을 사용하도록 지원합니다 (예시: 앱과 서드파티 위젯 모두에서 사용하는 경우). 렌더링 된 컴포넌트와 `react-dom`간에 `require('react')`를 다르게 참조되는 경우에만 깨집니다.
120
+
>일반적으로 React는 한 페이지에서 여러 독립된 사본을 사용하도록 지원합니다 (예시: 앱과 서드 파티 위젯 모두에서 사용하는 경우). 렌더링 된 컴포넌트와 `react-dom`간에 `require('react')`를 다르게 참조되는 경우에만 깨집니다.
119
121
120
122
## 다른 원인 {#other-causes}
121
123
122
-
이 모든게 도움이 되지 않았다면 [이 이슈](https://github.com/facebook/react/issues/13991)에 코멘트를 남기십시오. 그러면 도와 드리겠습니다. 작은 재현 예제를 만들어보면 그 문제를 발견 할지도 모릅니다.
124
+
이 모든게 도움이 되지 않았다면 [이 이슈](https://github.com/facebook/react/issues/13991)에 코멘트를 남기세요. 그러면 도와 드리겠습니다. 재현할 수 있는 작은 예시를 만들어보면 그 문제를 발견 할지도 모릅니다.
0 commit comments