[React] this.setState를 두번 호출할때 첫번째 호출이 무시되는 경우와 해결방법

this.setState를 사용하여 state 값을 업데이트할 때는 상태가 비동기적으로 업데이트됩니다.

 

문제 : 첫번째 this.setState가 무시되는 경우 (number 초기 값은 0입니다.)

onClick={() => {  // this.setState를 사용하여 state에 새로운 값을 넣을 수 있습니다.  this.setState({ number: number + 1 });  this.setState({ number: this.state.number + 2 }); }}

코드를 위와 같이 작성하면 this.setState를 두 번 사용하는 것임에도 불구하고 버튼을 클릭할 때 숫자가 2씩 더해집니다. this.setState를 사용한다고 해서 state 값이 바로 바뀌지는 않기 때문입니다.

이에 대한 해결책은 this.setState를 사용할 때 객체 대신에 함수를 인자로 넣어 주는 것입니다.

 

함수를 인자로 넣어주는 방법

this.setState((prevState, props) => {  return {   // 업데이트하고 싶은 내용  } })

※ prevState는 기존 상태이고, props는 현재 지니고 있는 속성 값을 말합니다. 만약 업데이트하는 과정에서 props가 필요하지 않다면 생략해도 됩니다.

 

해결방법 : this.setState가 둘다 적용되는 경우 (number 초기 값은 0입니다.)

this.setState(prevState => {  return {   number: prevState.number + 1  }; }); // 위 코드와 아래 코드는 완전히 똑같은 기능을 합니다. // 아래 코드는 함수에 바로 객체를 반환한다는 의미입니다. this.setState(prevState => ({     number: prevState.number + 2 }));

출처 : [책] 리액트를 다루는 기술