Skip to content

Commit 01520c3

Browse files
committed
Fix translation
1 parent 0dd9daa commit 01520c3

File tree

1 file changed

+19
-17
lines changed

1 file changed

+19
-17
lines changed

Diff for: content/warnings/invalid-hook-call-warning.md

+19-17
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,9 @@ permalink: warnings/invalid-hook-call-warning.html
66

77
다음과 같은 오류 메시지가 나왔기 때문에 여기에 있을 것입니다.
88

9-
> Hooks can only be called inside the body of a function component. (Hooks는 함수 컴포넌트의 본문 내에서만 호출할 수 있습니다.)
9+
> Hooks can only be called inside the body of a function component.
10+
>
11+
> (Hooks는 함수 컴포넌트의 본문 내에서만 호출할 수 있습니다.)
1012
1113
다음 세 가지 일반적인 이유로 이 오류 메시지를 보게 됩니다.
1214

@@ -19,51 +21,51 @@ permalink: warnings/invalid-hook-call-warning.html
1921
## React와 React DOM의 버전 불일치 {#mismatching-versions-of-react-and-react-dom}
2022

2123
Hooks를 아직 지원하지 않는`react-dom`(<16.8.0) 또는`react-native` (<0.59)의 버전을 사용 중일 수 있습니다.
22-
애플리케이션 폴더에서 `npm ls react-dom` 또는 `npm ls react-native`를 실행하여 사용 중인 버전을 확인할 수 있습니다. 만약 한 개보다 많이 나오면 문제가 발생할 수도 있습니다. (아래에서 자세히 설명)
24+
애플리케이션 폴더에서 `npm ls react-dom` 또는 `npm ls react-native`를 실행하여 사용 중인 버전을 확인할 수 있습니다. 만약 한 개보다 많이 나오면 문제가 발생할 수도 있습니다. (아래에서 자세히 설명합니다.)
2325

2426
## Hooks 규칙 위반 {#breaking-the-rules-of-hooks}
2527

2628
React에서 **함수 컴포넌트를 렌더링하는 동안**에만 Hooks를 호출할 수 있습니다.
2729

28-
* ✅ 함수 컴포넌트 본문의 최상위 레벨에서 호출하십시오.
29-
*[사용자 정의 Hook](/docs/hooks-custom.html) 본체의 최상위 레벨에서 호출하십시오.
30+
* ✅ 함수 컴포넌트 본문의 최상위 레벨에서 호출하세요.
31+
*[사용자 정의 Hook](/docs/hooks-custom.html) 본체의 최상위 레벨에서 호출하세요.
3032

3133
**이에 대한 자세한 내용은 [Hooks 규칙](/docs/hooks-rules.html)에서 알아보세요.**
3234

3335
```js{2-3,8-9}
3436
function Counter() {
35-
// ✅ Good: 함수 컴포넌트의 최상위 레벨
37+
// ✅ 권장: 함수 컴포넌트의 최상위 레벨
3638
const [count, setCount] = useState(0);
3739
// ...
3840
}
3941
4042
function useWindowWidth() {
41-
// ✅ Good: 사용자 정의 Hook의 최상위 레벨
43+
// ✅ 권장: 사용자 정의 Hook의 최상위 레벨
4244
const [width, setWidth] = useState(window.innerWidth);
4345
// ...
4446
}
4547
```
4648

4749
혼란을 주지 않기 위해 다른 경우에는 Hooks를 호출하는 것이 지원되지 **않습니다**.
4850

49-
* 🔴 클래스 컴포넌트에서 Hooks를 호출하지 마십시오.
50-
* 🔴 이벤트 핸들러에서 호출하지 마십시오.
51-
* 🔴 `useMemo`, `useReducer` 또는 `useEffect`에 전달 된 함수 내에서 Hooks를 호출하지 마십시오.
51+
* 🔴 클래스 컴포넌트에서 Hooks를 호출하지 마세요.
52+
* 🔴 이벤트 핸들러에서 호출하지 마세요.
53+
* 🔴 `useMemo`, `useReducer` 또는 `useEffect`에 전달 된 함수 내에서 Hooks를 호출하지 마세요.
5254

5355
이러한 규칙을 위반하면 아래와 같은 오류가 표시될 수 있습니다.
5456

