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
This warning will fire if you attempt to render a DOM element with an `aria-*` prop that does not exist in the Web Accessibility Initiative (WAI) Accessible Rich Internet Application (ARIA) [specification](https://www.w3.org/TR/wai-aria-1.1/#states_and_properties).
5
+
이 경고는 Web Accessibility Initiative (WAI) Accessible Rich Internet Application (ARIA) [명세](https://www.w3.org/TR/wai-aria-1.1/#states_and_properties)에 존재하지 않는 `aria-*` 프로퍼티를 가진 DOM 요소를 렌더링하려고 할 때 발생합니다.
6
6
7
-
1.If you feel that you are using a valid prop, check the spelling carefully. `aria-labelledby` and `aria-activedescendant` are often misspelled.
7
+
1.유효한 prop을 사용하고 있다고 생각하는 경우 철자를 주의 깊게 확인해 보세요. `aria-labelledby`와 `aria-activedescendant`는 철자 실수가 잦습니다.
8
8
9
-
2.If you wrote `aria-role`, you may have meant `role`.
9
+
2.`aria-role`을 작성한 경우 `role`을 사용하려고 한 것일 수 있습니다.
10
10
11
-
3.Otherwise, if you're on the latest version of React DOM and verified that you're using a valid property name listed in the ARIA specification, please [report a bug](https://github.com/facebook/react/issues/new/choose).
11
+
3.그렇지 않은 경우, 최신 버전의 React DOM을 사용하고 ARIA 명세에 나열된 유효한 프로퍼티 이름을 사용하고 있는지 확인한 경우 [버그를 보고해 주세요](https://github.com/facebook/react/issues/new/choose).
You are probably here because you got the following error message:
5
+
아래와 같은 오류 메시지를 받았기 때문에 여기에 오신 것 같습니다:
6
6
7
7
<ConsoleBlocklevel="error">
8
8
9
9
Hooks can only be called inside the body of a function component.
10
10
11
11
</ConsoleBlock>
12
12
13
-
There are three common reasons you might be seeing it:
13
+
이 오류 메시지를 보는 이유는 보통 다음과 같습니다:
14
14
15
-
1.You might be **breaking the Rules of Hooks**.
16
-
2.You might have**mismatching versions**of React and React DOM.
17
-
3.You might have **more than one copy of React** in the same app.
15
+
1.**Hooks의 규칙을 위반**했을 수 있습니다.
16
+
2.React와 React DOM의**버전이 일치하지 않을**수 있습니다.
17
+
3.동일한 앱에서 **여러 개의 React 복사본**이 있을 수 있습니다.
18
18
19
-
Let's look at each of these cases.
19
+
이러한 경우들을 살펴보겠습니다.
20
20
21
-
## Breaking Rules of Hooks {/*breaking-rules-of-hooks*/}
21
+
## Hooks의 규칙을 위반 {/*breaking-rules-of-hooks*/}
22
22
23
-
Functions whose names start with `use` are called[*Hooks*](/reference/react) in React.
23
+
React에서 `use`로 시작하는 함수를[*Hooks*](/reference/react)라고 합니다.
24
24
25
-
**Don’t call Hooks inside loops, conditions, or nested functions.**Instead, always use Hooks at the top level of your React function, before any early returns. You can only call Hooks while React is rendering a function component:
25
+
**루프, 조건문 또는 중첩된 함수 내에서 Hooks를 호출하지 마세요.**대신 Hooks를 항상 React 함수의 최상위 수준에서, return문 전에 사용하세요. Hooks는 React가 함수형 컴포넌트를 렌더링하는 동안에만 호출할 수 있습니다:
26
26
27
-
* ✅ Call them at the top level in the body of a [function component](/learn/your-first-component).
28
-
* ✅ Call them at the top level in the body of a [custom Hook](/learn/reusing-logic-with-custom-hooks).
27
+
* ✅ [함수형 컴포넌트](/learn/your-first-component)의 본문의 최상위 수준에서 호출하세요.
28
+
* ✅ [사용자정의 Hook](/learn/reusing-logic-with-custom-hooks)의 본문에서 최상위 수준에서 호출하세요.
It’s **not** supported to call Hooks (functions starting with `use`) in any other cases, for example:
44
+
그 외의 경우에는 Hooks(이름이 `use`로 시작하는 함수)를 호출하는 것은 지원되지 **않습니다**. 예를 들어:
45
45
46
-
* 🔴 Do not call Hooks inside conditions or loops.
47
-
* 🔴 Do not call Hooks after a conditional `return` statement.
48
-
* 🔴 Do not call Hooks in event handlers.
49
-
* 🔴 Do not call Hooks in class components.
50
-
* 🔴 Do not call Hooks inside functions passed to `useMemo`, `useReducer`, or`useEffect`.
46
+
🔴 조건문 또는 루프 내에서 Hooks를 호출하지 마세요.
47
+
🔴 조건부 `return` 문 이후에 Hooks를 호출하지 마세요.
48
+
🔴 이벤트 핸들러에서 Hooks를 호출하지 마세요.
49
+
🔴 클래스형 컴포넌트에서 Hooks를 호출하지 마세요.
50
+
🔴 `useMemo`, `useReducer`, 또는`useEffect`에 전달되는 함수 내에서 Hooks를 호출하지 마세요.
51
51
52
-
If you break these rules, you might see this error.
52
+
이러한 규칙을 어긴다면 이 오류를 볼 수 있습니다.
53
53
54
54
```js{3-4,11-12,20-21}
55
55
function Bad({ cond }) {
56
56
if (cond) {
57
-
// 🔴 Bad: inside a condition (to fix, move it outside!)
57
+
// 🔴 잘못된 예: 조건문 내부 (해결하기 위해서는 밖으로 옮겨주세요!)
58
58
const theme = useContext(ThemeContext);
59
59
}
60
60
// ...
61
61
}
62
62
63
63
function Bad() {
64
64
for (let i = 0; i < 10; i++) {
65
-
// 🔴 Bad: inside a loop (to fix, move it outside!)
65
+
// 🔴 잘못된 예: 루프 내부 (해결하기 위해서는 밖으로 옮겨주세요!)
66
66
const theme = useContext(ThemeContext);
67
67
}
68
68
// ...
@@ -72,22 +72,22 @@ function Bad({ cond }) {
72
72
if (cond) {
73
73
return;
74
74
}
75
-
// 🔴 Bad: after a conditional return (to fix, move it before the return!)
75
+
// 🔴 잘못된 예: 조건부 반환 이후 (해결하기 위해서는 return문 보다 전으로 옮겨주세요!)
76
76
const theme = useContext(ThemeContext);
77
77
// ...
78
78
}
79
79
80
80
function Bad() {
81
81
function handleClick() {
82
-
// 🔴 Bad: inside an event handler (to fix, move it outside!)
82
+
// 🔴 잘못된 예: 이벤트 핸들러 내부 (해결하기 위해서는 밖으로 옮겨주세요!)
83
83
const theme = useContext(ThemeContext);
84
84
}
85
85
// ...
86
86
}
87
87
88
88
function Bad() {
89
89
const style = useMemo(() => {
90
-
// 🔴 Bad: inside useMemo (to fix, move it outside!)
90
+
// 🔴 잘못된 예: useMemo 내부 (해결하기 위해서는 밖으로 옮겨주세요!)
91
91
const theme = useContext(ThemeContext);
92
92
return createStyle(theme);
93
93
});
@@ -96,63 +96,63 @@ function Bad() {
96
96
97
97
class Bad extends React.Component {
98
98
render() {
99
-
// 🔴 Bad: inside a class component (to fix, write a function component instead of a class!)
99
+
// 🔴 잘못된 예: 클래스 컴포넌트 내부 (해결하기 위해서는 클래스형 대신 함수형 컴포넌트를 작성해주세요!)
100
100
useEffect(() => {})
101
101
// ...
102
102
}
103
103
}
104
104
```
105
105
106
-
You can use the [`eslint-plugin-react-hooks` plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks) to catch these mistakes.
106
+
이러한 실수를 잡기 위해 [eslint-plugin-react-hooks 플러그인](https://www.npmjs.com/package/eslint-plugin-react-hooks)을 사용할 수 있습니다.
107
107
108
108
<Note>
109
109
110
-
[Custom Hooks](/learn/reusing-logic-with-custom-hooks)*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.
110
+
[사용자 정의 Hook](/learn/reusing-logic-with-custom-hooks)은 다른 Hooks를 호출할 수 *있습니다* (그것이 사용자 정의 Hook의 목적이기 때문입니다). 이는 사용자 정의 Hook도 함수형 컴포넌트가 렌더링되는 동안에만 호출되기 때문에 가능합니다.
111
111
112
112
</Note>
113
113
114
-
## Mismatching Versions of React and React DOM {/*mismatching-versions-of-react-and-react-dom*/}
114
+
## React와 React DOM 버전의 불일치 {/*mismatching-versions-of-react-and-react-dom*/}
115
115
116
-
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).
116
+
`react-dom` (< 16.8.0)이나 `react-native` (< 0.59)의 버전이 Hooks를 아직 지원하지 않을 수 있습니다. 애플리케이션 폴더에서 `npm ls react-dom`또는`npm ls react-native`을 실행하여 사용 중인 버전을 확인할 수 있습니다. 여러 개의 버전이 발견된 경우에도, 문제를 일으킬 수 있습니다(아래에서 더 자세히 설명합니다).
117
117
118
-
## Duplicate React {/*duplicate-react*/}
118
+
## 중복된 React {/*duplicate-react*/}
119
119
120
-
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.
120
+
Hooks가 작동하려면 애플리케이션 코드에서 가져온 `react`의 import가 react-dom 패키지 내부에서 가져온 `react`import와 동일한 모듈을 가져와야 합니다.
121
121
122
-
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.
122
+
이러한 `react`import가 두 개의 다른 exports 객체를 가져온다면, 이 경고가 표시됩니다. 이는 실수로 **두 개의 `react` 패키지 사본이 생긴 경우**에 발생할 수 있습니다.
123
123
124
-
If you use Node for package management, you can run this check in your project folder:
124
+
패키지 관리를 위해 Node를 사용하는 경우 프로젝트 폴더에서 다음을 실행하여 이를 확인할 수 있습니다:
125
125
126
126
<TerminalBlock>
127
127
128
128
npm ls react
129
129
130
130
</TerminalBlock>
131
131
132
-
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.
132
+
만약 두 개 이상의 React가 보일 경우, 이러한 상황이 발생한 이유를 찾고 의존성 트리를 수정해야 합니다. 예를 들어, 사용 중인 라이브러리가 `react`를 피어 종속성(peer dependency)이 아닌 종속성(dependency)으로 잘못 지정한 경우입니다. 해당 라이브러리가 수정되기 전까지는 [Yarn resolutions](https://yarnpkg.com/lang/en/docs/selective-version-resolutions/)이 가능한 해결책입니다.
133
133
134
-
You can also try to debug this problem by adding some logs and restarting your development server:
134
+
또한 몇 가지 로그를 추가하고 개발 서버를 다시 시작하여 이 문제를 디버깅해 볼 수도 있습니다:
135
135
136
136
```js
137
-
//Add this in node_modules/react-dom/index.js
137
+
// node_modules/react-dom/index.js에 추가
138
138
window.React1=require('react');
139
139
140
-
//Add this in your component file
140
+
//컴포넌트 파일에 추가
141
141
require('react-dom');
142
142
window.React2=require('react');
143
143
console.log(window.React1===window.React2);
144
144
```
145
145
146
-
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.
146
+
만약 `false`가 출력된다면 두 개의 React가 있을 수 있으며, 이러한 상황이 발생한 이유를 찾아야 합니다. [이 이슈](https://github.com/facebook/react/issues/13991)는 커뮤니티에서 발견한 일반적인 원인에 대해 설명하고 있습니다.
147
147
148
-
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.
148
+
이 문제는 `npm link`또는 유사한 기능을 사용할 때에도 발생할 수 있습니다. 이 경우 번들러는 2개의 React - 애플리케이션 폴더와 라이브러리 폴더에서 각각 하나씩을 "보게" 될 수 있습니다. `myapp`과 `mylib`이 형제 폴더라고 가정하면, `mylib`에서 `npm link ../myapp/node_modules/react`를 실행하여 라이브러리가 애플리케이션의 React 복사본을 사용하도록 할 수 있습니다.
149
149
150
150
<Note>
151
151
152
-
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.
152
+
일반적으로 React는 한 페이지에서 여러 개의 독립적인 복사본을 사용할 수 있습니다 (예를 들어 앱과 타사 위젯이 모두 사용하는 경우). 문제는 컴포넌트와 그것과 함께 렌더링된 `react-dom` 복사본에서 `require('react')`가 다르게 처리된 경우에만 발생합니다.
153
153
154
154
</Note>
155
155
156
-
## Other Causes {/*other-causes*/}
156
+
## 기타 원인 {/*other-causes*/}
157
157
158
-
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.
158
+
만약 이 모든 방법이 도움이 되지 않는다면, [이 이슈](https://github.com/facebook/react/issues/13991)에 의견을 남기고 도움을 요청하세요. 작은 재현 가능한 예제를 만들어보면 문제를 발견할 수 있을 수도 있습니다.
Most props on a JSX element are passed on to the component, however, there are two special props(`ref` and `key`) which are used by React, and are thus not forwarded to the component.
5
+
JSX 요소의 대부분의 props는 컴포넌트로 전달됩니다. 그러나 두 가지 특별한 props(`ref`와 `key`)는 React에서 사용되므로 컴포넌트로 전달되지 않습니다.
6
6
7
-
For instance, you can't read `props.key` from a component. If you need to access the same value within the child component, you should pass it as a different prop (ex: `<ListItemWrapper key={result.id} id={result.id} />` and read`props.id`). While this may seem redundant, it's important to separate app logic from hints to React.
7
+
예를 들어, 컴포넌트에서 `props.key`를 읽을 수는 없습니다. 자식 컴포넌트 내에서 동일한 값을 액세스해야 하는 경우 다른 prop으로 전달해야 합니다. (예:`<ListItemWrapper key={result.id} id={result.id} />`와 같이 전달하고`props.id`를 읽습니다.). 이는 불필요한 중복처럼 보일 수 있지만, 앱 로직을 React의 힌트와 분리하는 것이 중요합니다.
0 commit comments