Skip to content

Commit b4cb47d

Browse files
committed
Complete translation
1 parent 3af8a98 commit b4cb47d

File tree

1 file changed

+23
-25
lines changed

1 file changed

+23
-25
lines changed

content/docs/faq-state.md

Lines changed: 23 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -8,27 +8,27 @@ category: FAQ
88

99
### `setState`는 어떤 일을 하나요? {#what-does-setstate-do}
1010

11-
`setState()``state` 객체의 변경사항을 대기열에 밀어 넣습니다. state가 변경되면, 컴포넌트는 변경사항을 다시 렌더링하여 반영합니다.
11+
`setState()`컴포넌트의 `state` 객체에 대한 업데이트를 예약합니다. state가 변경되면, 컴포넌트는 다시 렌더링됩니다.
1212

1313
### `state``props`의 차이점은 무엇인가요? {#what-is-the-difference-between-state-and-props}
1414

15-
[`props`](/docs/components-and-props.html) ("properties"의 줄임말) 와 [`state`](/docs/state-and-lifecycle.html) 는 일반 JavaScript 객체입니다. 두 객체 모두 렌더링 출력 결과에 영향을 주는 정보를 갖고 있는데, 한 가지 중요한 점에서 다릅니다. `props`는 (함수 매개변수처럼) 컴포넌트** 전달되는 반면 `state`는 (함수 안에 선언된 변수처럼) 컴포넌트 *안에서* 관리됩니다.
15+
[`props`](/docs/components-and-props.html) ("properties"의 줄임말) 와 [`state`](/docs/state-and-lifecycle.html) 는 일반 JavaScript 객체입니다. 두 객체 모두 렌더링 출력에 영향을 주는 정보를 갖고 있는데, 한 가지 중요한 방식에서 차이가 있습니다. `props`는 (함수 매개변수처럼) 컴포넌트** 전달되는 반면 `state`는 (함수 내에 선언된 변수처럼) 컴포넌트 *안에서* 관리됩니다.
1616

