[React]비동기로 동작하는 setState()

React에서 state를 변경하는 setState()에 대해 설명합니다.

---

setState() 호출 직후 this.state에 바로 반영이 되지 않습니다.

아래 예제를 통해 값이 바로 반영이 되는지 콘솔 창에서 확인을 할 수 있습니다.

 

최초 버튼을 클릭 했을 때, 아래와 같은 결과를 예상했습니다.

*****1 번째 클릭***** 
setState() 호출 전 : 0, 0 
First : 1, 1 
Second : 1, 2 
Third : 1, 3

하지만, 예상과 달리 아래와 같은 결과가 나왔습니다.

*****1 번째 클릭***** 
setState() 호출 전 : 0, 0 
First : 0, 0 
Second : 0, 0 
Third : 0, 0

React는 this.setState() 호출 후 this.state에 값을 바로 반영하지 않습니다.

그러므로 this.setState() 호출 후 this.state에 의존해서는 안 됩니다.

---

setState()는 병합되어 일괄적으로 처리합니다.

 

버튼을 클릭했을 때, setState()를 호출하는 코드는 아래와 같습니다.

this.setState({ testValue: 1 });
this.setState({ count: 2, testValue: 2 });
this.setState({ testValue: 3 });

React는 여러개의 setState()를 사용하여 state를 변경하는 경우 변경 사항을 대기열에 집어넣고, 하나로 병합하여 처리합니다.

 

순서

1. this.state.testValue의 값을 변경합니다.

this.state.count는 변경되지 않으므로 초깃값 0으로 설정되어있습니다.

this.setState({ testValue: 1 });

2. this.state.count와 this.state.testValue의 값을 변경합니다.

this.state.count가 0에서 2로 변경합니다.

this.state.testValue가 1에서 2로 변경합니다.

this.setState({ count: 2, testValue: 2 });

3. this.state.testValue의 값을 변경합니다.

this.state.testValue가 2에서 3으로 변경합니다.

this.setState({ testValue: 3 });

 

결과

state 변경사항 대기열을 this.state에 적용합니다.

setState()는 호출할때마다 this.state에 바로 적용하는 것이 아니라 병합하여 한 번에 this.state에 적용합니다. 

---

마무리

다음에는 아래 내용에 대해 정리하여 포스팅하도록 하겠습니다.

• 언제 this.state에 반영이 되는지
• setState()가 왜 비동기 방식인지
• setState()를 동기식으로 처리하는 방법