[react] setState에 관하여.

리액트의 setState는 동기적으로 동작하지 않는다 .

예를 들어보자 

 

//this.state={ a:123} 일시

this.setState({ a: 456})

console.log(this.state.a) ; 

결과값은 뭐가 나오는걸까? 456이 나와야 정상이지만 

456이 아니다. 123이 나올수도 있고 456이 나올수도 있는 것이다.

리액트의 setState는 비동기적으로 동작한다.  동기적으로 동작하지 않기 때문에

setState에 값을 넣어도 원하는 값이 나오지 않을 수도 있다.

또한 setState는  인자로 전달한 객체를 원래의 state에 덮어씌우는 성향이 있다.

예를 들어보자

//this.state = { Year:0, Month:0} 일시

this.setState({ Year:2019})

//this.state === { Year: 2019 } 

Month:0은 제거 되고 Year:2019만 나오게 된다. 덮어 씌워지게 되는 것이다.

그러면 부분적으로 State를 업그레이드 하려면 어떻게 하면 될까?

setState에 업그레이드 부분 + 바꾸지 않을 부분을 함께 전달하면 된다.

//this.state={Year:2000,Month:7, Date:1} 일시

 //1번째 방법(권장 x)

this.setState({ Year:2019, ...this.state})

//2번째 방법

this.setState((prevState) => ({Year:2019, ...prevState}))

1번째 방법은 권장하지 않는다고 한다. 

이유는 this.state로 참조하는 state가 setState를 호출했을 당시와 같다고 보장할 수 없기 때문이라 한다.

그래서 2번째 방법처럼 콜백함수를 전달해서 하는 것을 권장한다!