From 97339f96f57b01ccf93b98468e7f8f1634ee3cbe Mon Sep 17 00:00:00 2001 From: Eunjeong Park Date: Fri, 12 Apr 2019 00:18:36 +0900 Subject: [PATCH 01/10] Start to translate --- content/docs/faq-state.md | 74 +++++++++++++++++++-------------------- 1 file changed, 37 insertions(+), 37 deletions(-) diff --git a/content/docs/faq-state.md b/content/docs/faq-state.md index c2b7b6657..8439dbac4 100644 --- a/content/docs/faq-state.md +++ b/content/docs/faq-state.md @@ -1,30 +1,30 @@ --- id: faq-state -title: Component State +title: 컴포넌트 State permalink: docs/faq-state.html layout: docs category: FAQ --- -### What does `setState` do? {#what-does-setstate-do} +### `setState`는 무슨 일을 하나요? {#what-does-setstate-do} -`setState()` schedules an update to a component's `state` object. When state changes, the component responds by re-rendering. +`setState()`는 `state` 객체의 변경사항을 대기열에 밀어넣습니다. state가 변경되면, 컴포넌트는 다시 렌더링하여 변경사항을 반영합니다. -### What is the difference between `state` and `props`? {#what-is-the-difference-between-state-and-props} +### `state`와 `props`의 차이점은 무엇인가요? {#what-is-the-difference-between-state-and-props} -[`props`](/docs/components-and-props.html) (short for "properties") and [`state`](/docs/state-and-lifecycle.html) are both plain JavaScript objects. While both hold information that influences the output of render, they are different in one important way: `props` get passed *to* the component (similar to function parameters) whereas `state` is managed *within* the component (similar to variables declared within a function). +[`props`](/docs/components-and-props.html) ("properties"의 줄임말) 와 [`state`](/docs/state-and-lifecycle.html) 는 순수 JavaScript 객체입니다. 두 객체 모두 렌더링 출력에 영향을 주는 정보를 지니고 있는데, 한 가지 중요한 방식에서 차이점을 보입니다. `props`는 (함수 매개변수처럼) 컴포넌트*에게* 전달되는 반면 `state`는 (함수 안에 선언된 변수처럼) 컴포넌트 *안에서* 관리됩니다. -Here are some good resources for further reading on when to use `props` vs `state`: +언제 `prop`와 `state`를 사용하는지에 대해 더 알고싶다면 아래 자료를 확인해보세요. * [Props vs State](https://github.com/uberVU/react-guide/blob/master/props-vs-state.md) * [ReactJS: Props vs. State](https://lucybain.com/blog/2016/react-state-vs-pros/) -### Why is `setState` giving me the wrong value? {#why-is-setstate-giving-me-the-wrong-value} +### 왜 `setState`가 잘못된 값을 주는 걸까요? {#why-is-setstate-giving-me-the-wrong-value} -In React, both `this.props` and `this.state` represent the *rendered* values, i.e. what's currently on the screen. +React에서 `this.props`와 `this.state`는 모두 *렌더링된* 값을 나타냅니다. 예를 들면, 현재 화면에 보이는 것들이 있습니다. -Calls to `setState` are asynchronous - don't rely on `this.state` to reflect the new value immediately after calling `setState`. Pass an updater function instead of an object if you need to compute values based on the current state (see below for details). +`setState` 호출은 비동기적입니다. 따라서 `setState` 호출 직후 새로운 값이 `this.state` 에 반영되는 것이 보장되지 않습니다. 만약 현재 state에 해당하는 값을 계산해야 한다면 객체 대신 updater 함수를 넘기세요 (아래 자세한 내용이 있습니다). -Example of code that will *not* behave as expected: +예시 코드는 예상대로 동작하지 *않을 것입니다.* ```jsx incrementCount() { @@ -33,74 +33,74 @@ incrementCount() { } handleSomething() { - // Let's say `this.state.count` starts at 0. + // `this.state.count`가 0에서 시작한다고 해봅시다. this.incrementCount(); this.incrementCount(); this.incrementCount(); - // When React re-renders the component, `this.state.count` will be 1, but you expected 3. + // React가 컴포넌트를 다시 렌더링할 때, `this.state.count`는 3이 될 것 같지만 사실 1이 됩니다. - // This is because `incrementCount()` function above reads from `this.state.count`, - // but React doesn't update `this.state.count` until the component is re-rendered. - // So `incrementCount()` ends up reading `this.state.count` as 0 every time, and sets it to 1. + // 이것은 위에 정의된 `incrementCount()` 함수가 `this.state.count`로부터 값을 읽어오지만 + // React는 컴포넌트가 다시 렌더링될 때까지 `this.state.count`를 업데이트 하지 않습니다. + // 따라서 `incrementCount()`는 매번 `this.state.count`의 값을 0으로 읽은 뒤 값을 1로 설정합니다. - // The fix is described below! + // 이 문제의 해결 방법은 아래에 설명되어 있습니다! } ``` -See below for how to fix this problem. +어떻게 이 문제를 해결하는지 알아봅시다. -### How do I update state with values that depend on the current state? {#how-do-i-update-state-with-values-that-depend-on-the-current-state} +### 어떻게 하면 현재 state에 의존하는 값들로 state를 업데이트할 수 있나요? {#how-do-i-update-state-with-values-that-depend-on-the-current-state} -Pass a function instead of an object to `setState` to ensure the call always uses the most updated version of state (see below). +`setState` 에 객체 대신 함수를 전달하세요. 이를 통해 이 함수 호출이 (아래 나와 있는) 가장 최근에 업데이트된 state를 항상 사용한다는 사실을 보장할 수 있습니다. -### What is the difference between passing an object or a function in `setState`? {#what-is-the-difference-between-passing-an-object-or-a-function-in-setstate} +### `setState`에 객체를 전달하는 것과 함수를 전달하는 것의 차이는 무엇인가요? {#what-is-the-difference-between-passing-an-object-or-a-function-in-setstate} -Passing an update function allows you to access the current state value inside the updater. Since `setState` calls are batched, this lets you chain updates and ensure they build on top of each other instead of conflicting: +업데이트 함수를 전달하면 updater 안에서 현재 state 값에 접근 할 수 있게 됩니다. Since `setState` calls are batched, this lets you chain updates and ensure they build on top of each other instead of conflicting: ```jsx incrementCount() { this.setState((state) => { - // Important: read `state` instead of `this.state` when updating. + // 중요: 업데이트를 할 때 `this.state` 대신 `state`를 읽습니다. return {count: state.count + 1} }); } handleSomething() { - // Let's say `this.state.count` starts at 0. + // `this.state.count`가 0에서 시작한다고 해봅시다. this.incrementCount(); this.incrementCount(); this.incrementCount(); - // If you read `this.state.count` now, it would still be 0. - // But when React re-renders the component, it will be 3. + // 이제 `this.state.count`를 읽으면 이 값은 여전히 0일 것입니다. + // 하지만 React re-renders the 컴포넌트, it will be 3. } ``` -[Learn more about setState](/docs/react-component.html#setstate) +[setState에 대해 더 공부하기](/docs/react-component.html#setstate) -### When is `setState` asynchronous? {#when-is-setstate-asynchronous} +### 언제 `setState` 가 비동기인가요? {#when-is-setstate-asynchronous} -Currently, `setState` is asynchronous inside event handlers. +현재 `setState` 는 이벤트 핸들러 안에서 비동기적입니다. This ensures, for example, that if both `Parent` and `Child` call `setState` during a click event, `Child` isn't re-rendered twice. Instead, React "flushes" the state updates at the end of the browser event. This results in significant performance improvements in larger apps. This is an implementation detail so avoid relying on it directly. In the future versions, React will batch updates by default in more cases. -### Why doesn't React update `this.state` synchronously? {#why-doesnt-react-update-thisstate-synchronously} +### 왜 React는`this.state` 를 동기적으로 업데이트하지 않나요? {#why-doesnt-react-update-thisstate-synchronously} -As explained in the previous section, React intentionally "waits" until all components call `setState()` in their event handlers before starting to re-render. This boosts performance by avoiding unnecessary re-renders. +이전 섹션에서 설명했듯이, React는 다시 렌더링을 하기 전에 내부적으로 모든 컴포넌트가 자신의 이벤트 핸들러에서 `setState()` 를 호출하기 전까지 "기다립니다". 이를 통해 불필요한 리렌더링을 방지하면서 성능을 증가시킵니다. -However, you might still be wondering why React doesn't just update `this.state` immediately without re-rendering. +그러나 왜 React가 리렌더링하지 않고 즉시 `this.state` 를 업데이트하지 않는지에 대해 여전히 궁금해하실 수도 있습니다. -There are two main reasons: +두 가지 주된 원인이 존재합니다. -* This would break the consistency between `props` and `state`, causing issues that are very hard to debug. +* `props` 와 `state` 사이의 일관성을 해칠 수 있으며 이것은 디버깅하기 매우 힘든 이슈를 일으킬 수 있기 때문입니다. * This would make some of the new features we're working on impossible to implement. -This [GitHub comment](https://github.com/facebook/react/issues/11527#issuecomment-360199710) dives deep into the specific examples. +This [GitHub 코멘트](https://github.com/facebook/react/issues/11527#issuecomment-360199710) dives deep into the specific examples. -### Should I use a state management library like Redux or MobX? {#should-i-use-a-state-management-library-like-redux-or-mobx} +### Redux나 MobX와 같은 상태('state') 관리 라이브러리를 사용해야 하나요? {#should-i-use-a-state-management-library-like-redux-or-mobx} -[Maybe.](https://redux.js.org/faq/general#when-should-i-use-redux) +[아마도 그렇습니다.](https://redux.js.org/faq/general#when-should-i-use-redux) -It's a good idea to get to know React first, before adding in additional libraries. You can build quite complex applications using only React. +추가적인 라이브러리를 사용하기전에 먼저 React에 익숙해지는 게 좋습니다. React만으로도 꽤 복잡한 애플리케이션을 만들 수 있습니다. From 3af8a9853dd453fac0107cc6f1edc520c037cd10 Mon Sep 17 00:00:00 2001 From: Eunjeong Park Date: Fri, 19 Apr 2019 17:17:35 +0900 Subject: [PATCH 02/10] Translate draft version --- content/docs/faq-state.md | 62 +++++++++++++++++++-------------------- 1 file changed, 31 insertions(+), 31 deletions(-) diff --git a/content/docs/faq-state.md b/content/docs/faq-state.md index 8439dbac4..5a15994d5 100644 --- a/content/docs/faq-state.md +++ b/content/docs/faq-state.md @@ -6,29 +6,29 @@ layout: docs category: FAQ --- -### `setState`는 무슨 일을 하나요? {#what-does-setstate-do} +### `setState`는 어떤 일을 하나요? {#what-does-setstate-do} -`setState()`는 `state` 객체의 변경사항을 대기열에 밀어넣습니다. state가 변경되면, 컴포넌트는 다시 렌더링하여 변경사항을 반영합니다. +`setState()`는 `state` 객체의 변경사항을 대기열에 밀어 넣습니다. state가 변경되면, 컴포넌트는 변경사항을 다시 렌더링하여 반영합니다. ### `state`와 `props`의 차이점은 무엇인가요? {#what-is-the-difference-between-state-and-props} -[`props`](/docs/components-and-props.html) ("properties"의 줄임말) 와 [`state`](/docs/state-and-lifecycle.html) 는 순수 JavaScript 객체입니다. 두 객체 모두 렌더링 출력에 영향을 주는 정보를 지니고 있는데, 한 가지 중요한 방식에서 차이점을 보입니다. `props`는 (함수 매개변수처럼) 컴포넌트*에게* 전달되는 반면 `state`는 (함수 안에 선언된 변수처럼) 컴포넌트 *안에서* 관리됩니다. +[`props`](/docs/components-and-props.html) ("properties"의 줄임말) 와 [`state`](/docs/state-and-lifecycle.html) 는 일반 JavaScript 객체입니다. 두 객체 모두 렌더링 출력 결과에 영향을 주는 정보를 갖고 있는데, 한 가지 중요한 점에서 다릅니다. `props`는 (함수 매개변수처럼) 컴포넌트*에* 전달되는 반면 `state`는 (함수 안에 선언된 변수처럼) 컴포넌트 *안에서* 관리됩니다. -언제 `prop`와 `state`를 사용하는지에 대해 더 알고싶다면 아래 자료를 확인해보세요. +언제 `prop`와 `state`를 사용하는지를 더 알고 싶다면 아래 자료를 확인해보세요. * [Props vs State](https://github.com/uberVU/react-guide/blob/master/props-vs-state.md) * [ReactJS: Props vs. State](https://lucybain.com/blog/2016/react-state-vs-pros/) ### 왜 `setState`가 잘못된 값을 주는 걸까요? {#why-is-setstate-giving-me-the-wrong-value} -React에서 `this.props`와 `this.state`는 모두 *렌더링된* 값을 나타냅니다. 예를 들면, 현재 화면에 보이는 것들이 있습니다. +React에서 `this.props`와 `this.state`는 모두 *렌더링 된* 값을 나타냅니다. 예를 들면, 현재 화면에 보이는 것들이 있습니다. -`setState` 호출은 비동기적입니다. 따라서 `setState` 호출 직후 새로운 값이 `this.state` 에 반영되는 것이 보장되지 않습니다. 만약 현재 state에 해당하는 값을 계산해야 한다면 객체 대신 updater 함수를 넘기세요 (아래 자세한 내용이 있습니다). +`setState` 호출은 비동기적으로 이뤄집니다. 따라서 `setState` 호출 직후 새로운 값이 `this.state` 에 반영될 거라고 믿어서는 안 됩니다. 만약 현재 state에 기반하여 값을 계산해야 한다면 객체 대신 updater 함수를 전달하세요. (자세한 내용은 아래를 확인하세요.) -예시 코드는 예상대로 동작하지 *않을 것입니다.* +예시 코드는 예상대로 동작하지 *않을 것*입니다. ```jsx incrementCount() { - // Note: this will *not* work as intended. + // Note: 이 코드는 예상대로 동작하지 *않을 것*입니다. this.setState({count: this.state.count + 1}); } @@ -37,30 +37,32 @@ handleSomething() { this.incrementCount(); this.incrementCount(); this.incrementCount(); - // React가 컴포넌트를 다시 렌더링할 때, `this.state.count`는 3이 될 것 같지만 사실 1이 됩니다. + // React가 컴포넌트를 다시 렌더링할 때 `this.state.count`는 3이 될 것 같은 예상과는 달리 1이 됩니다. - // 이것은 위에 정의된 `incrementCount()` 함수가 `this.state.count`로부터 값을 읽어오지만 - // React는 컴포넌트가 다시 렌더링될 때까지 `this.state.count`를 업데이트 하지 않습니다. - // 따라서 `incrementCount()`는 매번 `this.state.count`의 값을 0으로 읽은 뒤 값을 1로 설정합니다. + // 이것은 `incrementCount()` 함수가 `this.state.count`에서 값을 읽어 오는데 + // React는 컴포넌트가 다시 렌더링 될 때까지 `this.state.count`를 업데이트하지 않기 때문입니다. + // 따라서 `incrementCount()`는 `this.state.count`에서 연달아 0 값을 읽고 나서 마지막에 이 값을 1로 변경합니다. // 이 문제의 해결 방법은 아래에 설명되어 있습니다! } ``` -어떻게 이 문제를 해결하는지 알아봅시다. +이 문제의 해결 방법은 아래에서 확인하세요. -### 어떻게 하면 현재 state에 의존하는 값들로 state를 업데이트할 수 있나요? {#how-do-i-update-state-with-values-that-depend-on-the-current-state} +### 어떻게 하면 현재 state에 의존하는 값으로 state를 업데이트할 수 있나요? {#how-do-i-update-state-with-values-that-depend-on-the-current-state} -`setState` 에 객체 대신 함수를 전달하세요. 이를 통해 이 함수 호출이 (아래 나와 있는) 가장 최근에 업데이트된 state를 항상 사용한다는 사실을 보장할 수 있습니다. +`setState` 가 가장 최신의 state 값을 사용하도록 보장하기 위해서는 `setState` 에 객체 대신 함수를 전달하세요. -### `setState`에 객체를 전달하는 것과 함수를 전달하는 것의 차이는 무엇인가요? {#what-is-the-difference-between-passing-an-object-or-a-function-in-setstate} +### `setState`에 객체를 전달하는 것과 함수를 전달하는 것은 어떤 차이가 있나요? {#what-is-the-difference-between-passing-an-object-or-a-function-in-setstate} -업데이트 함수를 전달하면 updater 안에서 현재 state 값에 접근 할 수 있게 됩니다. Since `setState` calls are batched, this lets you chain updates and ensure they build on top of each other instead of conflicting: +updater 함수를 전달하면 updater 함수 안에서 현재 state 값에 접근할 수 있게 됩니다. `setState` 호출은 일괄 처리되므로 연관된 업데이트를 묶어주고, 충돌 없이 하나씩 ~ 됨을 보장합니다. (?????????) + +this lets you chain updates and ensure they build on top of each other instead of conflicting: ```jsx incrementCount() { this.setState((state) => { - // 중요: 업데이트를 할 때 `this.state` 대신 `state`를 읽습니다. + // 중요: 값을 업데이트할 때 `this.state` 대신 `state`로부터 값을 읽어옵니다. return {count: state.count + 1} }); } @@ -71,36 +73,34 @@ handleSomething() { this.incrementCount(); this.incrementCount(); - // 이제 `this.state.count`를 읽으면 이 값은 여전히 0일 것입니다. - // 하지만 React re-renders the 컴포넌트, it will be 3. + // 지금 `this.state.count`의 값을 읽어 보면 이 값은 여전히 0일 것입니다. + // 하지만 React가 컴포넌트를 다시 렌더링하게 되면 이 값은 3이 됩니다. } ``` [setState에 대해 더 공부하기](/docs/react-component.html#setstate) -### 언제 `setState` 가 비동기인가요? {#when-is-setstate-asynchronous} - -현재 `setState` 는 이벤트 핸들러 안에서 비동기적입니다. +### 언제 `setState` 가 비동기적인가요? {#when-is-setstate-asynchronous} -This ensures, for example, that if both `Parent` and `Child` call `setState` during a click event, `Child` isn't re-rendered twice. Instead, React "flushes" the state updates at the end of the browser event. This results in significant performance improvements in larger apps. +현재 `setState` 는 이벤트 핸들러 안에서 비동기적입니다. 이 사실은 예를 들자면 `부모` 와 `자식` 이 click 이벤트 중 동시에 `setState` 를 호출한다면 `자식` 은 다시 렌더링 되지 않는다는 것을 보장합니다. 대신, React는 브라우저 이벤트가 끝날 시점에 state 업데이트를 "한 번에 몰아서 ?? (flushes)". 이것은 더 큰 앱에서 눈에 띄는 성능 향상을 끌어냅니다. This is an implementation detail so avoid relying on it directly. In the future versions, React will batch updates by default in more cases. -### 왜 React는`this.state` 를 동기적으로 업데이트하지 않나요? {#why-doesnt-react-update-thisstate-synchronously} +### 왜 React는 `this.state` 를 동기적으로 업데이트하지 않나요? {#why-doesnt-react-update-thisstate-synchronously} -이전 섹션에서 설명했듯이, React는 다시 렌더링을 하기 전에 내부적으로 모든 컴포넌트가 자신의 이벤트 핸들러에서 `setState()` 를 호출하기 전까지 "기다립니다". 이를 통해 불필요한 리렌더링을 방지하면서 성능을 증가시킵니다. +이전 섹션에서 설명했듯이, React는 다시 렌더링을 시작하기 전에, 모든 컴포넌트가 자신의 이벤트 핸들러 내에서 `setState()` 를 호출할 때까지 내부적으로 "기다리고 있습니다". 이를 통해 불필요한 렌더링을 방지하면서 성능을 향상시킵니다. -그러나 왜 React가 리렌더링하지 않고 즉시 `this.state` 를 업데이트하지 않는지에 대해 여전히 궁금해하실 수도 있습니다. +그러나 React는 왜 렌더링 없이 즉시 `this.state` 를 업데이트하지 않는지를 여전히 궁금해하실 수도 있습니다. -두 가지 주된 원인이 존재합니다. +두 가지 중요한 이유가 존재합니다. * `props` 와 `state` 사이의 일관성을 해칠 수 있으며 이것은 디버깅하기 매우 힘든 이슈를 일으킬 수 있기 때문입니다. * This would make some of the new features we're working on impossible to implement. -This [GitHub 코멘트](https://github.com/facebook/react/issues/11527#issuecomment-360199710) dives deep into the specific examples. +이 [GitHub 코멘트](https://github.com/facebook/react/issues/11527#issuecomment-360199710)에서 더욱 자세한 예시를 확인할 수 있습니다. -### Redux나 MobX와 같은 상태('state') 관리 라이브러리를 사용해야 하나요? {#should-i-use-a-state-management-library-like-redux-or-mobx} +### Redux 나 MobX 같은 상태('state') 관리 라이브러리를 사용해야 하나요? {#should-i-use-a-state-management-library-like-redux-or-mobx} [아마도 그렇습니다.](https://redux.js.org/faq/general#when-should-i-use-redux) -추가적인 라이브러리를 사용하기전에 먼저 React에 익숙해지는 게 좋습니다. React만으로도 꽤 복잡한 애플리케이션을 만들 수 있습니다. +추가적인 라이브러리를 사용하기 전에 먼저 React에 익숙해지는 게 좋습니다. React만으로도 꽤 복잡한 애플리케이션을 만들 수 있습니다. From b4cb47d70eea2e2297c9e07eac77e144a2a78c9a Mon Sep 17 00:00:00 2001 From: Eunjeong Park Date: Mon, 22 Apr 2019 12:08:45 +0900 Subject: [PATCH 03/10] Complete translation --- content/docs/faq-state.md | 48 +++++++++++++++++++-------------------- 1 file changed, 23 insertions(+), 25 deletions(-) diff --git a/content/docs/faq-state.md b/content/docs/faq-state.md index 5a15994d5..62ad36f22 100644 --- a/content/docs/faq-state.md +++ b/content/docs/faq-state.md @@ -8,27 +8,27 @@ category: FAQ ### `setState`는 어떤 일을 하나요? {#what-does-setstate-do} -`setState()`는 `state` 객체의 변경사항을 대기열에 밀어 넣습니다. state가 변경되면, 컴포넌트는 변경사항을 다시 렌더링하여 반영합니다. +`setState()`는 컴포넌트의 `state` 객체에 대한 업데이트를 예약합니다. state가 변경되면, 컴포넌트는 다시 렌더링됩니다. ### `state`와 `props`의 차이점은 무엇인가요? {#what-is-the-difference-between-state-and-props} -[`props`](/docs/components-and-props.html) ("properties"의 줄임말) 와 [`state`](/docs/state-and-lifecycle.html) 는 일반 JavaScript 객체입니다. 두 객체 모두 렌더링 출력 결과에 영향을 주는 정보를 갖고 있는데, 한 가지 중요한 점에서 다릅니다. `props`는 (함수 매개변수처럼) 컴포넌트*에* 전달되는 반면 `state`는 (함수 안에 선언된 변수처럼) 컴포넌트 *안에서* 관리됩니다. +[`props`](/docs/components-and-props.html) ("properties"의 줄임말) 와 [`state`](/docs/state-and-lifecycle.html) 는 일반 JavaScript 객체입니다. 두 객체 모두 렌더링 출력에 영향을 주는 정보를 갖고 있는데, 한 가지 중요한 방식에서 차이가 있습니다. `props`는 (함수 매개변수처럼) 컴포넌트*에* 전달되는 반면 `state`는 (함수 내에 선언된 변수처럼) 컴포넌트 *안에서* 관리됩니다. -언제 `prop`와 `state`를 사용하는지를 더 알고 싶다면 아래 자료를 확인해보세요. +언제 `props`와 `state`를 사용하는지 더 알고 싶다면 아래의 자료를 확인해보세요. * [Props vs State](https://github.com/uberVU/react-guide/blob/master/props-vs-state.md) * [ReactJS: Props vs. State](https://lucybain.com/blog/2016/react-state-vs-pros/) ### 왜 `setState`가 잘못된 값을 주는 걸까요? {#why-is-setstate-giving-me-the-wrong-value} -React에서 `this.props`와 `this.state`는 모두 *렌더링 된* 값을 나타냅니다. 예를 들면, 현재 화면에 보이는 것들이 있습니다. +React에서 `this.props`와 `this.state`는 모두 *렌더링된* 값을 나타냅니다. 다시 말해 현재 화면에 보이는 것을 말합니다. -`setState` 호출은 비동기적으로 이뤄집니다. 따라서 `setState` 호출 직후 새로운 값이 `this.state` 에 반영될 거라고 믿어서는 안 됩니다. 만약 현재 state에 기반하여 값을 계산해야 한다면 객체 대신 updater 함수를 전달하세요. (자세한 내용은 아래를 확인하세요.) +`setState` 호출은 비동기적으로 이뤄집니다. 따라서 `setState` 호출 직후 새로운 값이 `this.state` 에 반영될 거라고 믿어서는 안 됩니다. 만약 이전 state 값을 기준으로 값을 계산해야 한다면 객체 대신 updater 함수를 전달하세요. (자세한 내용은 아래를 확인하세요.) 예시 코드는 예상대로 동작하지 *않을 것*입니다. ```jsx incrementCount() { - // Note: 이 코드는 예상대로 동작하지 *않을 것*입니다. + // 주의: 이 코드는 예상대로 동작하지 *않을 것*입니다. this.setState({count: this.state.count + 1}); } @@ -37,32 +37,30 @@ handleSomething() { this.incrementCount(); this.incrementCount(); this.incrementCount(); - // React가 컴포넌트를 다시 렌더링할 때 `this.state.count`는 3이 될 것 같은 예상과는 달리 1이 됩니다. + // React가 컴포넌트를 다시 렌더링할 때 `this.state.count`는 3이 될 것 같은 예상과 달리 1이 됩니다. // 이것은 `incrementCount()` 함수가 `this.state.count`에서 값을 읽어 오는데 - // React는 컴포넌트가 다시 렌더링 될 때까지 `this.state.count`를 업데이트하지 않기 때문입니다. - // 따라서 `incrementCount()`는 `this.state.count`에서 연달아 0 값을 읽고 나서 마지막에 이 값을 1로 변경합니다. + // React는 컴포넌트가 다시 렌더링 될 때까지 `this.state.count`를 갱신하지 않기 때문입니다. + // 그러므로 `incrementCount()`는 매번 `this.state.count`의 값을 0으로 읽은 뒤에 이 값을 1로 설정합니다. - // 이 문제의 해결 방법은 아래에 설명되어 있습니다! + // 이 문제의 해결 방법은 아래에 설명되어 있습니다. } ``` -이 문제의 해결 방법은 아래에서 확인하세요. +이 문제를 어떻게 해결하는지 알아봅시다. -### 어떻게 하면 현재 state에 의존하는 값으로 state를 업데이트할 수 있나요? {#how-do-i-update-state-with-values-that-depend-on-the-current-state} +### 어떻게 하면 이전 state 값을 기준으로 state 값을 업데이트할 수 있나요? {#how-do-i-update-state-with-values-that-depend-on-the-current-state} -`setState` 가 가장 최신의 state 값을 사용하도록 보장하기 위해서는 `setState` 에 객체 대신 함수를 전달하세요. +항상 `setState` 가 가장 최신의 state 값을 사용하도록 보장하기 위해서는 `setState` 에 객체 대신 함수를 전달하세요. (아래를 참조하세요.) ### `setState`에 객체를 전달하는 것과 함수를 전달하는 것은 어떤 차이가 있나요? {#what-is-the-difference-between-passing-an-object-or-a-function-in-setstate} -updater 함수를 전달하면 updater 함수 안에서 현재 state 값에 접근할 수 있게 됩니다. `setState` 호출은 일괄 처리되므로 연관된 업데이트를 묶어주고, 충돌 없이 하나씩 ~ 됨을 보장합니다. (?????????) - -this lets you chain updates and ensure they build on top of each other instead of conflicting: +updater 함수를 전달하면 updater 함수 안에서 이전 state 값에 접근할 수 있습니다. `setState` 호출은 일괄적으로 처리되기 때문에 여러 업데이트 사항이 충돌 없이 차례대로 반영되도록 합니다. ```jsx incrementCount() { this.setState((state) => { - // 중요: 값을 업데이트할 때 `this.state` 대신 `state`로부터 값을 읽어옵니다. + // 중요: 값을 업데이트할 때 `this.state` 대신 `state` 값을 읽어옵니다. return {count: state.count + 1} }); } @@ -73,29 +71,29 @@ handleSomething() { this.incrementCount(); this.incrementCount(); - // 지금 `this.state.count`의 값을 읽어 보면 이 값은 여전히 0일 것입니다. + // 지금 `this.state.count` 값을 읽어 보면 이 값은 여전히 0일 것입니다. // 하지만 React가 컴포넌트를 다시 렌더링하게 되면 이 값은 3이 됩니다. } ``` -[setState에 대해 더 공부하기](/docs/react-component.html#setstate) +[setState에 대해 더 알아보기](/docs/react-component.html#setstate) ### 언제 `setState` 가 비동기적인가요? {#when-is-setstate-asynchronous} -현재 `setState` 는 이벤트 핸들러 안에서 비동기적입니다. 이 사실은 예를 들자면 `부모` 와 `자식` 이 click 이벤트 중 동시에 `setState` 를 호출한다면 `자식` 은 다시 렌더링 되지 않는다는 것을 보장합니다. 대신, React는 브라우저 이벤트가 끝날 시점에 state 업데이트를 "한 번에 몰아서 ?? (flushes)". 이것은 더 큰 앱에서 눈에 띄는 성능 향상을 끌어냅니다. +현재 `setState` 는 이벤트 핸들러 내에서 비동기적입니다. 이로 인해 만약 `부모`와 `자식`이 모두 click 이벤트에서 `setState`를 호출한다면 `자식`은 두 번 렌더링되지 않습니다. 대신 React는 브라우저 이벤트가 끝날 시점에 state를 일괄적으로 업데이트합니다. 이는 더 큰 규모의 앱에서 뚜렷한 성능 향상을 만들어냅니다. -This is an implementation detail so avoid relying on it directly. In the future versions, React will batch updates by default in more cases. +이것은 구현 세부사항이므로 전적으로 의존해선 안됩니다. 추후 React는 기본적으로 더 많은 경우에서 일괄적으로 업데이트를 처리할 것입니다. ### 왜 React는 `this.state` 를 동기적으로 업데이트하지 않나요? {#why-doesnt-react-update-thisstate-synchronously} -이전 섹션에서 설명했듯이, React는 다시 렌더링을 시작하기 전에, 모든 컴포넌트가 자신의 이벤트 핸들러 내에서 `setState()` 를 호출할 때까지 내부적으로 "기다리고 있습니다". 이를 통해 불필요한 렌더링을 방지하면서 성능을 향상시킵니다. +이전 장에서 설명했듯이 모든 컴포넌트가 자신의 이벤트 핸들러에서 `setState()`를 호출할 때까지 React는 다시 렌더링을 하지 않고 내부적으로 "기다리고 있습니다". 이를 통해 불필요한 렌더링을 방지하면서 성능을 향상합니다. -그러나 React는 왜 렌더링 없이 즉시 `this.state` 를 업데이트하지 않는지를 여전히 궁금해하실 수도 있습니다. +그러나 왜 React는 다시 렌더링을 하는 것 대신 즉시 `this.state`를 업데이트하지 않는지 여전히 궁금해하실 수도 있습니다. -두 가지 중요한 이유가 존재합니다. +여기에는 두 가지 중요한 이유가 존재합니다. * `props` 와 `state` 사이의 일관성을 해칠 수 있으며 이것은 디버깅하기 매우 힘든 이슈를 일으킬 수 있기 때문입니다. -* This would make some of the new features we're working on impossible to implement. +* 현재 작업 중인 새로운 기능들을 구현하기 힘들게 만들 수 있기 때문입니다. 이 [GitHub 코멘트](https://github.com/facebook/react/issues/11527#issuecomment-360199710)에서 더욱 자세한 예시를 확인할 수 있습니다. From cf7bd9e18703badec4072703b23c77aa76788f9f Mon Sep 17 00:00:00 2001 From: Eunjeong Park Date: Mon, 22 Apr 2019 12:13:19 +0900 Subject: [PATCH 04/10] Modify translation of 'schedules' --- content/docs/faq-state.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/faq-state.md b/content/docs/faq-state.md index 62ad36f22..60406c257 100644 --- a/content/docs/faq-state.md +++ b/content/docs/faq-state.md @@ -8,7 +8,7 @@ category: FAQ ### `setState`는 어떤 일을 하나요? {#what-does-setstate-do} -`setState()`는 컴포넌트의 `state` 객체에 대한 업데이트를 예약합니다. state가 변경되면, 컴포넌트는 다시 렌더링됩니다. +`setState()`는 컴포넌트의 `state` 객체에 대한 업데이트를 실행합니다. state가 변경되면, 컴포넌트는 다시 렌더링됩니다. ### `state`와 `props`의 차이점은 무엇인가요? {#what-is-the-difference-between-state-and-props} From 12fd4900fff53bf5a5e2aad87c0e996abec7283c Mon Sep 17 00:00:00 2001 From: Eunjeong Park Date: Mon, 22 Apr 2019 12:15:21 +0900 Subject: [PATCH 05/10] Apply original linebreak --- content/docs/faq-state.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/content/docs/faq-state.md b/content/docs/faq-state.md index 60406c257..c6e85222b 100644 --- a/content/docs/faq-state.md +++ b/content/docs/faq-state.md @@ -80,7 +80,9 @@ handleSomething() { ### 언제 `setState` 가 비동기적인가요? {#when-is-setstate-asynchronous} -현재 `setState` 는 이벤트 핸들러 내에서 비동기적입니다. 이로 인해 만약 `부모`와 `자식`이 모두 click 이벤트에서 `setState`를 호출한다면 `자식`은 두 번 렌더링되지 않습니다. 대신 React는 브라우저 이벤트가 끝날 시점에 state를 일괄적으로 업데이트합니다. 이는 더 큰 규모의 앱에서 뚜렷한 성능 향상을 만들어냅니다. +현재 `setState` 는 이벤트 핸들러 내에서 비동기적입니다. + +이로 인해 만약 `부모`와 `자식`이 모두 click 이벤트에서 `setState`를 호출한다면 `자식`은 두 번 렌더링되지 않습니다. 대신 React는 브라우저 이벤트가 끝날 시점에 state를 일괄적으로 업데이트합니다. 이는 더 큰 규모의 앱에서 뚜렷한 성능 향상을 만들어냅니다. 이것은 구현 세부사항이므로 전적으로 의존해선 안됩니다. 추후 React는 기본적으로 더 많은 경우에서 일괄적으로 업데이트를 처리할 것입니다. From bd521452d2679e052fce77cea71627a0cbd99089 Mon Sep 17 00:00:00 2001 From: Eunjeong Park Date: Mon, 22 Apr 2019 12:20:58 +0900 Subject: [PATCH 06/10] =?UTF-8?q?Change=20tranlation=20'=EB=8B=A4=EC=8B=9C?= =?UTF-8?q?=20=EB=A0=8C=EB=8D=94=EB=A7=81'=20to=20'=EB=A6=AC=EB=A0=8C?= =?UTF-8?q?=EB=8D=94=EB=A7=81'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/faq-state.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/content/docs/faq-state.md b/content/docs/faq-state.md index c6e85222b..6b8730708 100644 --- a/content/docs/faq-state.md +++ b/content/docs/faq-state.md @@ -8,7 +8,7 @@ category: FAQ ### `setState`는 어떤 일을 하나요? {#what-does-setstate-do} -`setState()`는 컴포넌트의 `state` 객체에 대한 업데이트를 실행합니다. state가 변경되면, 컴포넌트는 다시 렌더링됩니다. +`setState()`는 컴포넌트의 `state` 객체에 대한 업데이트를 실행합니다. state가 변경되면, 컴포넌트는 리렌더링됩니다. ### `state`와 `props`의 차이점은 무엇인가요? {#what-is-the-difference-between-state-and-props} @@ -37,10 +37,10 @@ handleSomething() { this.incrementCount(); this.incrementCount(); this.incrementCount(); - // React가 컴포넌트를 다시 렌더링할 때 `this.state.count`는 3이 될 것 같은 예상과 달리 1이 됩니다. + // React가 컴포넌트를 리렌더링할 때 `this.state.count`는 3이 될 것 같은 예상과 달리 1이 됩니다. // 이것은 `incrementCount()` 함수가 `this.state.count`에서 값을 읽어 오는데 - // React는 컴포넌트가 다시 렌더링 될 때까지 `this.state.count`를 갱신하지 않기 때문입니다. + // React는 컴포넌트가 리렌더링될 때까지 `this.state.count`를 갱신하지 않기 때문입니다. // 그러므로 `incrementCount()`는 매번 `this.state.count`의 값을 0으로 읽은 뒤에 이 값을 1로 설정합니다. // 이 문제의 해결 방법은 아래에 설명되어 있습니다. @@ -72,7 +72,7 @@ handleSomething() { this.incrementCount(); // 지금 `this.state.count` 값을 읽어 보면 이 값은 여전히 0일 것입니다. - // 하지만 React가 컴포넌트를 다시 렌더링하게 되면 이 값은 3이 됩니다. + // 하지만 React가 컴포넌트를 리렌더링하게 되면 이 값은 3이 됩니다. } ``` @@ -88,9 +88,9 @@ handleSomething() { ### 왜 React는 `this.state` 를 동기적으로 업데이트하지 않나요? {#why-doesnt-react-update-thisstate-synchronously} -이전 장에서 설명했듯이 모든 컴포넌트가 자신의 이벤트 핸들러에서 `setState()`를 호출할 때까지 React는 다시 렌더링을 하지 않고 내부적으로 "기다리고 있습니다". 이를 통해 불필요한 렌더링을 방지하면서 성능을 향상합니다. +이전 장에서 설명했듯이 모든 컴포넌트가 자신의 이벤트 핸들러에서 `setState()`를 호출할 때까지 React는 리렌더링을 하지 않고 내부적으로 "기다리고 있습니다". 이를 통해 불필요한 렌더링을 방지하면서 성능을 향상합니다. -그러나 왜 React는 다시 렌더링을 하는 것 대신 즉시 `this.state`를 업데이트하지 않는지 여전히 궁금해하실 수도 있습니다. +그러나 왜 React는 리렌더링을 하는 것 대신 즉시 `this.state`를 업데이트하지 않는지 여전히 궁금해하실 수도 있습니다. 여기에는 두 가지 중요한 이유가 존재합니다. From 7168c2d2e20e52e53fd24d0acbdadf5bec75332a Mon Sep 17 00:00:00 2001 From: Eunjeong Park Date: Mon, 22 Apr 2019 12:24:33 +0900 Subject: [PATCH 07/10] Modify words --- content/docs/faq-state.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/faq-state.md b/content/docs/faq-state.md index 6b8730708..ac644ffc9 100644 --- a/content/docs/faq-state.md +++ b/content/docs/faq-state.md @@ -90,7 +90,7 @@ handleSomething() { 이전 장에서 설명했듯이 모든 컴포넌트가 자신의 이벤트 핸들러에서 `setState()`를 호출할 때까지 React는 리렌더링을 하지 않고 내부적으로 "기다리고 있습니다". 이를 통해 불필요한 렌더링을 방지하면서 성능을 향상합니다. -그러나 왜 React는 리렌더링을 하는 것 대신 즉시 `this.state`를 업데이트하지 않는지 여전히 궁금해하실 수도 있습니다. +그러나 왜 React는 리렌더링 대신 즉시 `this.state`를 업데이트하지 않는지 여전히 궁금해하실 수도 있습니다. 여기에는 두 가지 중요한 이유가 존재합니다. From 763d6386a2b7059c2ac773a274322364f667c2d5 Mon Sep 17 00:00:00 2001 From: Eunjeong Park Date: Tue, 23 Apr 2019 17:29:46 +0900 Subject: [PATCH 08/10] Resolve reviews --- content/docs/faq-state.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/content/docs/faq-state.md b/content/docs/faq-state.md index ac644ffc9..ef97ab539 100644 --- a/content/docs/faq-state.md +++ b/content/docs/faq-state.md @@ -12,7 +12,7 @@ category: FAQ ### `state`와 `props`의 차이점은 무엇인가요? {#what-is-the-difference-between-state-and-props} -[`props`](/docs/components-and-props.html) ("properties"의 줄임말) 와 [`state`](/docs/state-and-lifecycle.html) 는 일반 JavaScript 객체입니다. 두 객체 모두 렌더링 출력에 영향을 주는 정보를 갖고 있는데, 한 가지 중요한 방식에서 차이가 있습니다. `props`는 (함수 매개변수처럼) 컴포넌트*에* 전달되는 반면 `state`는 (함수 내에 선언된 변수처럼) 컴포넌트 *안에서* 관리됩니다. +[`props`](/docs/components-and-props.html) ("properties"의 줄임말) 와 [`state`](/docs/state-and-lifecycle.html) 는 일반 JavaScript 객체입니다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 한 가지 중요한 방식에서 차이가 있습니다. `props`는 (함수 매개변수처럼) 컴포넌트*에* 전달되는 반면 `state`는 (함수 내에 선언된 변수처럼) 컴포넌트 *안에서* 관리됩니다. 언제 `props`와 `state`를 사용하는지 더 알고 싶다면 아래의 자료를 확인해보세요. * [Props vs State](https://github.com/uberVU/react-guide/blob/master/props-vs-state.md) @@ -84,13 +84,13 @@ handleSomething() { 이로 인해 만약 `부모`와 `자식`이 모두 click 이벤트에서 `setState`를 호출한다면 `자식`은 두 번 렌더링되지 않습니다. 대신 React는 브라우저 이벤트가 끝날 시점에 state를 일괄적으로 업데이트합니다. 이는 더 큰 규모의 앱에서 뚜렷한 성능 향상을 만들어냅니다. -이것은 구현 세부사항이므로 전적으로 의존해선 안됩니다. 추후 React는 기본적으로 더 많은 경우에서 일괄적으로 업데이트를 처리할 것입니다. +이것은 구현 세부사항이므로 전적으로 의존해선 안됩니다. 추후 React는 기본적으로 더 많은 경우에서 일괄적으로 업데이트를 처리할 예정입니다. ### 왜 React는 `this.state` 를 동기적으로 업데이트하지 않나요? {#why-doesnt-react-update-thisstate-synchronously} -이전 장에서 설명했듯이 모든 컴포넌트가 자신의 이벤트 핸들러에서 `setState()`를 호출할 때까지 React는 리렌더링을 하지 않고 내부적으로 "기다리고 있습니다". 이를 통해 불필요한 렌더링을 방지하면서 성능을 향상합니다. +이전 장에서 설명했듯이 모든 컴포넌트가 자신의 이벤트 핸들러에서 `setState()`를 호출할 때까지 React는 리렌더링을 하지 않고 내부적으로 "기다리고 있습니다". 이를 통해 불필요한 렌더링을 방지하면서 성능을 향상시킵니다. -그러나 왜 React는 리렌더링 대신 즉시 `this.state`를 업데이트하지 않는지 여전히 궁금해하실 수도 있습니다. +그러나 왜 React는 리렌더링 대신 즉시 `this.state`를 업데이트하지 않는지 여전히 궁금해 하실 수도 있습니다. 여기에는 두 가지 중요한 이유가 존재합니다. @@ -101,6 +101,6 @@ handleSomething() { ### Redux 나 MobX 같은 상태('state') 관리 라이브러리를 사용해야 하나요? {#should-i-use-a-state-management-library-like-redux-or-mobx} -[아마도 그렇습니다.](https://redux.js.org/faq/general#when-should-i-use-redux) +[사용하는게 좋습니다.](https://redux.js.org/faq/general#when-should-i-use-redux) 추가적인 라이브러리를 사용하기 전에 먼저 React에 익숙해지는 게 좋습니다. React만으로도 꽤 복잡한 애플리케이션을 만들 수 있습니다. From ec3241e12a8b080c7100d2d8dc40d530d610eb34 Mon Sep 17 00:00:00 2001 From: Eunjeong Park Date: Fri, 3 May 2019 19:28:18 +0900 Subject: [PATCH 09/10] =?UTF-8?q?Resolve=20reviews=20(translate=20'section?= =?UTF-8?q?'=20->=20'=EC=A0=88')?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/faq-state.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/faq-state.md b/content/docs/faq-state.md index ef97ab539..ad537ff43 100644 --- a/content/docs/faq-state.md +++ b/content/docs/faq-state.md @@ -88,7 +88,7 @@ handleSomething() { ### 왜 React는 `this.state` 를 동기적으로 업데이트하지 않나요? {#why-doesnt-react-update-thisstate-synchronously} -이전 장에서 설명했듯이 모든 컴포넌트가 자신의 이벤트 핸들러에서 `setState()`를 호출할 때까지 React는 리렌더링을 하지 않고 내부적으로 "기다리고 있습니다". 이를 통해 불필요한 렌더링을 방지하면서 성능을 향상시킵니다. +이전 절에서 설명했듯이 모든 컴포넌트가 자신의 이벤트 핸들러에서 `setState()`를 호출할 때까지 React는 리렌더링을 하지 않고 내부적으로 "기다리고 있습니다". 이를 통해 불필요한 렌더링을 방지하면서 성능을 향상시킵니다. 그러나 왜 React는 리렌더링 대신 즉시 `this.state`를 업데이트하지 않는지 여전히 궁금해 하실 수도 있습니다. From a9f18a82d92972575b20101bdcca08888d871984 Mon Sep 17 00:00:00 2001 From: Eunjeong Park Date: Tue, 28 May 2019 23:59:04 +0900 Subject: [PATCH 10/10] Resolve review MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit '사용하는 게 좋습니다.' -> '아마 필요할 수도 있습니다.' --- content/docs/faq-state.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/faq-state.md b/content/docs/faq-state.md index ad537ff43..0f47d9a96 100644 --- a/content/docs/faq-state.md +++ b/content/docs/faq-state.md @@ -101,6 +101,6 @@ handleSomething() { ### Redux 나 MobX 같은 상태('state') 관리 라이브러리를 사용해야 하나요? {#should-i-use-a-state-management-library-like-redux-or-mobx} -[사용하는게 좋습니다.](https://redux.js.org/faq/general#when-should-i-use-redux) +[아마 필요할 수도 있습니다.](https://redux.js.org/faq/general#when-should-i-use-redux) 추가적인 라이브러리를 사용하기 전에 먼저 React에 익숙해지는 게 좋습니다. React만으로도 꽤 복잡한 애플리케이션을 만들 수 있습니다.