[TIL 35] React | setState의 비동기 특성

리액트의 핵심이라고 할 수 있는 state값을 변경해주는 setState 메소드!
그런데 리액트를 공부하면서 setState를 사용하다보니 state가 정상적으로 업데이트되지 않거나 느리게 업데이트되는 상황을 종종 볼 수 있었다🥲
왜 이런 상황이 발생하는 걸까?

setState는 비동기

내 코드 중 일부.
setState하고 난 후의 isEnable의 현재 상태를 보려고 콘솔을 찍었으나 현재 상태가 찍히지 않고 이전의 상태가 출력되었다.
이유는 setState는 모두 비동기로 처리되기 때문이다.

validation = () => {
  const { id, password, isEnable } = this.state;
  this.setState(
    {
      isEnable: (id && id.includes('@')) && password.length >= 5
    }
  )
  console.log(isEnable);
}

비동기란?

• Asynchronous : 동시에 일어나지 않는.

작업이 종료되지 않은 상태라 하더라도 대기하지 않고 다음 작업을 실행한다.

setState의 두번째 인자

그럼 setState후의 바뀐 state값을 어떻게 확인해야할까?
setState의 두번째 인자로 콜백함수를 선택적으로 전달해서 바뀐 값을 실시간으로 확인할 수 있다.

validation = () => {
  const { id, password, isEnable } = this.state;
  this.setState(
    {
      isEnable: (id && id.includes('@')) && password.length >= 5
    },
    () => { console.log(isEnable) }
  )
}