From a7396a03105aaa18b268042e9fc046cb591818f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=8F=99=ED=98=81?= Date: Fri, 8 Mar 2019 12:23:27 +0900 Subject: [PATCH 1/5] translate the hooks-state to korean --- content/docs/hooks-state.md | 138 ++++++++++++++++++------------------ 1 file changed, 69 insertions(+), 69 deletions(-) diff --git a/content/docs/hooks-state.md b/content/docs/hooks-state.md index 052aecb33..3ca07bb4e 100644 --- a/content/docs/hooks-state.md +++ b/content/docs/hooks-state.md @@ -6,15 +6,15 @@ next: hooks-effect.html prev: hooks-overview.html --- -*Hooks* are a new addition in React 16.8. They let you use state and other React features without writing a class. +*훅*은 리액트 16.8버전에 새로 추가되었습니다. 훅은 클래스를 작성하지 않아도 state와 같은 클래스만의 특징들을 사용할 수 있습니다. -The [previous page](/docs/hooks-intro.html) introduced Hooks with this example: +[이전 페이지](/docs/hooks-intro.html)에서 아래의 예제를 통해 훅을 소개했습니다. ```js{4-5} import React, { useState } from 'react'; function Example() { - // Declare a new state variable, which we'll call "count" + // 새로운 state 변수를 선언하고, count라 부르겠습니다. const [count, setCount] = useState(0); return ( @@ -28,11 +28,11 @@ function Example() { } ``` -We'll start learning about Hooks by comparing this code to an equivalent class example. +아래의 클래스 예제와 비교하며 훅의 특징에 대해 배울 예정입니다. -## Equivalent Class Example {#equivalent-class-example} +## 클래스 예제 {#equivalent-class-example} -If you used classes in React before, this code should look familiar: +리액트에서 클래스를 사용해봤다면, 아래의 코드는 익숙할 겁니다. ```js class Example extends React.Component { @@ -56,39 +56,39 @@ class Example extends React.Component { } ``` -The state starts as `{ count: 0 }`, and we increment `state.count` when the user clicks a button by calling `this.setState()`. We'll use snippets from this class throughout the page. +위 코드에서 state는 `{ count: 0 }`이며 사용자가 `this.setState()`를 호출하는 버튼을 클릭했을 때 `state.count`를 증가시킵니다. ->Note +>메모 > ->You might be wondering why we're using a counter here instead of a more realistic example. This is to help us focus on the API while we're still making our first steps with Hooks. +>좀 더 현실적인 예제가 아닌, counter 예제를 사용하는지 궁금해할 수 있습니다. counter 예제는 훅을 잘 이해할 수 있도록 도와주는 가장 기초적인 내용이 될 수 있기 때문입니다. -## Hooks and Function Components {#hooks-and-function-components} +## 훅과 함수 컴포넌트 {#hooks-and-function-components} -As a reminder, function components in React look like this: +리액트의 함수 컴포넌트는 이렇게 생겼습니다. ```js const Example = (props) => { - // You can use Hooks here! + // 여기서 훅을 사용할 수 있습니다! return
; } ``` -or this: +또는 이렇게 생겼습니다. ```js function Example(props) { - // You can use Hooks here! + // 여기서 훅을 사용할 수 있습니다! return
; } ``` -You might have previously known these as "stateless components". We're now introducing the ability to use React state from these, so we prefer the name "function components". +함수 컴포넌트를 "state가 없는 컴포넌트"로 알고 있었을 겁니다. 하지만 훅은 React state를 함수 안에서 사용할 수 있게 해줍니다. -Hooks **don't** work inside classes. But you can use them instead of writing classes. +훅은 클래스 안에서 **동작하지 않습니다.** -## What's a Hook? {#whats-a-hook} +## 훅이란? {#whats-a-hook} -Our new example starts by importing the `useState` Hook from React: +리액트의 `useState` 훅을 사용해봅시다! ```js{1} import React, { useState } from 'react'; @@ -98,17 +98,17 @@ function Example() { } ``` -**What is a Hook?** A Hook is a special function that lets you "hook into" React features. For example, `useState` is a Hook that lets you add React state to function components. We'll learn other Hooks later. +**훅이란?** 훅은 특별한 함수입니다. 예를 들어 `useState`는 state를 함수 컴포넌트 안에서 사용할 수 있게 해줍니다. 다른 훅들은 나중에 살펴봅시다! -**When would I use a Hook?** If you write a function component and realize you need to add some state to it, previously you had to convert it to a class. Now you can use a Hook inside the existing function component. We're going to do that right now! +**언제 훅을 사용할까?** 함수 컴포넌트를 사용하던 중 state를 추가하고 싶을 때 클래스 컴포넌트로 바꾸곤 했을 겁니다. 하지만 이제 함수 컴포넌트 안에서 훅을 이용하여 state를 사용할 수 있습니다. ->Note: +>메모: > ->There are some special rules about where you can and can't use Hooks within a component. We'll learn them in [Rules of Hooks](/docs/hooks-rules.html). +>컴포넌트 안에서 훅을 사용할 때 몇 가지 특별한 규칙이 있습니다. 나중에 [훅의 규칙](/docs/hooks-rules.html)에서 살펴보도록 할게요! -## Declaring a State Variable {#declaring-a-state-variable} +## state 변수 선언하기 {#declaring-a-state-variable} -In a class, we initialize the `count` state to `0` by setting `this.state` to `{ count: 0 }` in the constructor: +클래스를 사용할 때, constructor 안에서 `this.state`를 `{ count: 0 }`로 설정함으로써 `count`를 `0`으로 초기화했습니다. ```js{4-6} class Example extends React.Component { @@ -120,58 +120,57 @@ class Example extends React.Component { } ``` -In a function component, we have no `this`, so we can't assign or read `this.state`. Instead, we call the `useState` Hook directly inside our component: +함수 컴포넌트는 `this`를 가질 수 없기 때문에 `this.state`를 할당하거나 읽을 수 없습니다. 대신, `useState` 훅을 직접 컴포넌트에 호출합니다: ```js{4,5} import React, { useState } from 'react'; function Example() { - // Declare a new state variable, which we'll call "count" + // 새로운 state 변수를 선언하고, 이것을 count라 부르겠습니다. const [count, setCount] = useState(0); ``` -**What does calling `useState` do?** It declares a "state variable". Our variable is called `count` but we could call it anything else, like `banana`. This is a way to "preserve" some values between the function calls — `useState` is a new way to use the exact same capabilities that `this.state` provides in a class. Normally, variables "disappear" when the function exits but state variables are preserved by React. +**`useState`를 호출하는 것은 무엇을 하는 걸까요?** "state 변수"를 선언할 수 있습니다. 위에 선언한 변수는 `count`라고 부르지만 `banana`처럼 아무 이름으로 지어도 됩니다. `useState`는 클래스 컴포넌트의 `this.state`가 제공하는 기능과 똑같습니다. 일반적으로 일반 변수는 함수가 끝날 때 사라지지만, state 변수는 리액트에의해 사라지지 않습니다. -**What do we pass to `useState` as an argument?** The only argument to the `useState()` Hook is the initial state. Unlike with classes, the state doesn't have to be an object. We can keep a number or a string if that's all we need. In our example, we just want a number for how many times the user clicked, so pass `0` as initial state for our variable. (If we wanted to store two different values in state, we would call `useState()` twice.) +**`useState`의 인자로 무엇을 넘겨주어야 할까요?** `useState()`훅의 인자로 넘겨주는 값은 state의 초기 값입니다. 함수 컴포넌트의 State는 클래와는 달리 객체를 가질 수 없고, 숫자 타입과 문자 타입을 가질 수 있습니다. 위의 예제는 사용자가 버튼을 얼마나 많이 클릭했는지 알기를 원하므로 `0`을 해당 state의 초기 값으로 선언했습니다.(만약 2개의 다른 변수를 저장하기를 원한다면 `useState()`를 두 번 호출해야 합니다.) -**What does `useState` return?** It returns a pair of values: the current state and a function that updates it. This is why we write `const [count, setCount] = useState()`. This is similar to `this.state.count` and `this.setState` in a class, except you get them in a pair. If you're not familiar with the syntax we used, we'll come back to it [at the bottom of this page](/docs/hooks-state.html#tip-what-do-square-brackets-mean). +**`useState`는 무엇을 반환할까요?** State 변수, 해당 변수를 갱신할 수 있는 함수 이 두 가지 쌍을 반환합니다. 이것이 바로 `const [count, setCount] = useState()`라고 쓰는 이유입니다. 클래스 컴포넌트의 `this.state.count`와 `this.setState`와 유사합니다. 만약 이러한 문법에 익숙하지 않다면 [현재 페이지의 끝](/docs/hooks-state.html#tip-what-do-square-brackets-mean)에서 살펴볼게요. -Now that we know what the `useState` Hook does, our example should make more sense: +이제 `useState`를 이용하여 많은 것을 만들 수 있습니다. ```js{4,5} import React, { useState } from 'react'; function Example() { - // Declare a new state variable, which we'll call "count" + // 새로운 state 변수를 선언하고, 이것을 count라 부르겠습니다. const [count, setCount] = useState(0); ``` -We declare a state variable called `count`, and set it to `0`. React will remember its current value between re-renders, and provide the most recent one to our function. If we want to update the current `count`, we can call `setCount`. +`count`라고 부르는 State 변수를 선언하고 `0`으로 초기화합니다. 리액트는 해당 변수를 다시 렌더링할 때 기억하고, 가장 최근에 갱신된 값을 제공합니다. `count` 변수의 값을 갱신하려면 `setCount`를 호출하면 됩니다. ->Note +>메모 > ->You might be wondering: why is `useState` not named `createState` instead? +>왜 `createState`가 아닌, `useState`로 이름을 지었을까? > ->"Create" wouldn't be quite accurate because the state is only created the first time our component renders. During the next renders, `useState` gives us the current state. Otherwise it wouldn't be "state" at all! There's also a reason why Hook names *always* start with `use`. We'll learn why later in the [Rules of Hooks](/docs/hooks-rules.html). +>컴포넌트가 렌더링할 때 오직 한 번만 생성되기 때문에 "Create"라는 이름은 꽤 정확하지 않을 수 있습니다. 컴포넌트가 다음 렌더링을 하는 동안 `useState`는 현재 state를 줍니다. 훅 이름이 항상 `use`로 시작하는 이유도 있습니다. [훅의 규칙들](/docs/hooks-rules.html)에서 나중에 살펴보도록 할게요. -## Reading State {#reading-state} +## state 가져오기 {#reading-state} -When we want to display the current count in a class, we read `this.state.count`: +클래스 컴포넌트는 count를 보여주기 위해 `this.state.count`를 사용합니다. ```js

You clicked {this.state.count} times

``` -In a function, we can use `count` directly: - +반면 함수 컴포넌트는 `count`를 직접 사용할 수 있습니다. ```js

You clicked {count} times

``` -## Updating State {#updating-state} +## state 갱신하기 {#updating-state} -In a class, we need to call `this.setState()` to update the `count` state: +클래스 컴포넌트는 `count`를 갱신하기 위해 `this.setState()`를 호출합니다. ```js{1} ``` -In a function, we already have `setCount` and `count` as variables so we don't need `this`: +반면 함수 컴포넌트는 `setCount`와 `count` 변수를 가지고 있으므로 `this`를 호출하지 않아도 됩니다. ```js{1} ``` -## Recap {#recap} +## 고쳐보기 {#recap} -Let's now **recap what we learned line by line** and check our understanding. +**아래 코드를 한 줄 한 줄 살펴보고**, 얼마나 이해했는지 체크해봅시다. -```js{1,4,9} +```js {1,4,9} 1: import React, { useState } from 'react'; 2: 3: function Example() { @@ -211,15 +211,15 @@ function Example() { 14: } ``` -* **첫 번째 줄:** `useState` 훅을 리액트에서 가져옵니다. -* **네 번째 줄:** `useState` 훅을 이용하면 state 변수와 해당 state를 갱신할 수 있는 함수가 만들어집니다. 또한, `useState`의 인자의 값으로 `0`을 넘겨주면 `count` 값을 0으로 초기화할 수 있습니다. -* **Line 9:** 사용자가 버튼을 클릭을 하면 `setConut` 함수를 호출하여 state 변수를 갱신합니다. 리액트는 새로운 `count` 변수를 `Example` 컴포넌트에 넘기며 해당 컴포넌트를 다시 렌더링합니다. +* **첫 번째 줄:** `useState` hook을 React에서 가져옵니다. +* **네 번째 줄:** `useState` hook을 이용하면 state 변수와 해당 state를 갱신할 수 있는 함수가 만들어집니다. 또한, `useState`의 인자의 값으로 `0`을 넘겨주면 `count` 값을 0으로 초기화할 수 있습니다. +* **Line 9:** 사용자가 버튼 클릭을 하면 `setConut` 함수를 호출하여 state 변수를 갱신합니다. React는 새로운 `count` 변수를 `Example` 컴포넌트에 넘기며 해당 컴포넌트를 리렌더링합니다. -많은 것들이 있기 때문에 처음에는 다소 어려울 수 있습니다. 설명이 이해가 잘 안 된다면, 위의 코드를 천천히 다시 읽어보세요. 클래스 컴포넌트에서 사용하던 state 동작 방식을 잊고, 새로운 눈으로 위의 코드를 보면 분명히 이해가 갈 거예요. +많은 것들이 있기 때문에 처음에는 다소 어려울 수 있습니다. 설명이 이해가 잘 안 된다면, 위의 코드를 천천히 다시 읽어보세요. 클래스 컴포넌트에서 사용하던 state 동작 방식을 잊고, 새로운 눈으로 위의 코드를 보면 분명히 이해가 갈 것입니다. 대괄호가 의미하는 것은 무엇일까요? {#tip-what-do-square-brackets-mean} -대괄호를 이용하여 state 변수를 선언하는 것을 인지했을 겁니다. +대괄호를 이용하여 state 변수를 선언하는 것을 보셨을 겁니다. ```js const [count, setCount] = useState(0); @@ -235,17 +235,17 @@ function Example() { ```js var fruitStateVariable = useState('banana'); // 두 개의 아이템이 있는 쌍을 반환 - var fruit = fruitStateVariable[0]; // 첫 번쨰 아이템 - var setFruit = fruitStateVariable[1]; // 두 번쨰 아이템 + var fruit = fruitStateVariable[0]; // 첫 번째 아이템 + var setFruit = fruitStateVariable[1]; // 두 번째 아이템 ``` `useState`를 이용하여 변수를 선언하면 2개의 아이템 쌍이 들어있는 배열로 만들어집니다. 첫 번째 아이템은 현재 변수를 의미하고, 두 번째 아이템은 해당 변수를 갱신해주는 함수입니다. 배열 구조 분해라는 특별한 방법으로 변수를 선언해주었기 때문에 `[0]`이나 `[1]`로 배열에 접근하는 것은 좋지 않을 수 있습니다. >주의 > ->`this`를 리액트에 알리지 않았는데, 어떻게 리액트가 특정 컴포넌트에서 `useState`를 사용한 것을 아는 지 궁금해할 수 있습니다. [이 질문](/docs/hooks-faq.html#how-does-react-associate-hook-calls-with-components)과 다른 궁금 사항들은 나중에 살펴보겠습니다. +>`this`를 React에 알리지 않았는데, 어떻게 React가 특정 컴포넌트에서 `useState`를 사용한 것을 아는 지 궁금해할 수 있습니다. [이 질문](/docs/hooks-faq.html#how-does-react-associate-hook-calls-with-components)과 다른 궁금 사항들은 나중에 살펴보겠습니다. -### 팁: 여러 개의 State 변수를 사용하기 {#tip-using-multiple-state-variables} +### 팁: 여러 개의 state 변수를 사용하기 {#tip-using-multiple-state-variables} `[something, setSomething]`의 쌍처럼 state 변수를 선언하는 것은 유용합니다. 왜냐하면 여러 개의 변수를 선언할 때 각각 다른 이름을 줄 수 있기 때문입니다. @@ -266,15 +266,14 @@ function ExampleWithManyStates() { } ``` -여러 개의 state 변수를 **사용하지 않아도 됩니다.** State 변수는 객체와 배열을 잘 가지고 있을 수 있으므로 서로 연관있는 데이터를 묶을 수 있습니다. 하지만 클래스 컴포넌트의 `this.setState`와 달리 state를 갱신하는 것은 병합하는 것이 아니라 *대체*하는 것입니다. +여러 개의 state 변수를 **사용하지 않아도 됩니다.** state 변수는 객체와 배열을 잘 가지고 있을 수 있으므로 서로 연관있는 데이터를 묶을 수 있습니다. 하지만 클래스 컴포넌트의 `this.setState`와 달리 state를 갱신하는 것은 병합하는 것이 아니라 *대체*하는 것입니다. 독립적인 state 변수를 나눌 수 있는 많은 방법을 제공하고 있습니다 [자주 묻는 질문](/docs/hooks-faq.html#should-i-use-one-or-many-state-variables). ## 다음 단계 {#next-steps} -이번 페이지에서 리액트의 훅 중 하나인 `useState`에 대해 배웠습니다. `useState`를 이용하면 함수 컴포넌트 안에서 state를 사용할 수 있습니다. +이번 페이지에서 React의 hook 중 하나인 `useState`에 대해 배웠습니다. `useState`를 이용하면 함수 컴포넌트 안에서 state를 사용할 수 있습니다. -훅은 함수 컴포넌트에서 리액트의 특징을 갖게 해주는 함수입니다. 훅은 항상 `use`라는 키워드로 시작하며 `useState` 이외에 아직 보지 못한 많은 훅들이 있습니다. - -**다음 강좌를 이어서 합시다. [다음 훅 강좌: `useEffect`.](/docs/hooks-effect.html)** 다음에 배울 훅은 클래스 컴포넌트의 생명주기와 비슷한 퍼포먼스를 낼 수 있습니다. +hook은 함수 컴포넌트에서 React의 특징을 갖게 해주는 함수입니다. hook은 항상 `use`라는 키워드로 시작하며 `useState` 이외에 아직 보지 못한 많은 hook들이 있습니다. +**다음 강좌를 이어서 합시다. [다음 hook 강좌: `useEffect`.](/docs/hooks-effect.html)** 다음에 배울 hook은 클래스 컴포넌트의 생명주기와 비슷한 퍼포먼스를 낼 수 있습니다. \ No newline at end of file From eb9c72bd383abf5ad61ac33d699467ee32014f26 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=8F=99=ED=98=81?= Date: Wed, 27 Mar 2019 18:20:46 +0900 Subject: [PATCH 4/5] hook -> Hook --- content/docs/hooks-state.md | 46 ++++++++++++++++++------------------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/content/docs/hooks-state.md b/content/docs/hooks-state.md index cdef62f55..d9588ddf2 100644 --- a/content/docs/hooks-state.md +++ b/content/docs/hooks-state.md @@ -6,9 +6,9 @@ next: hooks-effect.html prev: hooks-overview.html --- -*hook*은 React 16.8버전에 새로 추가되었습니다. hook은 클래스 컴포넌트를 작성하지 않아도 state와 같은 특징들을 사용할 수 있습니다. +*Hook*은 React 16.8버전에 새로 추가되었습니다. Hook은 클래스 컴포넌트를 작성하지 않아도 state와 같은 특징들을 사용할 수 있습니다. -[이전 페이지](/docs/hooks-intro.html)에서 아래의 예시를 통해 hook을 소개했습니다. +[이전 페이지](/docs/hooks-intro.html)에서 아래의 예시를 통해 Hook을 소개했습니다. ```js{4-5} import React, { useState } from 'react'; @@ -28,9 +28,9 @@ function Example() { } ``` -아래의 클래스 예시와 비교하며 hook의 특징에 대해 배울 예정입니다. +아래의 클래스 예시와 비교하며 Hook의 특징에 대해 배울 예정입니다. -## hook과 같은 기능을 하는 클래스 예시 {#equivalent-class-example} +## Hook과 같은 기능을 하는 클래스 예시 {#equivalent-class-example} React에서 클래스를 사용해봤다면, 아래의 코드는 익숙할 겁니다. @@ -60,15 +60,15 @@ class Example extends React.Component { >주의 > ->좀 더 현실적인 예시가 아닌, counter 예시를 사용하는지 궁금할 수 있습니다. counter 예시를 사용한 이유는, hook을 잘 이해할 수 있도록 도와주는 가장 기초적인 내용이 될 수 있기 때문입니다. +>좀 더 현실적인 예시가 아닌, counter 예시를 사용하는지 궁금할 수 있습니다. counter 예시를 사용한 이유는, Hook을 잘 이해할 수 있도록 도와주는 가장 기초적인 내용이 될 수 있기 때문입니다. -## hook과 함수 컴포넌트 {#hooks-and-function-components} +## Hook과 함수 컴포넌트 {#hooks-and-function-components} React의 함수 컴포넌트는 이렇게 생겼습니다. ```js const Example = (props) => { - // 여기서 hook을 사용할 수 있습니다! + // 여기서 Hook을 사용할 수 있습니다! return
; } ``` @@ -77,18 +77,18 @@ const Example = (props) => { ```js function Example(props) { - // 여기서 hook을 사용할 수 있습니다! + // 여기서 Hook을 사용할 수 있습니다! return
; } ``` -함수 컴포넌트를 "state가 없는 컴포넌트"로 알고 있었을 겁니다. 하지만 hook은 React state를 함수 안에서 사용할 수 있게 해줍니다. +함수 컴포넌트를 "state가 없는 컴포넌트"로 알고 있었을 겁니다. 하지만 Hook은 React state를 함수 안에서 사용할 수 있게 해줍니다. -hook은 클래스 안에서 **동작하지 않습니다.** 하지만 클래스를 작성하지 않고 사용할 수 있습니다. +Hook은 클래스 안에서 **동작하지 않습니다.** 하지만 클래스를 작성하지 않고 사용할 수 있습니다. -## hook이란? {#whats-a-hook} +## Hook이란? {#whats-a-hook} -React의 `useState` hook을 사용해봅시다! +React의 `useState` Hook을 사용해봅시다! ```js{1} import React, { useState } from 'react'; @@ -98,13 +98,13 @@ function Example() { } ``` -**hook이란?** hook은 특별한 함수입니다. 예를 들어 `useState`는 state를 함수 컴포넌트 안에서 사용할 수 있게 해줍니다. 다른 hook들은 나중에 살펴봅시다! +**Hook이란?** Hook은 특별한 함수입니다. 예를 들어 `useState`는 state를 함수 컴포넌트 안에서 사용할 수 있게 해줍니다. 다른 Hook들은 나중에 살펴봅시다! -**언제 hook을 사용할까?** 함수 컴포넌트를 사용하던 중 state를 추가하고 싶을 때 클래스 컴포넌트로 바꾸곤 했을 겁니다. 하지만 이제 함수 컴포넌트 안에서 hook을 이용하여 state를 사용할 수 있습니다. +**언제 Hook을 사용할까?** 함수 컴포넌트를 사용하던 중 state를 추가하고 싶을 때 클래스 컴포넌트로 바꾸곤 했을 겁니다. 하지만 이제 함수 컴포넌트 안에서 Hook을 이용하여 state를 사용할 수 있습니다. >주의 > ->컴포넌트 안에서 hook을 사용할 때 몇 가지 특별한 규칙이 있습니다. 나중에 [hook의 규칙](/docs/hooks-rules.html)에서 살펴보도록 할게요! +>컴포넌트 안에서 Hook을 사용할 때 몇 가지 특별한 규칙이 있습니다. 나중에 [Hook의 규칙](/docs/hooks-rules.html)에서 살펴보도록 할게요! ## state 변수 선언하기 {#declaring-a-state-variable} @@ -120,7 +120,7 @@ class Example extends React.Component { } ``` -함수 컴포넌트는 `this`를 가질 수 없기 때문에 `this.state`를 할당하거나 읽을 수 없습니다. 대신, `useState` hook을 직접 컴포넌트에 호출합니다: +함수 컴포넌트는 `this`를 가질 수 없기 때문에 `this.state`를 할당하거나 읽을 수 없습니다. 대신, `useState` Hook을 직접 컴포넌트에 호출합니다: ```js{4,5} import React, { useState } from 'react'; @@ -132,7 +132,7 @@ function Example() { **`useState`를 호출하는 것은 무엇을 하는 걸까요?** "state 변수"를 선언할 수 있습니다. 위에 선언한 변수는 `count`라고 부르지만 `banana`처럼 아무 이름으로 지어도 됩니다. `useState`는 클래스 컴포넌트의 `this.state`가 제공하는 기능과 똑같습니다. 일반적으로 일반 변수는 함수가 끝날 때 사라지지만, state 변수는 React에의해 사라지지 않습니다. -**`useState`의 인자로 무엇을 넘겨주어야 할까요?** `useState()`hook의 인자로 넘겨주는 값은 state의 초기 값입니다. 함수 컴포넌트의 State는 클래스와 달리 객체를 가질 수 없고, 숫자 타입과 문자 타입을 가질 수 있습니다. 위의 예시는 사용자가 버튼을 얼마나 많이 클릭했는지 알기를 원하므로 `0`을 해당 state의 초기 값으로 선언했습니다.(만약 2개의 다른 변수를 저장하기를 원한다면 `useState()`를 두 번 호출해야 합니다.) +**`useState`의 인자로 무엇을 넘겨주어야 할까요?** `useState()`Hook의 인자로 넘겨주는 값은 state의 초기 값입니다. 함수 컴포넌트의 State는 클래스와 달리 객체를 가질 수 없고, 숫자 타입과 문자 타입을 가질 수 있습니다. 위의 예시는 사용자가 버튼을 얼마나 많이 클릭했는지 알기를 원하므로 `0`을 해당 state의 초기 값으로 선언했습니다.(만약 2개의 다른 변수를 저장하기를 원한다면 `useState()`를 두 번 호출해야 합니다.) **`useState`는 무엇을 반환할까요?** state 변수, 해당 변수를 갱신할 수 있는 함수 이 두 가지 쌍을 반환합니다. 이것이 바로 `const [count, setCount] = useState()`라고 쓰는 이유입니다. 클래스 컴포넌트의 `this.state.count`와 `this.setState`와 유사합니다. 만약 이러한 문법에 익숙하지 않다면 [현재 페이지의 끝](/docs/hooks-state.html#tip-what-do-square-brackets-mean)에서 살펴볼게요. @@ -152,7 +152,7 @@ function Example() { > >왜 `createState`가 아닌, `useState`로 이름을 지었을까? > ->컴포넌트가 렌더링할 때 오직 한 번만 생성되기 때문에 "Create"라는 이름은 꽤 정확하지 않을 수 있습니다. 컴포넌트가 다음 렌더링을 하는 동안 `useState`는 현재 state를 줍니다. hook 이름이 항상 `use`로 시작하는 이유도 있습니다. [hook의 규칙들](/docs/hooks-rules.html)에서 나중에 살펴보도록 할게요. +>컴포넌트가 렌더링할 때 오직 한 번만 생성되기 때문에 "Create"라는 이름은 꽤 정확하지 않을 수 있습니다. 컴포넌트가 다음 렌더링을 하는 동안 `useState`는 현재 state를 줍니다. Hook 이름이 항상 `use`로 시작하는 이유도 있습니다. [Hook의 규칙들](/docs/hooks-rules.html)에서 나중에 살펴보도록 할게요. ## state 가져오기 {#reading-state} @@ -211,8 +211,8 @@ function Example() { 14: } ``` -* **첫 번째 줄:** `useState` hook을 React에서 가져옵니다. -* **네 번째 줄:** `useState` hook을 이용하면 state 변수와 해당 state를 갱신할 수 있는 함수가 만들어집니다. 또한, `useState`의 인자의 값으로 `0`을 넘겨주면 `count` 값을 0으로 초기화할 수 있습니다. +* **첫 번째 줄:** `useState` Hook을 React에서 가져옵니다. +* **네 번째 줄:** `useState` Hook을 이용하면 state 변수와 해당 state를 갱신할 수 있는 함수가 만들어집니다. 또한, `useState`의 인자의 값으로 `0`을 넘겨주면 `count` 값을 0으로 초기화할 수 있습니다. * **Line 9:** 사용자가 버튼 클릭을 하면 `setConut` 함수를 호출하여 state 변수를 갱신합니다. React는 새로운 `count` 변수를 `Example` 컴포넌트에 넘기며 해당 컴포넌트를 리렌더링합니다. 많은 것들이 있기 때문에 처음에는 다소 어려울 수 있습니다. 설명이 이해가 잘 안 된다면, 위의 코드를 천천히 다시 읽어보세요. 클래스 컴포넌트에서 사용하던 state 동작 방식을 잊고, 새로운 눈으로 위의 코드를 보면 분명히 이해가 갈 것입니다. @@ -272,8 +272,8 @@ function ExampleWithManyStates() { ## 다음 단계 {#next-steps} -이번 페이지에서 React의 hook 중 하나인 `useState`에 대해 배웠습니다. `useState`를 이용하면 함수 컴포넌트 안에서 state를 사용할 수 있습니다. +이번 페이지에서 React의 Hook 중 하나인 `useState`에 대해 배웠습니다. `useState`를 이용하면 함수 컴포넌트 안에서 state를 사용할 수 있습니다. -hook은 함수 컴포넌트에서 React의 특징을 갖게 해주는 함수입니다. hook은 항상 `use`라는 키워드로 시작하며 `useState` 이외에 아직 보지 못한 많은 hook들이 있습니다. +Hook은 함수 컴포넌트에서 React의 특징을 갖게 해주는 함수입니다. Hook은 항상 `use`라는 키워드로 시작하며 `useState` 이외에 아직 보지 못한 많은 Hook들이 있습니다. -**다음 강좌를 이어서 합시다. [다음 hook 강좌: `useEffect`.](/docs/hooks-effect.html)** 다음에 배울 hook은 클래스 컴포넌트의 생명주기와 비슷한 퍼포먼스를 낼 수 있습니다. \ No newline at end of file +**다음 강좌를 이어서 합시다. [다음 Hook 강좌: `useEffect`.](/docs/hooks-effect.html)** 다음에 배울 Hook은 클래스 컴포넌트의 생명주기와 비슷한 퍼포먼스를 낼 수 있습니다. \ No newline at end of file From bfdb5293d8b40a7c6781834cf0d70ad322444d68 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=8F=99=ED=98=81?= Date: Mon, 1 Apr 2019 10:43:50 +0900 Subject: [PATCH 5/5] fix 3rd issues --- content/docs/hooks-state.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/content/docs/hooks-state.md b/content/docs/hooks-state.md index d9588ddf2..5fe535e20 100644 --- a/content/docs/hooks-state.md +++ b/content/docs/hooks-state.md @@ -130,9 +130,9 @@ function Example() { const [count, setCount] = useState(0); ``` -**`useState`를 호출하는 것은 무엇을 하는 걸까요?** "state 변수"를 선언할 수 있습니다. 위에 선언한 변수는 `count`라고 부르지만 `banana`처럼 아무 이름으로 지어도 됩니다. `useState`는 클래스 컴포넌트의 `this.state`가 제공하는 기능과 똑같습니다. 일반적으로 일반 변수는 함수가 끝날 때 사라지지만, state 변수는 React에의해 사라지지 않습니다. +**`useState`를 호출하는 것은 무엇을 하는 걸까요?** "state 변수"를 선언할 수 있습니다. 위에 선언한 변수는 `count`라고 부르지만 `banana`처럼 아무 이름으로 지어도 됩니다. `useState`는 클래스 컴포넌트의 `this.state`가 제공하는 기능과 똑같습니다. 일반적으로 일반 변수는 함수가 끝날 때 사라지지만, state 변수는 React에 의해 사라지지 않습니다. -**`useState`의 인자로 무엇을 넘겨주어야 할까요?** `useState()`Hook의 인자로 넘겨주는 값은 state의 초기 값입니다. 함수 컴포넌트의 State는 클래스와 달리 객체를 가질 수 없고, 숫자 타입과 문자 타입을 가질 수 있습니다. 위의 예시는 사용자가 버튼을 얼마나 많이 클릭했는지 알기를 원하므로 `0`을 해당 state의 초기 값으로 선언했습니다.(만약 2개의 다른 변수를 저장하기를 원한다면 `useState()`를 두 번 호출해야 합니다.) +**`useState`의 인자로 무엇을 넘겨주어야 할까요?** `useState()`Hook의 인자로 넘겨주는 값은 state의 초기 값입니다. 함수 컴포넌트의 state는 클래스와 달리 객체를 가질 수 없고, 숫자 타입과 문자 타입을 가질 수 있습니다. 위의 예시는 사용자가 버튼을 얼마나 많이 클릭했는지 알기를 원하므로 `0`을 해당 state의 초기 값으로 선언했습니다. (2개의 다른 변수를 저장하기를 원한다면 `useState()`를 두 번 호출해야 합니다.) **`useState`는 무엇을 반환할까요?** state 변수, 해당 변수를 갱신할 수 있는 함수 이 두 가지 쌍을 반환합니다. 이것이 바로 `const [count, setCount] = useState()`라고 쓰는 이유입니다. 클래스 컴포넌트의 `this.state.count`와 `this.setState`와 유사합니다. 만약 이러한 문법에 익숙하지 않다면 [현재 페이지의 끝](/docs/hooks-state.html#tip-what-do-square-brackets-mean)에서 살펴볼게요. @@ -150,9 +150,9 @@ function Example() { >주의 > ->왜 `createState`가 아닌, `useState`로 이름을 지었을까? +>왜 `createState`가 아닌, `useState`로 이름을 지었을까요? > ->컴포넌트가 렌더링할 때 오직 한 번만 생성되기 때문에 "Create"라는 이름은 꽤 정확하지 않을 수 있습니다. 컴포넌트가 다음 렌더링을 하는 동안 `useState`는 현재 state를 줍니다. Hook 이름이 항상 `use`로 시작하는 이유도 있습니다. [Hook의 규칙들](/docs/hooks-rules.html)에서 나중에 살펴보도록 할게요. +>컴포넌트가 렌더링할 때 오직 한 번만 생성되기 때문에 "Create"라는 이름은 꽤 정확하지 않을 수 있습니다. 컴포넌트가 다음 렌더링을 하는 동안 `useState`는 현재 state를 줍니다. Hook 이름이 항상 `use`로 시작하는 이유도 있습니다. [Hook의 규칙](/docs/hooks-rules.html)에서 나중에 살펴보도록 할게요. ## state 가져오기 {#reading-state} @@ -213,11 +213,11 @@ function Example() { * **첫 번째 줄:** `useState` Hook을 React에서 가져옵니다. * **네 번째 줄:** `useState` Hook을 이용하면 state 변수와 해당 state를 갱신할 수 있는 함수가 만들어집니다. 또한, `useState`의 인자의 값으로 `0`을 넘겨주면 `count` 값을 0으로 초기화할 수 있습니다. -* **Line 9:** 사용자가 버튼 클릭을 하면 `setConut` 함수를 호출하여 state 변수를 갱신합니다. React는 새로운 `count` 변수를 `Example` 컴포넌트에 넘기며 해당 컴포넌트를 리렌더링합니다. +* **아홉 번째 줄:** 사용자가 버튼 클릭을 하면 `setConut` 함수를 호출하여 state 변수를 갱신합니다. React는 새로운 `count` 변수를 `Example` 컴포넌트에 넘기며 해당 컴포넌트를 리렌더링합니다. 많은 것들이 있기 때문에 처음에는 다소 어려울 수 있습니다. 설명이 이해가 잘 안 된다면, 위의 코드를 천천히 다시 읽어보세요. 클래스 컴포넌트에서 사용하던 state 동작 방식을 잊고, 새로운 눈으로 위의 코드를 보면 분명히 이해가 갈 것입니다. -대괄호가 의미하는 것은 무엇일까요? {#tip-what-do-square-brackets-mean} +### 팁: 대괄호가 의미하는 것은 무엇일까요? {#tip-what-do-square-brackets-mean} 대괄호를 이용하여 state 변수를 선언하는 것을 보셨을 겁니다. @@ -231,7 +231,7 @@ function Example() { const [fruit, setFruit] = useState('banana'); ``` -위 자바스크립트 문법은 ["배열 구조 분해"](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring)라고 하고, `fruit`과 `setFruit`, 총 2개의 값을 만들고 있습니다. 즉, `useState`를 사용하면 `fruit`이라는 첫 번째 값과 `setFruit`라는 두 번째 값을 반환합니다. 아래의 코드와 같은 효과를 낼 수 있습니다. +위 자바스크립트 문법은 ["배열 구조 분해"](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#배열_구조_분해)라고 하고, `fruit`과 `setFruit`, 총 2개의 값을 만들고 있습니다. 즉, `useState`를 사용하면 `fruit`이라는 첫 번째 값과 `setFruit`라는 두 번째 값을 반환합니다. 아래의 코드와 같은 효과를 낼 수 있습니다. ```js var fruitStateVariable = useState('banana'); // 두 개의 아이템이 있는 쌍을 반환 @@ -268,7 +268,7 @@ function ExampleWithManyStates() { 여러 개의 state 변수를 **사용하지 않아도 됩니다.** state 변수는 객체와 배열을 잘 가지고 있을 수 있으므로 서로 연관있는 데이터를 묶을 수 있습니다. 하지만 클래스 컴포넌트의 `this.setState`와 달리 state를 갱신하는 것은 병합하는 것이 아니라 *대체*하는 것입니다. -독립적인 state 변수를 나눌 수 있는 많은 방법을 제공하고 있습니다 [자주 묻는 질문](/docs/hooks-faq.html#should-i-use-one-or-many-state-variables). +독립적인 state 변수 분할에 대한 추가적인 권장 사항을 자주 묻는 질문에서 볼 수 있습니다. [자주 묻는 질문](/docs/hooks-faq.html#should-i-use-one-or-many-state-variables). ## 다음 단계 {#next-steps}