Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Translate Invalid Hook Call Warning #61

Merged
merged 2 commits into from
Mar 6, 2019
Merged

Translate Invalid Hook Call Warning #61

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0dd9daa
Translate Invalid Hook Call Warning
simsim0709 Mar 3, 2019
01520c3
Fix translation
simsim0709 Mar 5, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 44 additions & 42 deletions content/warnings/invalid-hook-call-warning.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,65 +4,68 @@ layout: single
permalink: warnings/invalid-hook-call-warning.html
---

You are probably here because you got the following error message:
다음과 같은 오류 메시지가 나왔기 때문에 여기에 있을 것입니다.

> Hooks can only be called inside the body of a function component.
> Hooks can only be called inside the body of a function component.
>
> (Hooks는 함수 컴포넌트의 본문 내에서만 호출할 수 있습니다.)

There are three common reasons you might be seeing it:
다음 세 가지 일반적인 이유로 이 오류 메시지를 보게 됩니다.

1. You might have **mismatching versions** of React and React DOM.
2. You might be **breaking the [Rules of Hooks](/docs/hooks-rules.html)**.
3. You might have **more than one copy of React** in the same app.
1. React와 React DOM의 **버전이 일치하지 않을 수 있습니다.**
2. **[Hooks 규칙](/docs/hooks-rules.html)을 위반했을 수 있습니다.**
3. 같은 앱에 **React가 한 개 이상**있을 수 있습니다.

Let's look at each of these cases.
각각의 경우를 살펴보겠습니다.

## Mismatching Versions of React and React DOM {#mismatching-versions-of-react-and-react-dom}
## React와 React DOM의 버전 불일치 {#mismatching-versions-of-react-and-react-dom}

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

## Breaking the Rules of Hooks {#breaking-the-rules-of-hooks}
## Hooks 규칙 위반 {#breaking-the-rules-of-hooks}

You can only call Hooks **while React is rendering a function component**:
React에서 **함수 컴포넌트를 렌더링하는 동안**에만 Hooks를 호출할 수 있습니다.

* ✅ Call them at the top level in the body of a function component.
* ✅ Call them at the top level in the body of a [custom Hook](/docs/hooks-custom.html).
* ✅ 함수 컴포넌트 본문의 최상위 레벨에서 호출하세요.
* ✅ [사용자 정의 Hook](/docs/hooks-custom.html) 본체의 최상위 레벨에서 호출하세요.

**Learn more about this in the [Rules of Hooks](/docs/hooks-rules.html).**
**이에 대한 자세한 내용은 [Hooks 규칙](/docs/hooks-rules.html)에서 알아보세요.**

```js{2-3,8-9}
function Counter() {
// ✅ Good: top-level in a function component
// ✅ 권장: 함수 컴포넌트의 최상위 레벨
const [count, setCount] = useState(0);
// ...
}

function useWindowWidth() {
// ✅ Good: top-level in a custom Hook
// ✅ 권장: 사용자 정의 Hook의 최상위 레벨
const [width, setWidth] = useState(window.innerWidth);
// ...
}
```

To avoid confusion, it’s **not** supported to call Hooks in other cases:
혼란을 주지 않기 위해 다른 경우에는 Hooks를 호출하는 것이 지원되지 **않습니다**.

* 🔴 Do not call Hooks in class components.
* 🔴 Do not call in event handlers.
* 🔴 Do not call Hooks inside functions passed to `useMemo`, `useReducer`, or `useEffect`.
* 🔴 클래스 컴포넌트에서 Hooks를 호출하지 마세요.
* 🔴 이벤트 핸들러에서 호출하지 마세요.
* 🔴 `useMemo`, `useReducer` 또는 `useEffect`에 전달 된 함수 내에서 Hooks를 호출하지 마세요.

If you break these rules, you might see this error.
이러한 규칙을 위반하면 아래와 같은 오류가 표시될 수 있습니다.