5557
```js{3-4,11-12,20-21}
5658
function Bad1() {
5759
function handleClick() {
58-
// 🔴 Bad: 이벤트 핸들러 내에서 사용 (고치려면 바깥으로 옮기십시오!)
60+
// 🔴 금지: 이벤트 핸들러 내에서 사용 (고치려면 바깥으로 옮기세요!)
5961
const theme = useContext(ThemeContext);
6062
}
6163
// ...
6264
}
6365
6466
function Bad2() {
6567
const style = useMemo(() => {
66-
// 🔴 Bad: useMemo 안에서 사용 (고치려면 바깥으로 옮기십시오!)
68+
// 🔴 금지: useMemo 안에서 사용 (고치려면 바깥으로 옮기세요!)
6769
const theme = useContext(ThemeContext);
6870
return createStyle(theme);
6971
});
@@ -72,7 +74,7 @@ function Bad2() {
7274
7375
class Bad3 extends React.Component {
7476
render() {
75-
// 🔴 Bad: 클래스 컴포넌트 안에서 사용
77+
// 🔴 금지: 클래스 컴포넌트 안에서 사용
7678
useEffect(() => {})
7779
// ...
7880
}
@@ -83,7 +85,7 @@ class Bad3 extends React.Component {
8385

8486
>주의
8587
>
86-
>[사용자 정의 Hooks](/docs/hooks-custom.html)는 다른 Hooks를 호출 *할 수도* 있습니다 (이것이 사용자 정의 Hooks의 목적입니다). 사용자 정의 Hooks도 함수 컴포넌트가 렌더링되는 동안에만 호출 되도록 되어있기 때문에 문제없이 동작 합니다.
88+
>[사용자 정의 Hooks](/docs/hooks-custom.html)는 다른 Hooks를 호출*할 수도* 있습니다 (이것이 사용자 정의 Hooks의 목적입니다). 사용자 정의 Hooks도 함수 컴포넌트가 렌더링되는 동안에만 호출되도록 되어있기 때문에 문제없이 동작합니다.
8789
8890
## React 중복 {#duplicate-react}
8991

@@ -100,10 +102,10 @@ Node 패키지 매니저(NPM)를 사용하는 경우 프로젝트 폴더에서
100102
또한 로그를 추가하거나 개발 서버를 다시 시작해서 이 문제를 디버깅 할 수 있습니다.
101103

102104
```js
103-
// node_modules/react-dom/index.js 아래를 추가하십시오.
105+
// node_modules/react-dom/index.js에 아래를 추가하세요.
104106
window.React1 = require('react');
105107

106-
// 컴포넌트 파일에 아래를 추가하십시오.
108+
// 컴포넌트 파일에 아래를 추가하세요.
107109
require('react-dom');
108110
window.React2 = require('react');
109111
console.log(window.React1 === window.React2);
@@ -115,8 +117,8 @@ console.log(window.React1 === window.React2);
115117

116118
>주의
117119
>
118-
>일반적으로 React는 한 페이지에서 여러 독립된 사본을 사용하도록 지원합니다 (예시: 앱과 서드파티 위젯 모두에서 사용하는 경우). 렌더링 된 컴포넌트와 `react-dom`간에 `require('react')`를 다르게 참조되는 경우에만 깨집니다.
120+
>일반적으로 React는 한 페이지에서 여러 독립된 사본을 사용하도록 지원합니다 (예시: 앱과 서드 파티 위젯 모두에서 사용하는 경우). 렌더링 된 컴포넌트와 `react-dom`간에 `require('react')`를 다르게 참조되는 경우에만 깨집니다.
119121
120122
## 다른 원인 {#other-causes}
121123

122-
이 모든게 도움이 되지 않았다면 [이 이슈](https://github.com/facebook/react/issues/13991)에 코멘트를 남기십시오. 그러면 도와 드리겠습니다. 작은 재현 예제를 만들어보면 그 문제를 발견 할지도 모릅니다.
124+
이 모든게 도움이 되지 않았다면 [이 이슈](https://github.com/facebook/react/issues/13991)에 코멘트를 남기세요. 그러면 도와 드리겠습니다. 재현할 수 있는 작은 예시를 만들어보면 그 문제를 발견 할지도 모릅니다.

0 commit comments

Comments
 (0)