Skip to content

Commit 02ae918

Browse files
committed
Change the term Hooks to singular form
1 parent 7f4bbef commit 02ae918

6 files changed

+28
-28
lines changed

Diff for: content/blog/2018-11-27-react-16-roadmap.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ function Example() {
8787
}
8888
```
8989

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).
9191

9292
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.
9393

Diff for: content/blog/2019-02-06-react-v16.8.0.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ Hooks let you use state and other React features without writing a class. You ca
1212
If you've never heard of Hooks before, you might find these resources interesting:
1313

1414
* [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.
1616
* [Building Your Own Hooks](/docs/hooks-custom.html) demonstrates code reuse with custom Hooks.
1717
* [Making Sense of React Hooks](https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889) explores the new possibilities unlocked by Hooks.
1818
* [useHooks.com](https://usehooks.com/) showcases community-maintained Hooks recipes and demos.

Diff for: content/docs/hooks-intro.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ To solve these problems, **Hooks let you use more of React's features without cl
8787

8888
>Examples
8989
>
90-
>[Hooks 개요](/docs/hooks-overview.html) is a good place to start learning Hooks.
90+
>[Hook 개요](/docs/hooks-overview.html) is a good place to start learning Hooks.
9191
9292
## Gradual Adoption Strategy {#gradual-adoption-strategy}
9393

Diff for: content/docs/hooks-overview.md

+23-23
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
---
22
id: hooks-overview
3-
title: Hooks 개요
3+
title: Hook 개요
44
permalink: docs/hooks-overview.html
55
next: hooks-state.html
66
prev: hooks-intro.html
77
---
88

9-
*Hooks* React 16.8에 새로 추가된 기능입니다. *Hooks* 클래스를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해줍니다.
9+
*Hook* React 16.8에 새로 추가된 기능입니다. *Hook* 클래스를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해줍니다.
1010

11-
Hooks는 [하위 호환성](/docs/hooks-intro.html#no-breaking-changes)을 가지고 있습니다. 이 문서는 React에 경험이 있는 사용자를 대상으로 Hooks에 대해 간략히 소개합니다. 이 문서는 빠르게 진행됩니다. 혼란스러운 경우에는 다음과 같은 노란색 박스를 참고하세요.
11+
Hook은 [하위 호환성](/docs/hooks-intro.html#no-breaking-changes)을 가지고 있습니다. 이 문서는 React에 경험이 있는 사용자를 대상으로 Hook에 대해 간략히 소개합니다. 이 문서는 빠르게 진행됩니다. 혼란스러운 경우에는 다음과 같은 노란색 박스를 참고하세요.
1212

1313
>자세한 설명
1414
>
15-
>React에 Hooks를 도입하는 이유를 알고 싶다면 [Motivation](/docs/hooks-intro.html#motivation) 파트를 읽어보세요.
15+
>React에 Hook을 도입하는 이유를 알고 싶다면 [Motivation](/docs/hooks-intro.html#motivation) 파트를 읽어보세요.
1616
1717
**↑↑↑ 각 섹션 마지막에는 이런 박스가 있습니다.** 자세한 설명을 보시려면 링크를 따라가시면 됩니다.
1818

@@ -60,9 +60,9 @@ function ExampleWithManyStates() {
6060

6161
#### 근데 Hook이 뭔가요? {#but-what-is-a-hook}
6262

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을 이용하시면 됩니다.)
6464

65-
React는 `useState` 같은 내장 Hooks를 몇 가지 제공합니다. 컴포넌트 간에 stateful 로직을 재사용하기 위해서 custom Hooks를 만드는 것도 물론 가능합니다. 일단 내장 Hooks를 먼저 보겠습니다.
65+
React는 `useState` 같은 내장 Hook을 몇 가지 제공합니다. 컴포넌트 간에 stateful 로직을 재사용하기 위해서 custom Hook을 만드는 것도 물론 가능합니다. 일단 내장 Hook을 먼저 보겠습니다.
6666

6767
>자세한 설명
6868
>
@@ -153,30 +153,30 @@ function FriendStatusWithCounter(props) {
153153
// ...
154154
```
155155