17-
언제 `prop``state`사용하는지를 더 알고 싶다면 아래 자료를 확인해보세요.
17+
언제 `props``state`사용하는지 더 알고 싶다면 아래의 자료를 확인해보세요.
1818
* [Props vs State](https://github.com/uberVU/react-guide/blob/master/props-vs-state.md)
1919
* [ReactJS: Props vs. State](https://lucybain.com/blog/2016/react-state-vs-pros/)
2020

2121
### `setState`가 잘못된 값을 주는 걸까요? {#why-is-setstate-giving-me-the-wrong-value}
2222

23-
React에서 `this.props``this.state`는 모두 *렌더링 된* 값을 나타냅니다. 예를 들면, 현재 화면에 보이는 것들이 있습니다.
23+
React에서 `this.props``this.state`는 모두 *렌더링된* 값을 나타냅니다. 다시 말해 현재 화면에 보이는 것을 말합니다.
2424

25-
`setState` 호출은 비동기적으로 이뤄집니다. 따라서 `setState` 호출 직후 새로운 값이 `this.state` 에 반영될 거라고 믿어서는 안 됩니다. 만약 현재 state에 기반하여 값을 계산해야 한다면 객체 대신 updater 함수를 전달하세요. (자세한 내용은 아래를 확인하세요.)
25+
`setState` 호출은 비동기적으로 이뤄집니다. 따라서 `setState` 호출 직후 새로운 값이 `this.state` 에 반영될 거라고 믿어서는 안 됩니다. 만약 이전 state 값을 기준으로 값을 계산해야 한다면 객체 대신 updater 함수를 전달하세요. (자세한 내용은 아래를 확인하세요.)
2626

2727
예시 코드는 예상대로 동작하지 *않을 것*입니다.
2828

2929
```jsx
3030
incrementCount() {
31-
// Note: 이 코드는 예상대로 동작하지 *않을 것*입니다.
31+
// 주의: 이 코드는 예상대로 동작하지 *않을 것*입니다.
3232
this.setState({count: this.state.count + 1});
3333
}
3434

@@ -37,32 +37,30 @@ handleSomething() {
3737
this.incrementCount();
3838
this.incrementCount();
3939
this.incrementCount();
40-
// React가 컴포넌트를 다시 렌더링할 때 `this.state.count`는 3이 될 것 같은 예상과는 달리 1이 됩니다.
40+
// React가 컴포넌트를 다시 렌더링할 때 `this.state.count`는 3이 될 것 같은 예상과 달리 1이 됩니다.
4141

4242
// 이것은 `incrementCount()` 함수가 `this.state.count`에서 값을 읽어 오는데
43-
// React는 컴포넌트가 다시 렌더링 될 때까지 `this.state.count`를 업데이트하지 않기 때문입니다.
44-
// 따라서 `incrementCount()`는 `this.state.count`에서 연달아 0 값을 읽고 나서 마지막에 이 값을 1로 변경합니다.
43+
// React는 컴포넌트가 다시 렌더링 될 때까지 `this.state.count`를 갱신하지 않기 때문입니다.
44+
// 그러므로 `incrementCount()`는 매번 `this.state.count`값을 0으로 읽은 뒤에 이 값을 1로 설정합니다.
4545

46-
// 이 문제의 해결 방법은 아래에 설명되어 있습니다!
46+
// 이 문제의 해결 방법은 아래에 설명되어 있습니다.
4747
}
4848
```
4949

50-
문제의 해결 방법은 아래에서 확인하세요.
50+
문제를 어떻게 해결하는지 알아봅시다.
5151

52-
### 어떻게 하면 현재 state에 의존하는 값으로 state를 업데이트할 수 있나요? {#how-do-i-update-state-with-values-that-depend-on-the-current-state}
52+
### 어떻게 하면 이전 state 값을 기준으로 state 값을 업데이트할 수 있나요? {#how-do-i-update-state-with-values-that-depend-on-the-current-state}
5353

54-
`setState` 가 가장 최신의 state 값을 사용하도록 보장하기 위해서는 `setState` 에 객체 대신 함수를 전달하세요.
54+
항상 `setState` 가 가장 최신의 state 값을 사용하도록 보장하기 위해서는 `setState` 에 객체 대신 함수를 전달하세요. (아래를 참조하세요.)
5555

5656
### `setState`에 객체를 전달하는 것과 함수를 전달하는 것은 어떤 차이가 있나요? {#what-is-the-difference-between-passing-an-object-or-a-function-in-setstate}
5757

58-
updater 함수를 전달하면 updater 함수 안에서 현재 state 값에 접근할 수 있게 됩니다. `setState` 호출은 일괄 처리되므로 연관된 업데이트를 묶어주고, 충돌 없이 하나씩 ~ 됨을 보장합니다. (?????????)
59-
60-
this lets you chain updates and ensure they build on top of each other instead of conflicting:
58+
updater 함수를 전달하면 updater 함수 안에서 이전 state 값에 접근할 수 있습니다. `setState` 호출은 일괄적으로 처리되기 때문에 여러 업데이트 사항이 충돌 없이 차례대로 반영되도록 합니다.
6159

6260
```jsx
6361
incrementCount() {
6462
this.setState((state) => {
65-
// 중요: 값을 업데이트할 때 `this.state` 대신 `state`로부터 값을 읽어옵니다.
63+
// 중요: 값을 업데이트할 때 `this.state` 대신 `state` 값을 읽어옵니다.
6664
return {count: state.count + 1}
6765
});
6866
}
@@ -73,29 +71,29 @@ handleSomething() {
7371
this.incrementCount();
7472
this.incrementCount();
7573

76-
// 지금 `this.state.count` 값을 읽어 보면 이 값은 여전히 0일 것입니다.
74+
// 지금 `this.state.count` 값을 읽어 보면 이 값은 여전히 0일 것입니다.
7775
// 하지만 React가 컴포넌트를 다시 렌더링하게 되면 이 값은 3이 됩니다.
7876
}
7977
```
8078

81-
[setState에 대해 더 공부하기](/docs/react-component.html#setstate)
79+
[setState에 대해 더 알아보기](/docs/react-component.html#setstate)
8280

8381
### 언제 `setState` 가 비동기적인가요? {#when-is-setstate-asynchronous}
8482

85-
현재 `setState` 는 이벤트 핸들러 안에서 비동기적입니다. 이 사실은 예를 들자면 `부모` `자식`click 이벤트 중 동시에 `setState` 를 호출한다면 `자식` 은 다시 렌더링 되지 않는다는 것을 보장합니다. 대신, React는 브라우저 이벤트가 끝날 시점에 state 업데이트를 "한 번에 몰아서 ?? (flushes)". 이것은 더 큰 앱에서 눈에 띄는 성능 향상을 끌어냅니다.
83+
현재 `setState` 는 이벤트 핸들러 내에서 비동기적입니다. 이로 인해 만약 `부모``자식`이 모두 click 이벤트에서 `setState`를 호출한다면 `자식`은 두 번 렌더링되지 않습니다. 대신 React는 브라우저 이벤트가 끝날 시점에 state를 일괄적으로 업데이트합니다. 이는 더 큰 규모의 앱에서 뚜렷한 성능 향상을 만들어냅니다.
8684

87-
This is an implementation detail so avoid relying on it directly. In the future versions, React will batch updates by default in more cases.
85+
이것은 구현 세부사항이므로 전적으로 의존해선 안됩니다. 추후 React는 기본적으로 더 많은 경우에서 일괄적으로 업데이트를 처리할 것입니다.
8886

8987
### 왜 React는 `this.state` 를 동기적으로 업데이트하지 않나요? {#why-doesnt-react-update-thisstate-synchronously}
9088

91-
이전 섹션에서 설명했듯이, React는 다시 렌더링을 시작하기 전에, 모든 컴포넌트가 자신의 이벤트 핸들러 내에서 `setState()` 를 호출할 때까지 내부적으로 "기다리고 있습니다". 이를 통해 불필요한 렌더링을 방지하면서 성능을 향상시킵니다.
89+
이전 장에서 설명했듯이 모든 컴포넌트가 자신의 이벤트 핸들러에서 `setState()`를 호출할 때까지 React는 다시 렌더링을 하지 않고 내부적으로 "기다리고 있습니다". 이를 통해 불필요한 렌더링을 방지하면서 성능을 향상합니다.
9290

93-
그러나 React는 왜 렌더링 없이 즉시 `this.state` 를 업데이트하지 않는지를 여전히 궁금해하실 수도 있습니다.
91+
그러나 React는 다시 렌더링을 하는 것 대신 즉시 `this.state`를 업데이트하지 않는지 여전히 궁금해하실 수도 있습니다.
9492

95-
두 가지 중요한 이유가 존재합니다.
93+
여기에는 두 가지 중요한 이유가 존재합니다.
9694

9795
* `props``state` 사이의 일관성을 해칠 수 있으며 이것은 디버깅하기 매우 힘든 이슈를 일으킬 수 있기 때문입니다.
98-
* This would make some of the new features we're working on impossible to implement.
96+
* 현재 작업 중인 새로운 기능들을 구현하기 힘들게 만들 수 있기 때문입니다.
9997

10098
[GitHub 코멘트](https://github.com/facebook/react/issues/11527#issuecomment-360199710)에서 더욱 자세한 예시를 확인할 수 있습니다.
10199

0 commit comments

Comments
 (0)