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
Copy file name to clipboardExpand all lines: content/blog/2018-11-27-react-16-roadmap.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -87,7 +87,7 @@ function Example() {
87
87
}
88
88
```
89
89
90
-
Hooks [introduction](/docs/hooks-intro.html) and [Hooks 개요](/docs/hooks-overview.html) are good places to start. Watch [these talks](https://www.youtube.com/watch?v=V-QO-KO90iQ) for a video introduction and a deep dive. The [FAQ](/docs/hooks-faq.html) should answer most of your further questions. To learn more about the motivation behind Hooks, you can read [this article](https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889). Some of the rationale for the API design of Hooks is explained in [this RFC thread reply](https://github.com/reactjs/rfcs/pull/68#issuecomment-439314884).
90
+
Hooks [introduction](/docs/hooks-intro.html) and [Hook 개요](/docs/hooks-overview.html) are good places to start. Watch [these talks](https://www.youtube.com/watch?v=V-QO-KO90iQ) for a video introduction and a deep dive. The [FAQ](/docs/hooks-faq.html) should answer most of your further questions. To learn more about the motivation behind Hooks, you can read [this article](https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889). Some of the rationale for the API design of Hooks is explained in [this RFC thread reply](https://github.com/reactjs/rfcs/pull/68#issuecomment-439314884).
91
91
92
92
We have been dogfooding Hooks at Facebook since September. We don't expect major bugs in the implementation. Hooks are only available in the 16.7 alpha versions of React. Some of their API is expected to change in the final version (see the end of [this comment](https://github.com/reactjs/rfcs/pull/68#issuecomment-439314884) for details). It is possible that the minor release with Hooks might not be React 16.7.
Copy file name to clipboardExpand all lines: content/blog/2019-02-06-react-v16.8.0.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -12,7 +12,7 @@ Hooks let you use state and other React features without writing a class. You ca
12
12
If you've never heard of Hooks before, you might find these resources interesting:
13
13
14
14
*[Introducing Hooks](/docs/hooks-intro.html) explains why we're adding Hooks to React.
15
-
*[Hooks 개요](/docs/hooks-overview.html) is a fast-paced overview of the built-in Hooks.
15
+
*[Hook 개요](/docs/hooks-overview.html) is a fast-paced overview of the built-in Hooks.
16
16
*[Building Your Own Hooks](/docs/hooks-custom.html) demonstrates code reuse with custom Hooks.
17
17
*[Making Sense of React Hooks](https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889) explores the new possibilities unlocked by Hooks.
18
18
*[useHooks.com](https://usehooks.com/) showcases community-maintained Hooks recipes and demos.
Copy file name to clipboardExpand all lines: content/docs/hooks-overview.md
+23-23
Original file line number
Diff line number
Diff line change
@@ -1,18 +1,18 @@
1
1
---
2
2
id: hooks-overview
3
-
title: Hooks 개요
3
+
title: Hook 개요
4
4
permalink: docs/hooks-overview.html
5
5
next: hooks-state.html
6
6
prev: hooks-intro.html
7
7
---
8
8
9
-
*Hooks*는 React 16.8에 새로 추가된 기능입니다. *Hooks*는 클래스를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해줍니다.
9
+
*Hook*은 React 16.8에 새로 추가된 기능입니다. *Hook*은 클래스를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해줍니다.
10
10
11
-
Hooks는[하위 호환성](/docs/hooks-intro.html#no-breaking-changes)을 가지고 있습니다. 이 문서는 React에 경험이 있는 사용자를 대상으로 Hooks에 대해 간략히 소개합니다. 이 문서는 빠르게 진행됩니다. 혼란스러운 경우에는 다음과 같은 노란색 박스를 참고하세요.
11
+
Hook은[하위 호환성](/docs/hooks-intro.html#no-breaking-changes)을 가지고 있습니다. 이 문서는 React에 경험이 있는 사용자를 대상으로 Hook에 대해 간략히 소개합니다. 이 문서는 빠르게 진행됩니다. 혼란스러운 경우에는 다음과 같은 노란색 박스를 참고하세요.
12
12
13
13
>자세한 설명
14
14
>
15
-
>React에 Hooks를 도입하는 이유를 알고 싶다면 [Motivation](/docs/hooks-intro.html#motivation) 파트를 읽어보세요.
15
+
>React에 Hook을 도입하는 이유를 알고 싶다면 [Motivation](/docs/hooks-intro.html#motivation) 파트를 읽어보세요.
16
16
17
17
**↑↑↑ 각 섹션 마지막에는 이런 박스가 있습니다.** 자세한 설명을 보시려면 링크를 따라가시면 됩니다.
18
18
@@ -60,9 +60,9 @@ function ExampleWithManyStates() {
60
60
61
61
#### 근데 Hook이 뭔가요? {#but-what-is-a-hook}
62
62
63
-
Hooks는 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 "연동(hook into)"할 수 있게 해주는 함수입니다. Hooks는 클래스 안에서는 동작하지 않습니다 -- 대신 클래스 없이 React를 사용할 수 있게 해주는 것입니다. (하지만 이미 짜놓은 컴포넌트를 모조리 재작성하는 것은 [권장하지 않습니다](/docs/hooks-intro.html#gradual-adoption-strategy). 대신 새로 작성하는 컴포넌트부터는 Hooks를 이용하시면 됩니다.)
63
+
Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 "연동(hook into)"할 수 있게 해주는 함수입니다. Hook은 클래스 안에서는 동작하지 않습니다 -- 대신 클래스 없이 React를 사용할 수 있게 해주는 것입니다. (하지만 이미 짜놓은 컴포넌트를 모조리 재작성하는 것은 [권장하지 않습니다](/docs/hooks-intro.html#gradual-adoption-strategy). 대신 새로 작성하는 컴포넌트부터는 Hook을 이용하시면 됩니다.)
64
64
65
-
React는 `useState` 같은 내장 Hooks를 몇 가지 제공합니다. 컴포넌트 간에 stateful 로직을 재사용하기 위해서 custom Hooks를 만드는 것도 물론 가능합니다. 일단 내장 Hooks를 먼저 보겠습니다.
65
+
React는 `useState` 같은 내장 Hook을 몇 가지 제공합니다. 컴포넌트 간에 stateful 로직을 재사용하기 위해서 custom Hook을 만드는 것도 물론 가능합니다. 일단 내장 Hook을 먼저 보겠습니다.
66
66
67
67
>자세한 설명
68
68
>
@@ -153,30 +153,30 @@ function FriendStatusWithCounter(props) {
153
153
// ...
154
154
```
155
155
156
-
Hooks를 사용하면 -- 구독을 추가하고 제거하는 로직 같은 -- 서로 관련 있는 코드들을 한군데에 모아서 작성할 수 있습니다. 반면 클래스 컴포넌트에서는 생명주기 메소드(lifecycle methods) 각각에 쪼개서 넣어야만 했습니다.
156
+
Hook을 사용하면 -- 구독을 추가하고 제거하는 로직 같은 -- 서로 관련 있는 코드들을 한군데에 모아서 작성할 수 있습니다. 반면 클래스 컴포넌트에서는 생명주기 메소드(lifecycle methods) 각각에 쪼개서 넣어야만 했습니다.
157
157
158
158
>자세한 설명
159
159
>
160
160
>`useEffect`에 대해서는 독립된 문서 [Using the Effect Hook](/docs/hooks-effect.html)에서 더 알아보세요.
161
161
162
-
## ✌️ Hooks 사용 규칙 {#️-rules-of-hooks}
162
+
## ✌️ Hook 사용 규칙 {#️-rules-of-hooks}
163
163
164
-
Hooks는 그냥 JavaScript 함수이지만, 두 가지 규칙을 준수해야 합니다.
164
+
Hook은 그냥 JavaScript 함수이지만, 두 가지 규칙을 준수해야 합니다.
165
165
166
-
***최상위(at the top level)**에서만 Hooks를 호출해야 합니다. 반복문, 조건문, 중첩된 함수 내에서 Hooks를 실행하지 마세요.
167
-
***React 함수 컴포넌트** 내에서만 Hooks를 호출해야 합니다. 일반 JavaScript 함수에서는 Hooks를 호출해서는 안 됩니다. (Hooks를 호출할 수 있는 곳이 딱 한 군데 더 있습니다 -- 바로 직접 작성한 custom Hooks 내입니다. 이것에 대해서는 나중에 알아보겠습니다.)
166
+
***최상위(at the top level)**에서만 Hook을 호출해야 합니다. 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하지 마세요.
167
+
***React 함수 컴포넌트** 내에서만 Hook을 호출해야 합니다. 일반 JavaScript 함수에서는 Hook을 호출해서는 안 됩니다. (Hook을 호출할 수 있는 곳이 딱 한 군데 더 있습니다 -- 바로 직접 작성한 custom Hook 내입니다. 이것에 대해서는 나중에 알아보겠습니다.)
168
168
169
-
이 규칙들을 강제하기 위해서 [linter plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks)을 제공하고 있습니다. 이 규칙들이 제약이 심하고 혼란스럽다고 처음에는 느낄 수 있습니다. 하지만 이것은 Hooks가 제대로 동작하기 위해서는 필수적인 조건입니다.
169
+
이 규칙들을 강제하기 위해서 [linter plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks)을 제공하고 있습니다. 이 규칙들이 제약이 심하고 혼란스럽다고 처음에는 느낄 수 있습니다. 하지만 이것은 Hook이 제대로 동작하기 위해서는 필수적인 조건입니다.
170
170
171
171
>자세한 설명
172
172
>
173
173
>이 규칙들에 대해서는 독립된 문서 [Rules of Hooks](/docs/hooks-rules.html)에서 더 알아보세요.
174
174
175
-
## 💡 나만의 Hooks 만들기 {#-building-your-own-hooks}
175
+
## 💡 나만의 Hook 만들기 {#-building-your-own-hooks}
176
176
177
-
개발을 하다 보면 가끔 stateful 로직을 컴포넌트 간에 재사용하고 싶은 경우가 생깁니다. 이 문제를 해결하기 위한 전통적인 방법이 두 가지 있었는데, [higher-order components](/docs/higher-order-components.html)와 [render props](/docs/render-props.html)가 바로 그것입니다. Custom Hooks는 이들 둘과는 달리 컴포넌트 트리에 새 컴포넌트를 추가하지 않고도 이것을 가능하게 해줍니다.
177
+
개발을 하다 보면 가끔 stateful 로직을 컴포넌트 간에 재사용하고 싶은 경우가 생깁니다. 이 문제를 해결하기 위한 전통적인 방법이 두 가지 있었는데, [higher-order components](/docs/higher-order-components.html)와 [render props](/docs/render-props.html)가 바로 그것입니다. Custom Hook은 이들 둘과는 달리 컴포넌트 트리에 새 컴포넌트를 추가하지 않고도 이것을 가능하게 해줍니다.
178
178
179
-
친구의 온라인 여부를 구독하기 위해서 `useState`와 `useEffect`Hooks를 사용한 `FriendStatus` 컴포넌트 예제를 다시 한번 보겠습니다. 이 로직을 다른 컴포넌트에서도 재사용하고 싶다고 가정을 해봅시다.
179
+
친구의 온라인 여부를 구독하기 위해서 `useState`와 `useEffect`Hook을 사용한 `FriendStatus` 컴포넌트 예제를 다시 한번 보겠습니다. 이 로직을 다른 컴포넌트에서도 재사용하고 싶다고 가정을 해봅시다.
180
180
181
181
먼저, 이 로직을 `useFriendStatus`라는 custom Hook으로 뽑아냅니다.
182
182
@@ -228,19 +228,19 @@ function FriendListItem(props) {
228
228
}
229
229
```
230
230
231
-
각 컴포넌트의 state는 완전히 독립적입니다. Hooks는 state 그 자체가 아니라, *stateful logic*을 재사용하는 방법입니다. 실제로 각각의 Hook *호출*은 완전히 독립된 state를 가집니다 -- 그래서 심지어는 한 컴포넌트 안에서 같은 custom Hook을 두 번 쓸 수도 있습니다.
231
+
각 컴포넌트의 state는 완전히 독립적입니다. Hook은 state 그 자체가 아니라, *stateful logic*을 재사용하는 방법입니다. 실제로 각각의 Hook *호출*은 완전히 독립된 state를 가집니다 -- 그래서 심지어는 한 컴포넌트 안에서 같은 custom Hook을 두 번 쓸 수도 있습니다.
232
232
233
-
Custom Hooks는 기능이라기보다는 컨벤션(convention)에 가깝습니다. 이름이 "`use`"로 시작하고, 안에서 다른 Hooks를 호출한다면 그 함수를 custom Hook이라고 부를 수 있습니다. `useSomething`이라는 네이밍 컨벤션은 linter 플러그인이 Hooks를 인식하고 버그를 찾을 수 있게 해줍니다.
233
+
Custom Hook은 기능이라기보다는 컨벤션(convention)에 가깝습니다. 이름이 "`use`"로 시작하고, 안에서 다른 Hook을 호출한다면 그 함수를 custom Hook이라고 부를 수 있습니다. `useSomething`이라는 네이밍 컨벤션은 linter 플러그인이 Hook을 인식하고 버그를 찾을 수 있게 해줍니다.
234
234
235
-
폼 핸들링, 애니메이션, 선언적 구독(declarative subscriptions), 타이머 등 많은 경우에 custom Hooks를 사용할 수 있습니다. 우리는 React 커뮤니티에서 어떤 custom Hooks가 만들어질지 정말 기대됩니다.
235
+
폼 핸들링, 애니메이션, 선언적 구독(declarative subscriptions), 타이머 등 많은 경우에 custom Hook을 사용할 수 있습니다. 우리는 React 커뮤니티에서 어떤 custom Hook이 만들어질지 정말 기대됩니다.
236
236
237
237
>자세한 설명
238
238
>
239
-
>Custom Hooks에 대해서는 독립된 문서 [Building Your Own Hooks](/docs/hooks-custom.html)에서 더 알아보세요.
239
+
>Custom Hook에 대해서는 독립된 문서 [Building Your Own Hooks](/docs/hooks-custom.html)에서 더 알아보세요.
240
240
241
-
## 🔌 다른 내장 Hooks {#-other-hooks}
241
+
## 🔌 다른 내장 Hook {#-other-hooks}
242
242
243
-
보편적이지는 않지만 유용하다고 느낄만한 내장 Hooks가 몇 가지 더 있습니다. 예를 들어, [`useContext`](/docs/hooks-reference.html#usecontext)는 컴포넌트를 중첩하지 않고도 React context를 구독할 수 있게 해줍니다.
243
+
보편적이지는 않지만 유용하다고 느낄만한 내장 Hook이 몇 가지 더 있습니다. 예를 들어, [`useContext`](/docs/hooks-reference.html#usecontext)는 컴포넌트를 중첩하지 않고도 React context를 구독할 수 있게 해줍니다.
244
244
245
245
```js{2,3}
246
246
function Example() {
@@ -260,12 +260,12 @@ function Todos() {
260
260
261
261
>자세한 설명
262
262
>
263
-
>모든 내장 Hooks에 대해서는 독립된 문서 [Hooks API Reference](/docs/hooks-reference.html)에서 더 알아보세요.
263
+
>모든 내장 Hook에 대해서는 독립된 문서 [Hooks API Reference](/docs/hooks-reference.html)에서 더 알아보세요.
264
264
265
265
## 다음 단계 {#next-steps}
266
266
267
267
휴, 정말 순식간이었죠! 만약 잘 이해가 안 되는 부분이 있거나 좀 더 깊이 공부하고 싶으면 [State Hook](/docs/hooks-state.html)부터 시작해서 다른 문서들을 읽어보시기 바랍니다.
268
268
269
269
또한 [Hooks API reference](/docs/hooks-reference.html)와 [Hooks FAQ](/docs/hooks-faq.html)도 참고하시기 바랍니다.
270
270
271
-
마지막으로, 우리가 *왜*Hooks를 추가하는지 그 이유와, -- 앱을 재작성하지 않고도 -- 클래스와 함께 Hooks를 사용하는 방법을 설명한 [소개 페이지](/docs/hooks-intro.html)도 놓치지 마세요.
271
+
마지막으로, 우리가 *왜*Hook을 추가하는지 그 이유와, -- 앱을 재작성하지 않고도 -- 클래스와 함께 Hook을 사용하는 방법을 설명한 [소개 페이지](/docs/hooks-intro.html)도 놓치지 마세요.
Copy file name to clipboardExpand all lines: content/docs/hooks-reference.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -10,7 +10,7 @@ next: hooks-faq.html
10
10
11
11
This page describes the APIs for the built-in Hooks in React.
12
12
13
-
If you're new to Hooks, you might want to check out [Hooks 개요](/docs/hooks-overview.html) first. You may also find useful information in the [frequently asked questions](/docs/hooks-faq.html) section.
13
+
If you're new to Hooks, you might want to check out [Hook 개요](/docs/hooks-overview.html) first. You may also find useful information in the [frequently asked questions](/docs/hooks-faq.html) section.
0 commit comments