156-
Hooks를 사용하면 -- 구독을 추가하고 제거하는 로직 같은 -- 서로 관련 있는 코드들을 한군데에 모아서 작성할 수 있습니다. 반면 클래스 컴포넌트에서는 생명주기 메소드(lifecycle methods) 각각에 쪼개서 넣어야만 했습니다.
156+
Hook을 사용하면 -- 구독을 추가하고 제거하는 로직 같은 -- 서로 관련 있는 코드들을 한군데에 모아서 작성할 수 있습니다. 반면 클래스 컴포넌트에서는 생명주기 메소드(lifecycle methods) 각각에 쪼개서 넣어야만 했습니다.
157157

158158
>자세한 설명
159159
>
160160
>`useEffect`에 대해서는 독립된 문서 [Using the Effect Hook](/docs/hooks-effect.html)에서 더 알아보세요.
161161
162-
## ✌️ Hooks 사용 규칙 {#️-rules-of-hooks}
162+
## ✌️ Hook 사용 규칙 {#️-rules-of-hooks}
163163

164-
Hooks는 그냥 JavaScript 함수이지만, 두 가지 규칙을 준수해야 합니다.
164+
Hook은 그냥 JavaScript 함수이지만, 두 가지 규칙을 준수해야 합니다.
165165

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 내입니다. 이것에 대해서는 나중에 알아보겠습니다.)
168168

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이 제대로 동작하기 위해서는 필수적인 조건입니다.
170170

171171
>자세한 설명
172172
>
173173
>이 규칙들에 대해서는 독립된 문서 [Rules of Hooks](/docs/hooks-rules.html)에서 더 알아보세요.
174174
175-
## 💡 나만의 Hooks 만들기 {#-building-your-own-hooks}
175+
## 💡 나만의 Hook 만들기 {#-building-your-own-hooks}
176176

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은 이들 둘과는 달리 컴포넌트 트리에 새 컴포넌트를 추가하지 않고도 이것을 가능하게 해줍니다.
178178

179-
친구의 온라인 여부를 구독하기 위해서 `useState``useEffect` Hooks를 사용한 `FriendStatus` 컴포넌트 예제를 다시 한번 보겠습니다. 이 로직을 다른 컴포넌트에서도 재사용하고 싶다고 가정을 해봅시다.
179+
친구의 온라인 여부를 구독하기 위해서 `useState``useEffect` Hook을 사용한 `FriendStatus` 컴포넌트 예제를 다시 한번 보겠습니다. 이 로직을 다른 컴포넌트에서도 재사용하고 싶다고 가정을 해봅시다.
180180

181181
먼저, 이 로직을 `useFriendStatus`라는 custom Hook으로 뽑아냅니다.
182182

