You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
`setState()`는 컴포넌트의 `state`객체에 대한 업데이트를 예약합니다. state가 변경되면, 컴포넌트는 다시 렌더링됩니다.
12
12
13
13
### `state`와 `props`의 차이점은 무엇인가요? {#what-is-the-difference-between-state-and-props}
14
14
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`는 (함수 내에 선언된 변수처럼) 컴포넌트 *안에서* 관리됩니다.
16
16
17
-
언제 `prop`와 `state`를 사용하는지를 더 알고 싶다면 아래 자료를 확인해보세요.
17
+
언제 `props`와 `state`를 사용하는지 더 알고 싶다면 아래의 자료를 확인해보세요.
18
18
*[Props vs State](https://github.com/uberVU/react-guide/blob/master/props-vs-state.md)
19
19
*[ReactJS: Props vs. State](https://lucybain.com/blog/2016/react-state-vs-pros/)
20
20
21
21
### 왜 `setState`가 잘못된 값을 주는 걸까요? {#why-is-setstate-giving-me-the-wrong-value}
22
22
23
-
React에서 `this.props`와 `this.state`는 모두 *렌더링 된* 값을 나타냅니다. 예를 들면, 현재 화면에 보이는 것들이 있습니다.
23
+
React에서 `this.props`와 `this.state`는 모두 *렌더링된* 값을 나타냅니다. 다시 말해 현재 화면에 보이는 것을 말합니다.
24
24
25
-
`setState` 호출은 비동기적으로 이뤄집니다. 따라서 `setState`호출 직후 새로운 값이 `this.state` 에 반영될 거라고 믿어서는 안 됩니다. 만약 현재 state에 기반하여 값을 계산해야 한다면 객체 대신 updater 함수를 전달하세요. (자세한 내용은 아래를 확인하세요.)
25
+
`setState` 호출은 비동기적으로 이뤄집니다. 따라서 `setState` 호출 직후 새로운 값이 `this.state` 에 반영될 거라고 믿어서는 안 됩니다. 만약 이전 state 값을 기준으로 값을 계산해야 한다면 객체 대신 updater 함수를 전달하세요. (자세한 내용은 아래를 확인하세요.)
26
26
27
27
예시 코드는 예상대로 동작하지 *않을 것*입니다.
28
28
29
29
```jsx
30
30
incrementCount() {
31
-
//Note: 이 코드는 예상대로 동작하지 *않을 것*입니다.
31
+
//주의: 이 코드는 예상대로 동작하지 *않을 것*입니다.
32
32
this.setState({count:this.state.count+1});
33
33
}
34
34
@@ -37,32 +37,30 @@ handleSomething() {
37
37
this.incrementCount();
38
38
this.incrementCount();
39
39
this.incrementCount();
40
-
// React가 컴포넌트를 다시 렌더링할 때 `this.state.count`는 3이 될 것 같은 예상과는 달리 1이 됩니다.
40
+
// React가 컴포넌트를 다시 렌더링할 때 `this.state.count`는 3이 될 것 같은 예상과 달리 1이 됩니다.
41
41
42
42
// 이것은 `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로 설정합니다.
45
45
46
-
// 이 문제의 해결 방법은 아래에 설명되어 있습니다!
46
+
// 이 문제의 해결 방법은 아래에 설명되어 있습니다.
47
47
}
48
48
```
49
49
50
-
이 문제의 해결 방법은 아래에서 확인하세요.
50
+
이 문제를 어떻게 해결하는지 알아봅시다.
51
51
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}
53
53
54
-
`setState` 가 가장 최신의 state 값을 사용하도록 보장하기 위해서는 `setState` 에 객체 대신 함수를 전달하세요.
54
+
항상 `setState` 가 가장 최신의 state 값을 사용하도록 보장하기 위해서는 `setState` 에 객체 대신 함수를 전달하세요. (아래를 참조하세요.)
55
55
56
56
### `setState`에 객체를 전달하는 것과 함수를 전달하는 것은 어떤 차이가 있나요? {#what-is-the-difference-between-passing-an-object-or-a-function-in-setstate}
57
57
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` 호출은 일괄적으로 처리되기 때문에 여러 업데이트 사항이 충돌 없이 차례대로 반영되도록 합니다.
61
59
62
60
```jsx
63
61
incrementCount() {
64
62
this.setState((state) => {
65
-
// 중요: 값을 업데이트할 때 `this.state` 대신 `state`로부터 값을 읽어옵니다.
63
+
// 중요: 값을 업데이트할 때 `this.state` 대신 `state` 값을 읽어옵니다.
66
64
return {count:state.count+1}
67
65
});
68
66
}
@@ -73,29 +71,29 @@ handleSomething() {
73
71
this.incrementCount();
74
72
this.incrementCount();
75
73
76
-
// 지금 `this.state.count`의 값을 읽어 보면 이 값은 여전히 0일 것입니다.
74
+
// 지금 `this.state.count` 값을 읽어 보면 이 값은 여전히 0일 것입니다.
77
75
// 하지만 React가 컴포넌트를 다시 렌더링하게 되면 이 값은 3이 됩니다.
78
76
}
79
77
```
80
78
81
-
[setState에 대해 더 공부하기](/docs/react-component.html#setstate)
79
+
[setState에 대해 더 알아보기](/docs/react-component.html#setstate)
82
80
83
81
### 언제 `setState` 가 비동기적인가요? {#when-is-setstate-asynchronous}
84
82
85
-
현재 `setState` 는 이벤트 핸들러 안에서 비동기적입니다. 이 사실은 예를 들자면 `부모`와 `자식` 이 click 이벤트 중 동시에 `setState`를 호출한다면 `자식` 은 다시 렌더링 되지 않는다는 것을 보장합니다. 대신, React는 브라우저 이벤트가 끝날 시점에 state 업데이트를 "한 번에 몰아서 ?? (flushes)". 이것은 더 큰 앱에서 눈에 띄는 성능 향상을 끌어냅니다.
83
+
현재 `setState` 는 이벤트 핸들러 내에서 비동기적입니다. 이로 인해 만약 `부모`와 `자식`이 모두 click 이벤트에서 `setState`를 호출한다면 `자식`은 두 번 렌더링되지 않습니다. 대신 React는 브라우저 이벤트가 끝날 시점에 state를 일괄적으로 업데이트합니다. 이는 더 큰 규모의 앱에서 뚜렷한 성능 향상을 만들어냅니다.
86
84
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는 기본적으로 더 많은 경우에서 일괄적으로 업데이트를 처리할 것입니다.
88
86
89
87
### 왜 React는 `this.state` 를 동기적으로 업데이트하지 않나요? {#why-doesnt-react-update-thisstate-synchronously}
90
88
91
-
이전 섹션에서 설명했듯이, React는 다시 렌더링을 시작하기 전에, 모든 컴포넌트가 자신의 이벤트 핸들러 내에서 `setState()`를 호출할 때까지 내부적으로 "기다리고 있습니다". 이를 통해 불필요한 렌더링을 방지하면서 성능을 향상시킵니다.
89
+
이전 장에서 설명했듯이모든 컴포넌트가 자신의 이벤트 핸들러에서 `setState()`를 호출할 때까지 React는 다시 렌더링을 하지 않고 내부적으로 "기다리고 있습니다". 이를 통해 불필요한 렌더링을 방지하면서 성능을 향상합니다.
92
90
93
-
그러나 React는 왜 렌더링 없이 즉시 `this.state`를 업데이트하지 않는지를 여전히 궁금해하실 수도 있습니다.
91
+
그러나 왜 React는 다시 렌더링을 하는 것 대신 즉시 `this.state`를 업데이트하지 않는지 여전히 궁금해하실 수도 있습니다.
94
92
95
-
두 가지 중요한 이유가 존재합니다.
93
+
여기에는 두 가지 중요한 이유가 존재합니다.
96
94
97
95
*`props` 와 `state` 사이의 일관성을 해칠 수 있으며 이것은 디버깅하기 매우 힘든 이슈를 일으킬 수 있기 때문입니다.
98
-
*This would make some of the new features we're working on impossible to implement.
96
+
*현재 작업 중인 새로운 기능들을 구현하기 힘들게 만들 수 있기 때문입니다.
99
97
100
98
이 [GitHub 코멘트](https://github.com/facebook/react/issues/11527#issuecomment-360199710)에서 더욱 자세한 예시를 확인할 수 있습니다.
0 commit comments