From 0dd9daa644d71cd3198a0104b53945cbe639ceb9 Mon Sep 17 00:00:00 2001 From: simsim0709 Date: Sun, 3 Mar 2019 22:19:18 +0900 Subject: [PATCH 1/2] Translate Invalid Hook Call Warning --- content/warnings/invalid-hook-call-warning.md | 84 +++++++++---------- 1 file changed, 42 insertions(+), 42 deletions(-) diff --git a/content/warnings/invalid-hook-call-warning.md b/content/warnings/invalid-hook-call-warning.md index 156578ec2..bdd69bb3b 100644 --- a/content/warnings/invalid-hook-call-warning.md +++ b/content/warnings/invalid-hook-call-warning.md @@ -4,57 +4,58 @@ 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 + // ✅ Good: 함수 컴포넌트의 최상위 레벨 const [count, setCount] = useState(0); // ... } function useWindowWidth() { - // ✅ Good: top-level in a custom Hook + // ✅ Good: 사용자 정의 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!) + // 🔴 Bad: 이벤트 핸들러 내에서 사용 (고치려면 바깥으로 옮기십시오!) const theme = useContext(ThemeContext); } // ... @@ -62,7 +63,7 @@ function Bad1() { function Bad2() { const style = useMemo(() => { - // 🔴 Bad: inside useMemo (to fix, move it outside!) + // 🔴 Bad: useMemo 안에서 사용 (고치려면 바깥으로 옮기십시오!) const theme = useContext(ThemeContext); return createStyle(theme); }); @@ -71,52 +72,51 @@ function Bad2() { class Bad3 extends React.Component { render() { - // 🔴 Bad: inside a class component + // 🔴 Bad: 클래스 컴포넌트 안에서 사용 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)에 코멘트를 남기십시오. 그러면 도와 드리겠습니다. 작은 재현 예제를 만들어보면 그 문제를 발견 할지도 모릅니다. From 01520c335390b55067f1981bb5fc68062d5781c5 Mon Sep 17 00:00:00 2001 From: simsim0709 Date: Tue, 5 Mar 2019 13:13:49 +0900 Subject: [PATCH 2/2] Fix translation --- content/warnings/invalid-hook-call-warning.md | 36 ++++++++++--------- 1 file changed, 19 insertions(+), 17 deletions(-) diff --git a/content/warnings/invalid-hook-call-warning.md b/content/warnings/invalid-hook-call-warning.md index bdd69bb3b..2f4e281e6 100644 --- a/content/warnings/invalid-hook-call-warning.md +++ b/content/warnings/invalid-hook-call-warning.md @@ -6,7 +6,9 @@ permalink: warnings/invalid-hook-call-warning.html 다음과 같은 오류 메시지가 나왔기 때문에 여기에 있을 것입니다. -> Hooks can only be called inside the body of a function component. (Hooks는 함수 컴포넌트의 본문 내에서만 호출할 수 있습니다.) +> Hooks can only be called inside the body of a function component. +> +> (Hooks는 함수 컴포넌트의 본문 내에서만 호출할 수 있습니다.) 다음 세 가지 일반적인 이유로 이 오류 메시지를 보게 됩니다. @@ -19,26 +21,26 @@ permalink: warnings/invalid-hook-call-warning.html ## React와 React DOM의 버전 불일치 {#mismatching-versions-of-react-and-react-dom} Hooks를 아직 지원하지 않는`react-dom`(<16.8.0) 또는`react-native` (<0.59)의 버전을 사용 중일 수 있습니다. -애플리케이션 폴더에서 `npm ls react-dom` 또는 `npm ls react-native`를 실행하여 사용 중인 버전을 확인할 수 있습니다. 만약 한 개보다 많이 나오면 문제가 발생할 수도 있습니다. (아래에서 자세히 설명) +애플리케이션 폴더에서 `npm ls react-dom` 또는 `npm ls react-native`를 실행하여 사용 중인 버전을 확인할 수 있습니다. 만약 한 개보다 많이 나오면 문제가 발생할 수도 있습니다. (아래에서 자세히 설명합니다.) ## Hooks 규칙 위반 {#breaking-the-rules-of-hooks} React에서 **함수 컴포넌트를 렌더링하는 동안**에만 Hooks를 호출할 수 있습니다. -* ✅ 함수 컴포넌트 본문의 최상위 레벨에서 호출하십시오. -* ✅ [사용자 정의 Hook](/docs/hooks-custom.html) 본체의 최상위 레벨에서 호출하십시오. +* ✅ 함수 컴포넌트 본문의 최상위 레벨에서 호출하세요. +* ✅ [사용자 정의 Hook](/docs/hooks-custom.html) 본체의 최상위 레벨에서 호출하세요. **이에 대한 자세한 내용은 [Hooks 규칙](/docs/hooks-rules.html)에서 알아보세요.** ```js{2-3,8-9} function Counter() { - // ✅ Good: 함수 컴포넌트의 최상위 레벨 + // ✅ 권장: 함수 컴포넌트의 최상위 레벨 const [count, setCount] = useState(0); // ... } function useWindowWidth() { - // ✅ Good: 사용자 정의 Hook의 최상위 레벨 + // ✅ 권장: 사용자 정의 Hook의 최상위 레벨 const [width, setWidth] = useState(window.innerWidth); // ... } @@ -46,16 +48,16 @@ function useWindowWidth() { 혼란을 주지 않기 위해 다른 경우에는 Hooks를 호출하는 것이 지원되지 **않습니다**. -* 🔴 클래스 컴포넌트에서 Hooks를 호출하지 마십시오. -* 🔴 이벤트 핸들러에서 호출하지 마십시오. -* 🔴 `useMemo`, `useReducer` 또는 `useEffect`에 전달 된 함수 내에서 Hooks를 호출하지 마십시오. +* 🔴 클래스 컴포넌트에서 Hooks를 호출하지 마세요. +* 🔴 이벤트 핸들러에서 호출하지 마세요. +* 🔴 `useMemo`, `useReducer` 또는 `useEffect`에 전달 된 함수 내에서 Hooks를 호출하지 마세요. 이러한 규칙을 위반하면 아래와 같은 오류가 표시될 수 있습니다. ```js{3-4,11-12,20-21} function Bad1() { function handleClick() { - // 🔴 Bad: 이벤트 핸들러 내에서 사용 (고치려면 바깥으로 옮기십시오!) + // 🔴 금지: 이벤트 핸들러 내에서 사용 (고치려면 바깥으로 옮기세요!) const theme = useContext(ThemeContext); } // ... @@ -63,7 +65,7 @@ function Bad1() { function Bad2() { const style = useMemo(() => { - // 🔴 Bad: useMemo 안에서 사용 (고치려면 바깥으로 옮기십시오!) + // 🔴 금지: useMemo 안에서 사용 (고치려면 바깥으로 옮기세요!) const theme = useContext(ThemeContext); return createStyle(theme); }); @@ -72,7 +74,7 @@ function Bad2() { class Bad3 extends React.Component { render() { - // 🔴 Bad: 클래스 컴포넌트 안에서 사용 + // 🔴 금지: 클래스 컴포넌트 안에서 사용 useEffect(() => {}) // ... } @@ -83,7 +85,7 @@ class Bad3 extends React.Component { >주의 > ->[사용자 정의 Hooks](/docs/hooks-custom.html)는 다른 Hooks를 호출 *할 수도* 있습니다 (이것이 사용자 정의 Hooks의 목적입니다). 사용자 정의 Hooks도 함수 컴포넌트가 렌더링되는 동안에만 호출 되도록 되어있기 때문에 문제없이 동작 합니다. +>[사용자 정의 Hooks](/docs/hooks-custom.html)는 다른 Hooks를 호출*할 수도* 있습니다 (이것이 사용자 정의 Hooks의 목적입니다). 사용자 정의 Hooks도 함수 컴포넌트가 렌더링되는 동안에만 호출되도록 되어있기 때문에 문제없이 동작합니다. ## React 중복 {#duplicate-react} @@ -100,10 +102,10 @@ Node 패키지 매니저(NPM)를 사용하는 경우 프로젝트 폴더에서 또한 로그를 추가하거나 개발 서버를 다시 시작해서 이 문제를 디버깅 할 수 있습니다. ```js -// node_modules/react-dom/index.js 아래를 추가하십시오. +// node_modules/react-dom/index.js에 아래를 추가하세요. window.React1 = require('react'); -// 컴포넌트 파일에 아래를 추가하십시오. +// 컴포넌트 파일에 아래를 추가하세요. require('react-dom'); window.React2 = require('react'); console.log(window.React1 === window.React2); @@ -115,8 +117,8 @@ console.log(window.React1 === window.React2); >주의 > ->일반적으로 React는 한 페이지에서 여러 독립된 사본을 사용하도록 지원합니다 (예시: 앱과 서드파티 위젯 모두에서 사용하는 경우). 렌더링 된 컴포넌트와 `react-dom`간에 `require('react')`를 다르게 참조되는 경우에만 깨집니다. +>일반적으로 React는 한 페이지에서 여러 독립된 사본을 사용하도록 지원합니다 (예시: 앱과 서드 파티 위젯 모두에서 사용하는 경우). 렌더링 된 컴포넌트와 `react-dom`간에 `require('react')`를 다르게 참조되는 경우에만 깨집니다. ## 다른 원인 {#other-causes} -이 모든게 도움이 되지 않았다면 [이 이슈](https://github.com/facebook/react/issues/13991)에 코멘트를 남기십시오. 그러면 도와 드리겠습니다. 작은 재현 예제를 만들어보면 그 문제를 발견 할지도 모릅니다. +이 모든게 도움이 되지 않았다면 [이 이슈](https://github.com/facebook/react/issues/13991)에 코멘트를 남기세요. 그러면 도와 드리겠습니다. 재현할 수 있는 작은 예시를 만들어보면 그 문제를 발견 할지도 모릅니다.