@@ -228,19 +228,19 @@ function FriendListItem(props) {
228228
}
229229
```
230230

231-
각 컴포넌트의 state는 완전히 독립적입니다. Hooks는 state 그 자체가 아니라, *stateful logic*을 재사용하는 방법입니다. 실제로 각각의 Hook *호출*은 완전히 독립된 state를 가집니다 -- 그래서 심지어는 한 컴포넌트 안에서 같은 custom Hook을 두 번 쓸 수도 있습니다.
231+
각 컴포넌트의 state는 완전히 독립적입니다. Hook은 state 그 자체가 아니라, *stateful logic*을 재사용하는 방법입니다. 실제로 각각의 Hook *호출*은 완전히 독립된 state를 가집니다 -- 그래서 심지어는 한 컴포넌트 안에서 같은 custom Hook을 두 번 쓸 수도 있습니다.
232232

233-
Custom Hooks는 기능이라기보다는 컨벤션(convention)에 가깝습니다. 이름이 "`use`"로 시작하고, 안에서 다른 Hooks를 호출한다면 그 함수를 custom Hook이라고 부를 수 있습니다. `useSomething`이라는 네이밍 컨벤션은 linter 플러그인이 Hooks를 인식하고 버그를 찾을 수 있게 해줍니다.
233+
Custom Hook은 기능이라기보다는 컨벤션(convention)에 가깝습니다. 이름이 "`use`"로 시작하고, 안에서 다른 Hook을 호출한다면 그 함수를 custom Hook이라고 부를 수 있습니다. `useSomething`이라는 네이밍 컨벤션은 linter 플러그인이 Hook을 인식하고 버그를 찾을 수 있게 해줍니다.
234234

235-
폼 핸들링, 애니메이션, 선언적 구독(declarative subscriptions), 타이머 등 많은 경우에 custom Hooks를 사용할 수 있습니다. 우리는 React 커뮤니티에서 어떤 custom Hooks가 만들어질지 정말 기대됩니다.
235+
폼 핸들링, 애니메이션, 선언적 구독(declarative subscriptions), 타이머 등 많은 경우에 custom Hook을 사용할 수 있습니다. 우리는 React 커뮤니티에서 어떤 custom Hook이 만들어질지 정말 기대됩니다.
236236

237237
>자세한 설명
238238
>
239-
>Custom Hooks에 대해서는 독립된 문서 [Building Your Own Hooks](/docs/hooks-custom.html)에서 더 알아보세요.
239+
>Custom Hook에 대해서는 독립된 문서 [Building Your Own Hooks](/docs/hooks-custom.html)에서 더 알아보세요.
240240
241-
## 🔌 다른 내장 Hooks {#-other-hooks}
241+
## 🔌 다른 내장 Hook {#-other-hooks}
242242

243-
보편적이지는 않지만 유용하다고 느낄만한 내장 Hooks가 몇 가지 더 있습니다. 예를 들어, [`useContext`](/docs/hooks-reference.html#usecontext)는 컴포넌트를 중첩하지 않고도 React context를 구독할 수 있게 해줍니다.
243+
보편적이지는 않지만 유용하다고 느낄만한 내장 Hook이 몇 가지 더 있습니다. 예를 들어, [`useContext`](/docs/hooks-reference.html#usecontext)는 컴포넌트를 중첩하지 않고도 React context를 구독할 수 있게 해줍니다.
244244

245245
```js{2,3}
246246
function Example() {
@@ -260,12 +260,12 @@ function Todos() {
260260

261261
>자세한 설명
262262
>
263-
>모든 내장 Hooks에 대해서는 독립된 문서 [Hooks API Reference](/docs/hooks-reference.html)에서 더 알아보세요.
263+
>모든 내장 Hook에 대해서는 독립된 문서 [Hooks API Reference](/docs/hooks-reference.html)에서 더 알아보세요.
264264
265265
## 다음 단계 {#next-steps}
266266

267267
휴, 정말 순식간이었죠! 만약 잘 이해가 안 되는 부분이 있거나 좀 더 깊이 공부하고 싶으면 [State Hook](/docs/hooks-state.html)부터 시작해서 다른 문서들을 읽어보시기 바랍니다.
268268

269269
또한 [Hooks API reference](/docs/hooks-reference.html)[Hooks FAQ](/docs/hooks-faq.html)도 참고하시기 바랍니다.
270270

271-
마지막으로, 우리가 ** Hooks를 추가하는지 그 이유와, -- 앱을 재작성하지 않고도 -- 클래스와 함께 Hooks를 사용하는 방법을 설명한 [소개 페이지](/docs/hooks-intro.html)도 놓치지 마세요.
271+
마지막으로, 우리가 ** Hook을 추가하는지 그 이유와, -- 앱을 재작성하지 않고도 -- 클래스와 함께 Hook을 사용하는 방법을 설명한 [소개 페이지](/docs/hooks-intro.html)도 놓치지 마세요.

Diff for: content/docs/hooks-reference.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ next: hooks-faq.html
1010

1111
This page describes the APIs for the built-in Hooks in React.
1212

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.
1414

1515
- [Basic Hooks](#basic-hooks)
1616
- [`useState`](#usestate)

Diff for: content/docs/nav.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@
110110
- id: hooks-intro
111111
title: Introducing Hooks
112112
- id: hooks-overview
113-
title: Hooks 개요
113+
title: Hook 개요
114114
- id: hooks-state
115115
title: Using the State Hook
116116
- id: hooks-effect

0 commit comments

Comments
 (0)