From 014e63cbbb989006c86f7a4e09e24d9cb41223ba Mon Sep 17 00:00:00 2001 From: Wooram Jun Date: Sat, 9 Feb 2019 01:49:00 +0900 Subject: [PATCH 1/4] Translate Hooks at a Glance --- content/docs/hooks-overview.md | 109 ++++++++++++++++----------------- 1 file changed, 54 insertions(+), 55 deletions(-) diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index df958dc6d..8c4646779 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -1,24 +1,24 @@ --- id: hooks-overview -title: Hooks at a Glance +title: Hook 개요 permalink: docs/hooks-overview.html next: hooks-state.html prev: hooks-intro.html --- -*Hooks* are a new addition in React 16.8. They let you use state and other React features without writing a class. +*Hook*은 React 16.8에 새로 추가된 기능입니다. *Hook*은 클래스를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해줍니다. -Hooks are [backwards-compatible](/docs/hooks-intro.html#no-breaking-changes). This page provides an overview of Hooks for experienced React users. This is a fast-paced overview. If you get confused, look for a yellow box like this: +Hook은 [하위 호환성](/docs/hooks-intro.html#no-breaking-changes)을 가지고 있습니다. 이 문서는 React에 경험이 있는 사용자를 대상으로 Hook에 대해 간략히 소개합니다. 이 문서는 빠르게 진행됩니다. 혼란스러운 경우에는 다음과 같은 노란색 박스를 참고하세요. ->Detailed Explanation +>자세한 설명 > ->Read the [Motivation](/docs/hooks-intro.html#motivation) to learn why we're introducing Hooks to React. +>React에 Hook을 도입하는 이유를 알고 싶다면 [Motivation](/docs/hooks-intro.html#motivation) 파트를 읽어보세요. -**↑↑↑ Each section ends with a yellow box like this.** They link to detailed explanations. +**↑↑↑ 각 섹션 마지막에는 이런 박스가 있습니다.** 자세한 설명을 보시려면 링크를 따라가시면 됩니다. ## 📌 State Hook {#state-hook} -This example renders a counter. When you click the button, it increments the value: +버튼을 클릭하면 값이 증가하는 간단한 카운터 예제가 여기 있습니다. ```js{1,4,5} import React, { useState } from 'react'; @@ -38,13 +38,13 @@ function Example() { } ``` -Here, `useState` is a *Hook* (we'll talk about what this means in a moment). We call it inside a function component to add some local state to it. React will preserve this state between re-renders. `useState` returns a pair: the *current* state value and a function that lets you update it. You can call this function from an event handler or somewhere else. It's similar to `this.setState` in a class, except it doesn't merge the old and new state together. (We'll show an example comparing `useState` to `this.state` in [Using the State Hook](/docs/hooks-state.html).) +여기서 `useState`가 바로 *Hook* 입니다(이게 무슨 의미인지는 앞으로 알아보겠습니다). Hook을 호출해 함수 컴포넌트(function component) 안에 state를 추가했습니다. 이 state는 컴포넌트가 다시 렌더링 되어도 그대로 유지될 것입니다. `useState`는 *현재의* state 값과 이 값을 업데이트하는 함수를 쌍으로 제공합니다. 우리는 이 함수를 이벤트 핸들러나 다른 곳에서 호출할 수 있습니다. 이것은 클래스의 `this.setState`와 거의 유사하지만, 이전 state에 새 state를 merge하지 않는다는 차이점이 있습니다. (`useState`와 `this.state`를 비교하는 예시가 [Using the State Hook](/docs/hooks-state.html) 문서에 있으니 한번 보세요.) -The only argument to `useState` is the initial state. In the example above, it is `0` because our counter starts from zero. Note that unlike `this.state`, the state here doesn't have to be an object -- although it can be if you want. The initial state argument is only used during the first render. +`useState`는 인자로 초기 state 값을 하나 받습니다. 카운터는 0부터 시작하기 때문에 위 예제에서는 초기값으로 `0`을 넣어준 것입니다. `this.state`와는 달리 `setState` Hook의 state는 객체일 필요가 없습니다. 물론 원한다면 그렇게도 가능하지만요. 이 초기값은 첫 번째 렌더링에만 딱 한번 사용됩니다. -#### Declaring multiple state variables {#declaring-multiple-state-variables} +#### 복수의-state-변수-선언하기 {#declaring-multiple-state-variables} -You can use the State Hook more than once in a single component: +하나의 컴포넌트 내에서 State Hook을 여러 개 사용할 수도 있습니다. ```js function ExampleWithManyStates() { @@ -56,25 +56,25 @@ function ExampleWithManyStates() { } ``` -The [array destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring) syntax lets us give different names to the state variables we declared by calling `useState`. These names aren't a part of the `useState` API. Instead, React assumes that if you call `useState` many times, you do it in the same order during every render. We'll come back to why this works and when this is useful later. +[배열 구조 분해(destructuring)](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#%EB%B0%B0%EC%97%B4_%EA%B5%AC%EC%A1%B0_%EB%B6%84%ED%95%B4) 문법은 `useState`로 호출된 state 변수들을 다른 변수명으로 할당할 수 있게 해줍니다. 이 변수명은 `useState` API와 관련이 없습니다. 대신에 React는 매번 렌더링할 때 `useState`가 사용된 순서대로 실행할 것입니다. 왜 이렇게 동작하는지는 나중에 살펴보겠습니다. -#### But what is a Hook? {#but-what-is-a-hook} +#### 근데 Hook이 뭔가요? {#but-what-is-a-hook} -Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don't work inside classes -- they let you use React without classes. (We [don't recommend](/docs/hooks-intro.html#gradual-adoption-strategy) rewriting your existing components overnight but you can start using Hooks in the new ones if you'd like.) +Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 "연동(hook into)"할 수 있게 해주는 함수입니다. Hook은 클래스 안에서는 동작하지 않습니다. 대신 클래스 없이 React를 사용할 수 있게 해주는 것입니다. (하지만 이미 짜놓은 컴포넌트를 모조리 재작성하는 것은 [권장하지 않습니다](/docs/hooks-intro.html#gradual-adoption-strategy). 대신 새로 작성하는 컴포넌트부터는 Hook을 이용하시면 됩니다.) -React provides a few built-in Hooks like `useState`. You can also create your own Hooks to reuse stateful behavior between different components. We'll look at the built-in Hooks first. +React는 `useState` 같은 내장 Hook을 몇 가지 제공합니다. 컴포넌트 간에 stateful 로직을 재사용하기 위해서 custom Hook을 만드는 것도 물론 가능합니다. 일단 내장 Hook을 먼저 보겠습니다. ->Detailed Explanation +>자세한 설명 > ->You can learn more about the State Hook on a dedicated page: [Using the State Hook](/docs/hooks-state.html). +>State Hook에 대해서는 독립된 문서 [Using the State Hook](/docs/hooks-state.html)에서 더 알아보세요. ## ⚡️ Effect Hook {#effect-hook} -You've likely performed data fetching, subscriptions, or manually changing the DOM from React components before. We call these operations "side effects" (or "effects" for short) because they can affect other components and can't be done during rendering. +React 컴포넌트 안에서 데이터를 가져오거나 구독하고, DOM을 직접 조작하는 작업을 이전에도 종종 해보셨을 것입니다. 우리는 이런 모든 동작을 "side effects"(또는 짧게 "effects")라고 합니다. 왜냐하면 이것은 다른 컴포넌트에 영향을 줄 수도 있고, 렌더링 과정에서는 구현할 수 없는 작업이기 때문입니다. -The Effect Hook, `useEffect`, adds the ability to perform side effects from a function component. It serves the same purpose as `componentDidMount`, `componentDidUpdate`, and `componentWillUnmount` in React classes, but unified into a single API. (We'll show examples comparing `useEffect` to these methods in [Using the Effect Hook](/docs/hooks-effect.html).) +Effect Hook, 즉 `useEffect`는 함수 컴포넌트 내에서 이런 side effects를 수행할 수 있게 해줍니다. React 클래스의 `componentDidMount` 나 `componentDidUpdate`, `componentWillUnmount`와 같은 목적으로 제공되지만, 하나의 API로 통합된 것입니다. (`useEffect`와 이 세 가지 메서드를 비교하는 예시가 [Using the Effect Hook](/docs/hooks-effect.html) 문서에 있습니다.) -For example, this component sets the document title after React updates the DOM: +예를 들어, 이 예제는 React가 DOM을 업데이트한 뒤에 문서의 타이틀을 바꾸는 컴포넌트입니다. ```js{1,6-10} import React, { useState, useEffect } from 'react'; @@ -99,9 +99,9 @@ function Example() { } ``` -When you call `useEffect`, you're telling React to run your "effect" function after flushing changes to the DOM. Effects are declared inside the component so they have access to its props and state. By default, React runs the effects after every render -- *including* the first render. (We'll talk more about how this compares to class lifecycles in [Using the Effect Hook](/docs/hooks-effect.html).) +`useEffect`를 사용하면, React는 DOM을 바꾼 뒤에 "effect" 함수를 실행할 것입니다. Effects는 컴포넌트 안에 선언되어있기 때문에 props와 state에 접근할 수 있습니다. 기본적으로 React는 매 렌더링 이후에 effects를 실행합니다. 첫 번째 렌더링도 *포함해서요*. (클래스 생명주기(lifecycle)와 다른 점은 [Using the Effect Hook](/docs/hooks-effect.html) 문서에서 더 자세히 다루고 있습니다.) -Effects may also optionally specify how to "clean up" after them by returning a function. For example, this component uses an effect to subscribe to a friend's online status, and cleans up by unsubscribing from it: +Effect를 "해제"할 필요가 있다면, 해제하는 함수를 반환해주면 됩니다. 이는 선택적입니다(optional). 예를 들어, 이 컴포넌트는 친구의 온라인 여부를 구독하는 effect를 사용했고, 구독을 해지함으로써 해제해줍니다. ```js{10-16} import React, { useState, useEffect } from 'react'; @@ -128,9 +128,9 @@ function FriendStatus(props) { } ``` -In this example, React would unsubscribe from our `ChatAPI` when the component unmounts, as well as before re-running the effect due to a subsequent render. (If you want, there's a way to [tell React to skip re-subscribing](/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects) if the `props.friend.id` we passed to `ChatAPI` didn’t change.) +이 예제에서 컴포넌트가 unmount될 때 React는 `ChatAPI`에서 구독을 해지할 것입니다. 또한 재 렌더링이 일어나 effect를 재실행하기 전에도 마찬가지로 구독을 해지합니다. (만약 원한다면 `props.friend.id`가 바뀌지 않았을 때 [재구독을 건너뛰도록 설정](/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects)할 수 있습니다.) -Just like with `useState`, you can use more than a single effect in a component: +`useState`와 마찬가지로 컴포넌트 내에서 여러 개의 effect를 사용할 수 있습니다. ```js{3,8} function FriendStatusWithCounter(props) { @@ -153,32 +153,32 @@ function FriendStatusWithCounter(props) { // ... ``` -Hooks let you organize side effects in a component by what pieces are related (such as adding and removing a subscription), rather than forcing a split based on lifecycle methods. +Hook을 사용하면 -- 구독을 추가하고 제거하는 로직 같은 -- 서로 관련 있는 코드들을 한군데에 모아서 작성할 수 있습니다. 반면 클래스 컴포넌트에서는 생명주기 메서드(lifecycle methods) 각각에 쪼개서 넣어야만 했습니다. ->Detailed Explanation +>자세한 설명 > ->You can learn more about `useEffect` on a dedicated page: [Using the Effect Hook](/docs/hooks-effect.html). +>`useEffect`에 대해서는 독립된 문서 [Using the Effect Hook](/docs/hooks-effect.html)에서 더 알아보세요. -## ✌️ Rules of Hooks {#rules-of-hooks} +## ✌️ Hook 사용 규칙 {#rules-of-hooks} -Hooks are JavaScript functions, but they impose two additional rules: +Hook은 그냥 JavaScript 함수이지만, 두 가지 규칙을 준수해야 합니다. -* Only call Hooks **at the top level**. Don’t call Hooks inside loops, conditions, or nested functions. -* Only call Hooks **from React function components**. Don’t call Hooks from regular JavaScript functions. (There is just one other valid place to call Hooks -- your own custom Hooks. We'll learn about them in a moment.) +* **최상위(at the top level)**에서만 Hook을 호출해야 합니다. 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하지 마세요. +* **React 함수 컴포넌트** 내에서만 Hook을 호출해야 합니다. 일반 JavaScript 함수에서는 Hook을 호출해서는 안 됩니다. (Hook을 호출할 수 있는 곳이 딱 한 군데 더 있습니다. 바로 직접 작성한 custom Hook 내입니다. 이것에 대해서는 나중에 알아보겠습니다.) -We provide a [linter plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks) to enforce these rules automatically. We understand these rules might seem limiting or confusing at first, but they are essential to making Hooks work well. +이 규칙들을 강제하기 위해서 [linter plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks)을 제공하고 있습니다. 이 규칙들이 제약이 심하고 혼란스럽다고 처음에는 느낄 수 있습니다. 하지만 이것은 Hook이 제대로 동작하기 위해서는 필수적인 조건입니다. ->Detailed Explanation +>자세한 설명 > ->You can learn more about these rules on a dedicated page: [Rules of Hooks](/docs/hooks-rules.html). +>이 규칙들에 대해서는 독립된 문서 [Rules of Hooks](/docs/hooks-rules.html)에서 더 알아보세요. -## 💡 Building Your Own Hooks {#building-your-own-hooks} +## 💡 나만의 Hook 만들기 {#building-your-own-hooks} -Sometimes, we want to reuse some stateful logic between components. Traditionally, there were two popular solutions to this problem: [higher-order components](/docs/higher-order-components.html) and [render props](/docs/render-props.html). Custom Hooks let you do this, but without adding more components to your tree. +개발을 하다 보면 가끔 stateful 로직을 컴포넌트 간에 재사용하고 싶은 경우가 생깁니다. 이 문제를 해결하기 위한 전통적인 방법이 두 가지 있었는데, [higher-order components](/docs/higher-order-components.html)와 [render props](/docs/render-props.html)가 바로 그것입니다. Custom Hook은 이들 둘과는 달리 컴포넌트 트리에 새 컴포넌트를 추가하지 않고도 이것을 가능하게 해줍니다. -Earlier on this page, we introduced a `FriendStatus` component that calls the `useState` and `useEffect` Hooks to subscribe to a friend's online status. Let's say we also want to reuse this subscription logic in another component. +친구의 온라인 여부를 구독하기 위해서 `useState`와 `useEffect` Hook을 사용한 `FriendStatus` 컴포넌트 예제를 다시 한번 보겠습니다. 이 로직을 다른 컴포넌트에서도 재사용하고 싶다고 가정을 해봅시다. -First, we'll extract this logic into a custom Hook called `useFriendStatus`: +먼저, 이 로직을 `useFriendStatus`라는 custom Hook으로 뽑아냅니다. ```js{3} import React, { useState, useEffect } from 'react'; @@ -201,10 +201,9 @@ function useFriendStatus(friendID) { } ``` -It takes `friendID` as an argument, and returns whether our friend is online. - -Now we can use it from both components: +이 Hook은 `friendID`를 인자로 받아서 친구의 온라인 여부를 반환해줍니다. +이제 우리는 이것을 여러 컴포넌트에서 사용할 수 있습니다. ```js{2} function FriendStatus(props) { @@ -229,19 +228,19 @@ function FriendListItem(props) { } ``` -The state of these components is completely independent. Hooks are a way to reuse *stateful logic*, not state itself. In fact, each *call* to a Hook has a completely isolated state -- so you can even use the same custom Hook twice in one component. +각 컴포넌트의 state는 완전히 독립적입니다. Hook은 state 그 자체가 아니라, *stateful logic*을 재사용하는 방법입니다. 실제로 각각의 Hook *호출*은 완전히 독립된 state를 가집니다. 그래서 심지어는 한 컴포넌트 안에서 같은 custom Hook을 두 번 쓸 수도 있습니다. -Custom Hooks are more of a convention than a feature. If a function's name starts with "`use`" and it calls other Hooks, we say it is a custom Hook. The `useSomething` naming convention is how our linter plugin is able to find bugs in the code using Hooks. +Custom Hook은 기능이라기보다는 컨벤션(convention)에 가깝습니다. 이름이 "`use`"로 시작하고, 안에서 다른 Hook을 호출한다면 그 함수를 custom Hook이라고 부를 수 있습니다. `useSomething`이라는 네이밍 컨벤션은 linter 플러그인이 Hook을 인식하고 버그를 찾을 수 있게 해줍니다. -You can write custom Hooks that cover a wide range of use cases like form handling, animation, declarative subscriptions, timers, and probably many more we haven't considered. We are excited to see what custom Hooks the React community will come up with. +폼 핸들링, 애니메이션, 선언적 구독(declarative subscriptions), 타이머 등 많은 경우에 custom Hook을 사용할 수 있습니다. 우리는 React 커뮤니티에서 어떤 custom Hook이 만들어질지 정말 기대됩니다. ->Detailed Explanation +>자세한 설명 > ->You can learn more about custom Hooks on a dedicated page: [Building Your Own Hooks](/docs/hooks-custom.html). +>Custom Hook에 대해서는 독립된 문서 [Building Your Own Hooks](/docs/hooks-custom.html)에서 더 알아보세요. -## 🔌 Other Hooks {#other-hooks} +## 🔌 다른 내장 Hook {#other-hooks} -There are a few less commonly used built-in Hooks that you might find useful. For example, [`useContext`](/docs/hooks-reference.html#usecontext) lets you subscribe to React context without introducing nesting: +보편적이지는 않지만 유용하다고 느낄만한 내장 Hook이 몇 가지 더 있습니다. 예를 들어, [`useContext`](/docs/hooks-reference.html#usecontext)는 컴포넌트를 중첩하지 않고도 React context를 구독할 수 있게 해줍니다. ```js{2,3} function Example() { @@ -251,7 +250,7 @@ function Example() { } ``` -And [`useReducer`](/docs/hooks-reference.html#usereducer) lets you manage local state of complex components with a reducer: +그리고 [`useReducer`](/docs/hooks-reference.html#usereducer)는 복잡한 컴포넌트들의 state를 reducer로 관리할 수 있게 해줍니다. ```js{2} function Todos() { @@ -259,14 +258,14 @@ function Todos() { // ... ``` ->Detailed Explanation +>자세한 설명 > ->You can learn more about all the built-in Hooks on a dedicated page: [Hooks API Reference](/docs/hooks-reference.html). +>모든 내장 Hook에 대해서는 독립된 문서 [Hooks API Reference](/docs/hooks-reference.html)에서 더 알아보세요. -## Next Steps {#next-steps} +## 다음 단계 {#next-steps} -Phew, that was fast! If some things didn't quite make sense or you'd like to learn more in detail, you can read the next pages, starting with the [State Hook](/docs/hooks-state.html) documentation. +휴, 정말 순식간이었죠! 만약 잘 이해가 안 되는 부분이 있거나 좀 더 깊이 공부하고 싶으면 [State Hook](/docs/hooks-state.html)부터 시작해서 다른 문서들을 읽어보시기 바랍니다. -You can also check out the [Hooks API reference](/docs/hooks-reference.html) and the [Hooks FAQ](/docs/hooks-faq.html). +또한 [Hooks API reference](/docs/hooks-reference.html)와 [Hooks FAQ](/docs/hooks-faq.html)도 참고하시기 바랍니다. -Finally, don't miss the [introduction page](/docs/hooks-intro.html) which explains *why* we're adding Hooks and how we'll start using them side by side with classes -- without rewriting our apps. +마지막으로, 우리가 *왜* Hook을 추가하는지 그 이유와, -- 앱을 재작성하지 않고도 -- 클래스와 함께 Hook을 사용하는 방법을 설명한 [소개 페이지](/docs/hooks-intro.html)도 놓치지 마세요. From ba662312e7da99bad53edd18eab39586e7558684 Mon Sep 17 00:00:00 2001 From: Wooram Jun Date: Sun, 10 Feb 2019 15:10:36 +0900 Subject: [PATCH 2/4] Translate comments according to the guide --- content/docs/hooks-overview.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index 8c4646779..d3433fcf9 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -24,7 +24,7 @@ Hook은 [하위 호환성](/docs/hooks-intro.html#no-breaking-changes)을 가지 import React, { useState } from 'react'; function Example() { - // Declare a new state variable, which we'll call "count" + // "count"라는 새 상태 변수를 선언합니다 const [count, setCount] = useState(0); return ( @@ -48,7 +48,7 @@ function Example() { ```js function ExampleWithManyStates() { - // Declare multiple state variables! + // 상태 변수를 여러 개 선언했습니다! const [age, setAge] = useState(42); const [fruit, setFruit] = useState('banana'); const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]); @@ -82,9 +82,9 @@ import React, { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); - // Similar to componentDidMount and componentDidUpdate: + // componentDidMount, componentDidUpdate와 비슷합니다 useEffect(() => { - // Update the document title using the browser API + // 브라우저 API를 이용해 문서의 타이틀을 업데이트합니다 document.title = `You clicked ${count} times`; }); From 03ff614dbcd101f52786d9f1722686c68ee1ef1d Mon Sep 17 00:00:00 2001 From: Wooram Jun Date: Sun, 10 Feb 2019 14:53:44 +0900 Subject: [PATCH 3/4] Translate links to Hooks at Glance --- content/blog/2018-11-27-react-16-roadmap.md | 2 +- content/blog/2019-02-06-react-v16.8.0.md | 2 +- content/docs/hooks-intro.md | 2 +- content/docs/hooks-reference.md | 2 +- content/docs/nav.yml | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/content/blog/2018-11-27-react-16-roadmap.md b/content/blog/2018-11-27-react-16-roadmap.md index d8a2f3982..4588af8be 100644 --- a/content/blog/2018-11-27-react-16-roadmap.md +++ b/content/blog/2018-11-27-react-16-roadmap.md @@ -87,7 +87,7 @@ function Example() { } ``` -Hooks [introduction](/docs/hooks-intro.html) and [overview](/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). +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). 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. diff --git a/content/blog/2019-02-06-react-v16.8.0.md b/content/blog/2019-02-06-react-v16.8.0.md index 3af12da7d..72fee3e8a 100644 --- a/content/blog/2019-02-06-react-v16.8.0.md +++ b/content/blog/2019-02-06-react-v16.8.0.md @@ -12,7 +12,7 @@ Hooks let you use state and other React features without writing a class. You ca If you've never heard of Hooks before, you might find these resources interesting: * [Introducing Hooks](/docs/hooks-intro.html) explains why we're adding Hooks to React. -* [Hooks at a Glance](/docs/hooks-overview.html) is a fast-paced overview of the built-in Hooks. +* [Hook 개요](/docs/hooks-overview.html) is a fast-paced overview of the built-in Hooks. * [Building Your Own Hooks](/docs/hooks-custom.html) demonstrates code reuse with custom Hooks. * [Making Sense of React Hooks](https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889) explores the new possibilities unlocked by Hooks. * [useHooks.com](https://usehooks.com/) showcases community-maintained Hooks recipes and demos. diff --git a/content/docs/hooks-intro.md b/content/docs/hooks-intro.md index 9470d614d..58a3a8817 100644 --- a/content/docs/hooks-intro.md +++ b/content/docs/hooks-intro.md @@ -87,7 +87,7 @@ To solve these problems, **Hooks let you use more of React's features without cl >Examples > ->[Hooks at a Glance](/docs/hooks-overview.html) is a good place to start learning Hooks. +>[Hook 개요](/docs/hooks-overview.html) is a good place to start learning Hooks. ## Gradual Adoption Strategy {#gradual-adoption-strategy} diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md index deeef54cf..b0bc64385 100644 --- a/content/docs/hooks-reference.md +++ b/content/docs/hooks-reference.md @@ -10,7 +10,7 @@ next: hooks-faq.html This page describes the APIs for the built-in Hooks in React. -If you're new to Hooks, you might want to check out [the overview](/docs/hooks-overview.html) first. You may also find useful information in the [frequently asked questions](/docs/hooks-faq.html) section. +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. - [Basic Hooks](#basic-hooks) - [`useState`](#usestate) diff --git a/content/docs/nav.yml b/content/docs/nav.yml index 4d4a7571f..b499b4551 100644 --- a/content/docs/nav.yml +++ b/content/docs/nav.yml @@ -110,7 +110,7 @@ - id: hooks-intro title: Introducing Hooks - id: hooks-overview - title: Hooks at a Glance + title: Hook 개요 - id: hooks-state title: Using the State Hook - id: hooks-effect From 9c7fe6e411272fd85529192590a7ad82d6c2aa9a Mon Sep 17 00:00:00 2001 From: Wooram Jun Date: Sat, 23 Feb 2019 14:49:19 +0900 Subject: [PATCH 4/4] Improve translation of Hooks at Glance --- content/docs/hooks-overview.md | 36 +++++++++++++++++----------------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index d3433fcf9..3aec7cbe3 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -6,7 +6,7 @@ next: hooks-state.html prev: hooks-intro.html --- -*Hook*은 React 16.8에 새로 추가된 기능입니다. *Hook*은 클래스를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해줍니다. +*Hook*은 React 16.8에 새로 추가된 기능입니다. *Hook*은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해줍니다. Hook은 [하위 호환성](/docs/hooks-intro.html#no-breaking-changes)을 가지고 있습니다. 이 문서는 React에 경험이 있는 사용자를 대상으로 Hook에 대해 간략히 소개합니다. 이 문서는 빠르게 진행됩니다. 혼란스러운 경우에는 다음과 같은 노란색 박스를 참고하세요. @@ -18,7 +18,7 @@ Hook은 [하위 호환성](/docs/hooks-intro.html#no-breaking-changes)을 가지 ## 📌 State Hook {#state-hook} -버튼을 클릭하면 값이 증가하는 간단한 카운터 예제가 여기 있습니다. +버튼을 클릭하면 값이 증가하는 간단한 카운터 예시가 여기 있습니다. ```js{1,4,5} import React, { useState } from 'react'; @@ -38,11 +38,11 @@ function Example() { } ``` -여기서 `useState`가 바로 *Hook* 입니다(이게 무슨 의미인지는 앞으로 알아보겠습니다). Hook을 호출해 함수 컴포넌트(function component) 안에 state를 추가했습니다. 이 state는 컴포넌트가 다시 렌더링 되어도 그대로 유지될 것입니다. `useState`는 *현재의* state 값과 이 값을 업데이트하는 함수를 쌍으로 제공합니다. 우리는 이 함수를 이벤트 핸들러나 다른 곳에서 호출할 수 있습니다. 이것은 클래스의 `this.setState`와 거의 유사하지만, 이전 state에 새 state를 merge하지 않는다는 차이점이 있습니다. (`useState`와 `this.state`를 비교하는 예시가 [Using the State Hook](/docs/hooks-state.html) 문서에 있으니 한번 보세요.) +여기서 `useState`가 바로 *Hook* 입니다(이게 무슨 의미인지는 앞으로 알아보겠습니다). Hook을 호출해 함수 컴포넌트(function component) 안에 state를 추가했습니다. 이 state는 컴포넌트가 다시 렌더링 되어도 그대로 유지될 것입니다. `useState`는 *현재의* state 값과 이 값을 업데이트하는 함수를 쌍으로 제공합니다. 우리는 이 함수를 이벤트 핸들러나 다른 곳에서 호출할 수 있습니다. 이것은 class의 `this.setState`와 거의 유사하지만, 이전 state와 새로운 state를 합치지 않는다는 차이점이 있습니다. (`useState`와 `this.state`를 비교하는 예시가 [Using the State Hook](/docs/hooks-state.html) 문서에 있으니 한번 보세요.) -`useState`는 인자로 초기 state 값을 하나 받습니다. 카운터는 0부터 시작하기 때문에 위 예제에서는 초기값으로 `0`을 넣어준 것입니다. `this.state`와는 달리 `setState` Hook의 state는 객체일 필요가 없습니다. 물론 원한다면 그렇게도 가능하지만요. 이 초기값은 첫 번째 렌더링에만 딱 한번 사용됩니다. +`useState`는 인자로 초기 state 값을 하나 받습니다. 카운터는 0부터 시작하기 때문에 위 예시에서는 초기값으로 `0`을 넣어준 것입니다. `this.state`와는 달리 `setState` Hook의 state는 객체일 필요가 없습니다. 물론 원한다면 그렇게도 가능하지만요. 이 초기값은 첫 번째 렌더링에만 딱 한번 사용됩니다. -#### 복수의-state-변수-선언하기 {#declaring-multiple-state-variables} +#### 여러 state 변수 선언하기 {#declaring-multiple-state-variables} 하나의 컴포넌트 내에서 State Hook을 여러 개 사용할 수도 있습니다. @@ -60,9 +60,9 @@ function ExampleWithManyStates() { #### 근데 Hook이 뭔가요? {#but-what-is-a-hook} -Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 "연동(hook into)"할 수 있게 해주는 함수입니다. Hook은 클래스 안에서는 동작하지 않습니다. 대신 클래스 없이 React를 사용할 수 있게 해주는 것입니다. (하지만 이미 짜놓은 컴포넌트를 모조리 재작성하는 것은 [권장하지 않습니다](/docs/hooks-intro.html#gradual-adoption-strategy). 대신 새로 작성하는 컴포넌트부터는 Hook을 이용하시면 됩니다.) +Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 "연동(hook into)"할 수 있게 해주는 함수입니다. Hook은 class 안에서는 동작하지 않습니다. 대신 class 없이 React를 사용할 수 있게 해주는 것입니다. (하지만 이미 짜놓은 컴포넌트를 모조리 재작성하는 것은 [권장하지 않습니다](/docs/hooks-intro.html#gradual-adoption-strategy). 대신 새로 작성하는 컴포넌트부터는 Hook을 이용하시면 됩니다.) -React는 `useState` 같은 내장 Hook을 몇 가지 제공합니다. 컴포넌트 간에 stateful 로직을 재사용하기 위해서 custom Hook을 만드는 것도 물론 가능합니다. 일단 내장 Hook을 먼저 보겠습니다. +React는 `useState` 같은 내장 Hook을 몇 가지 제공합니다. 컴포넌트 간에 상태 관련 로직을 재사용하기 위해 Hook을 직접 만드는 것도 가능합니다. 일단 내장 Hook을 먼저 보겠습니다. >자세한 설명 > @@ -72,9 +72,9 @@ React는 `useState` 같은 내장 Hook을 몇 가지 제공합니다. 컴포넌 React 컴포넌트 안에서 데이터를 가져오거나 구독하고, DOM을 직접 조작하는 작업을 이전에도 종종 해보셨을 것입니다. 우리는 이런 모든 동작을 "side effects"(또는 짧게 "effects")라고 합니다. 왜냐하면 이것은 다른 컴포넌트에 영향을 줄 수도 있고, 렌더링 과정에서는 구현할 수 없는 작업이기 때문입니다. -Effect Hook, 즉 `useEffect`는 함수 컴포넌트 내에서 이런 side effects를 수행할 수 있게 해줍니다. React 클래스의 `componentDidMount` 나 `componentDidUpdate`, `componentWillUnmount`와 같은 목적으로 제공되지만, 하나의 API로 통합된 것입니다. (`useEffect`와 이 세 가지 메서드를 비교하는 예시가 [Using the Effect Hook](/docs/hooks-effect.html) 문서에 있습니다.) +Effect Hook, 즉 `useEffect`는 함수 컴포넌트 내에서 이런 side effects를 수행할 수 있게 해줍니다. React class의 `componentDidMount` 나 `componentDidUpdate`, `componentWillUnmount`와 같은 목적으로 제공되지만, 하나의 API로 통합된 것입니다. (`useEffect`와 이 세 가지 메서드를 비교하는 예시가 [Using the Effect Hook](/docs/hooks-effect.html) 문서에 있습니다.) -예를 들어, 이 예제는 React가 DOM을 업데이트한 뒤에 문서의 타이틀을 바꾸는 컴포넌트입니다. +예를 들어, 이 예시는 React가 DOM을 업데이트한 뒤에 문서의 타이틀을 바꾸는 컴포넌트입니다. ```js{1,6-10} import React, { useState, useEffect } from 'react'; @@ -99,9 +99,9 @@ function Example() { } ``` -`useEffect`를 사용하면, React는 DOM을 바꾼 뒤에 "effect" 함수를 실행할 것입니다. Effects는 컴포넌트 안에 선언되어있기 때문에 props와 state에 접근할 수 있습니다. 기본적으로 React는 매 렌더링 이후에 effects를 실행합니다. 첫 번째 렌더링도 *포함해서요*. (클래스 생명주기(lifecycle)와 다른 점은 [Using the Effect Hook](/docs/hooks-effect.html) 문서에서 더 자세히 다루고 있습니다.) +`useEffect`를 사용하면, React는 DOM을 바꾼 뒤에 "effect" 함수를 실행할 것입니다. Effects는 컴포넌트 안에 선언되어있기 때문에 props와 state에 접근할 수 있습니다. 기본적으로 React는 매 렌더링 이후에 effects를 실행합니다. 첫 번째 렌더링도 *포함해서요*. (Class 생명주기(lifecycle)와 다른 점은 [Using the Effect Hook](/docs/hooks-effect.html) 문서에서 더 자세히 다루고 있습니다.) -Effect를 "해제"할 필요가 있다면, 해제하는 함수를 반환해주면 됩니다. 이는 선택적입니다(optional). 예를 들어, 이 컴포넌트는 친구의 온라인 여부를 구독하는 effect를 사용했고, 구독을 해지함으로써 해제해줍니다. +Effect를 "해제"할 필요가 있다면, 해제하는 함수를 반환해주면 됩니다. 이는 선택적입니다(optional). 예를 들어, 이 컴포넌트는 친구의 접속 상태를 구독하는 effect를 사용했고, 구독을 해지함으로써 해제해줍니다. ```js{10-16} import React, { useState, useEffect } from 'react'; @@ -128,7 +128,7 @@ function FriendStatus(props) { } ``` -이 예제에서 컴포넌트가 unmount될 때 React는 `ChatAPI`에서 구독을 해지할 것입니다. 또한 재 렌더링이 일어나 effect를 재실행하기 전에도 마찬가지로 구독을 해지합니다. (만약 원한다면 `props.friend.id`가 바뀌지 않았을 때 [재구독을 건너뛰도록 설정](/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects)할 수 있습니다.) +이 예시에서 컴포넌트가 unmount될 때 React는 `ChatAPI`에서 구독을 해지할 것입니다. 또한 재 렌더링이 일어나 effect를 재실행하기 전에도 마찬가지로 구독을 해지합니다. (만약 원한다면 `props.friend.id`가 바뀌지 않았을 때 [재구독을 건너뛰도록 설정](/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects)할 수 있습니다.) `useState`와 마찬가지로 컴포넌트 내에서 여러 개의 effect를 사용할 수 있습니다. @@ -153,7 +153,7 @@ function FriendStatusWithCounter(props) { // ... ``` -Hook을 사용하면 -- 구독을 추가하고 제거하는 로직 같은 -- 서로 관련 있는 코드들을 한군데에 모아서 작성할 수 있습니다. 반면 클래스 컴포넌트에서는 생명주기 메서드(lifecycle methods) 각각에 쪼개서 넣어야만 했습니다. +Hook을 사용하면 구독을 추가하고 제거하는 로직과 같이 서로 관련 있는 코드들을 한군데에 모아서 작성할 수 있습니다. 반면 class 컴포넌트에서는 생명주기 메서드(lifecycle methods) 각각에 쪼개서 넣어야만 했습니다. >자세한 설명 > @@ -174,9 +174,9 @@ Hook은 그냥 JavaScript 함수이지만, 두 가지 규칙을 준수해야 합 ## 💡 나만의 Hook 만들기 {#building-your-own-hooks} -개발을 하다 보면 가끔 stateful 로직을 컴포넌트 간에 재사용하고 싶은 경우가 생깁니다. 이 문제를 해결하기 위한 전통적인 방법이 두 가지 있었는데, [higher-order components](/docs/higher-order-components.html)와 [render props](/docs/render-props.html)가 바로 그것입니다. Custom Hook은 이들 둘과는 달리 컴포넌트 트리에 새 컴포넌트를 추가하지 않고도 이것을 가능하게 해줍니다. +개발을 하다 보면 가끔 상태 관련 로직을 컴포넌트 간에 재사용하고 싶은 경우가 생깁니다. 이 문제를 해결하기 위한 전통적인 방법이 두 가지 있었는데, [higher-order components](/docs/higher-order-components.html)와 [render props](/docs/render-props.html)가 바로 그것입니다. Custom Hook은 이들 둘과는 달리 컴포넌트 트리에 새 컴포넌트를 추가하지 않고도 이것을 가능하게 해줍니다. -친구의 온라인 여부를 구독하기 위해서 `useState`와 `useEffect` Hook을 사용한 `FriendStatus` 컴포넌트 예제를 다시 한번 보겠습니다. 이 로직을 다른 컴포넌트에서도 재사용하고 싶다고 가정을 해봅시다. +친구의 접속 상태를 구독하기 위해서 `useState`와 `useEffect` Hook을 사용한 `FriendStatus` 컴포넌트 예시를 다시 한번 보겠습니다. 이 로직을 다른 컴포넌트에서도 재사용하고 싶다고 가정을 해봅시다. 먼저, 이 로직을 `useFriendStatus`라는 custom Hook으로 뽑아냅니다. @@ -201,7 +201,7 @@ function useFriendStatus(friendID) { } ``` -이 Hook은 `friendID`를 인자로 받아서 친구의 온라인 여부를 반환해줍니다. +이 Hook은 `friendID`를 인자로 받아서 친구의 접속 상태를 반환해줍니다. 이제 우리는 이것을 여러 컴포넌트에서 사용할 수 있습니다. @@ -228,7 +228,7 @@ function FriendListItem(props) { } ``` -각 컴포넌트의 state는 완전히 독립적입니다. Hook은 state 그 자체가 아니라, *stateful logic*을 재사용하는 방법입니다. 실제로 각각의 Hook *호출*은 완전히 독립된 state를 가집니다. 그래서 심지어는 한 컴포넌트 안에서 같은 custom Hook을 두 번 쓸 수도 있습니다. +각 컴포넌트의 state는 완전히 독립적입니다. Hook은 state 그 자체가 아니라, *상태 관련 로직*을 재사용하는 방법입니다. 실제로 각각의 Hook *호출*은 완전히 독립된 state를 가집니다. 그래서 심지어는 한 컴포넌트 안에서 같은 custom Hook을 두 번 쓸 수도 있습니다. Custom Hook은 기능이라기보다는 컨벤션(convention)에 가깝습니다. 이름이 "`use`"로 시작하고, 안에서 다른 Hook을 호출한다면 그 함수를 custom Hook이라고 부를 수 있습니다. `useSomething`이라는 네이밍 컨벤션은 linter 플러그인이 Hook을 인식하고 버그를 찾을 수 있게 해줍니다. @@ -268,4 +268,4 @@ function Todos() { 또한 [Hooks API reference](/docs/hooks-reference.html)와 [Hooks FAQ](/docs/hooks-faq.html)도 참고하시기 바랍니다. -마지막으로, 우리가 *왜* Hook을 추가하는지 그 이유와, -- 앱을 재작성하지 않고도 -- 클래스와 함께 Hook을 사용하는 방법을 설명한 [소개 페이지](/docs/hooks-intro.html)도 놓치지 마세요. +마지막으로, 우리가 *왜* Hook을 추가하는지 그 이유와 앱을 재작성하지 않고도 class와 함께 Hook을 사용하는 방법을 설명한 [소개 페이지](/docs/hooks-intro.html)도 놓치지 마세요.