```js{3-4,11-12,20-21}
function Bad1() {
function handleClick() {
// 🔴 Bad: inside an event handler (to fix, move it outside!)
// 🔴 금지: 이벤트 핸들러 내에서 사용 (고치려면 바깥으로 옮기세요!)
const theme = useContext(ThemeContext);
}
// ...
}

function Bad2() {
const style = useMemo(() => {
// 🔴 Bad: inside useMemo (to fix, move it outside!)
// 🔴 금지: useMemo 안에서 사용 (고치려면 바깥으로 옮기세요!)
const theme = useContext(ThemeContext);
return createStyle(theme);
});
Expand All @@ -71,52 +74,51 @@ function Bad2() {

class Bad3 extends React.Component {
render() {
// 🔴 Bad: inside a class component
// 🔴 금지: 클래스 컴포넌트 안에서 사용
useEffect(() => {})
// ...
}
}
```

You can use the [`eslint-plugin-react-hooks` plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks) to catch some of these mistakes.
이런 실수를 방지하기 위해 [`eslint-plugin-react-hooks` 플러그인](https://www.npmjs.com/package/eslint-plugin-react-hooks)을 사용 할 수 있습니다.

>Note
>주의
>
>[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.
>[사용자 정의 Hooks](/docs/hooks-custom.html)는 다른 Hooks를 호출*할 수도* 있습니다 (이것이 사용자 정의 Hooks의 목적입니다). 사용자 정의 Hooks도 함수 컴포넌트가 렌더링되는 동안에만 호출되도록 되어있기 때문에 문제없이 동작합니다.

## React 중복 {#duplicate-react}

## Duplicate React {#duplicate-react}
Hooks가 작동하려면 애플리케이션 코드에서 가져온 `react`가 `react-dom` 패키지 내부에서 가져온 `react`와 같은 모듈이어야 합니다.

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.
가져온 `react`가 서로 다른 곳에서 왔을 때 이 경고가 표시됩니다. **실수로 `react` 패키지의 두 복사본**이 있는 경우에 이런 일이 발생할 수 있습니다.

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.

If you use Node for package management, you can run this check in your project folder:
Node 패키지 매니저(NPM)를 사용하는 경우 프로젝트 폴더에서 아래 명령어를 통해 확인 해볼 수 있습니다.

npm ls react

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.
하나 이상의 React가 표시되면 왜 이런 일이 발생하는지 파악하고 의존성 트리를 수정해야합니다. 예를 들어, 사용 중인 라이브러리에서 `react`를 피어 의존성(peer dependency)이 아닌 의존성(dependency)으로 지정했을 수도 있습니다. 해당 라이브러리가 수정 될 때까지, [Yarn resolution](https://yarnpkg.com/lang/en/docs/selective-version-resolutions/)이 이 문제의 해결 방안 중 하나입니다.

You can also try to debug this problem by adding some logs and restarting your development server:
또한 로그를 추가하거나 개발 서버를 다시 시작해서 이 문제를 디버깅 할 수 있습니다.

```js
// Add this in node_modules/react-dom/index.js
// node_modules/react-dom/index.js에 아래를 추가하세요.
window.React1 = require('react');

// Add this in your component file
// 컴포넌트 파일에 아래를 추가하세요.
require('react-dom');
window.React2 = require('react');
console.log(window.React1 === window.React2);
```

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.
`false`가 출력되면 두 개의 React가 있는 것이고 그 이유를 알아낼 필요가 있습니다. [이 이슈](https://github.com/facebook/react/issues/13991)에는 커뮤니티에서 흔히 발생하는 몇 가지 일반적인 이유를 확인 할 수 있습니다.

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.
이 문제는 `npm link` 같은 것을 사용할 때 나타날 수 있습니다. 이 경우 하나는 애플리케이션 폴더에, 다른 하나는 라이브러리 폴더에 React가 있는 것을 볼 수 있을지 모릅니다. `myapp`과 `mylib`이 형제 폴더라고 가정 할 때, 한가지 가능한 해결책은 `mylib`에서 `npm link ../myapp/node_modules/react`를 실행하는 것입니다. 이렇게하면 라이브러리가 애플리케이션의 React를 사용하게 합니다.

>Note
>주의
>
>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.
>일반적으로 React는 한 페이지에서 여러 독립된 사본을 사용하도록 지원합니다 (예시: 앱과 서드 파티 위젯 모두에서 사용하는 경우). 렌더링 된 컴포넌트와 `react-dom`간에 `require('react')`를 다르게 참조되는 경우에만 깨집니다.

## Other Causes {#other-causes}
## 다른 원인 {#other-causes}

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