setState의 비동기성

로그인 버튼 기능을 구현 하던 중...

class LoginBox extends React.Component{
    constructor() {
        super();
        this.state = {
            IDInput: "",
            PWInput:"",
        }
    }


    handleFormChange = (event) => {
      event.persist()
      console.log(event.target.value);
      this.setState({ [event.target.className]: event.target.value });
      console.log(this.state);
    };
    
    //...생략

event.target.value를 setState하고 console찍었는데 한 박자 느리게 setState에 적용되는 현상을 발견했습니다. 이게 너무 이해가 안돼서 구글링을 해 보니 setState는 비동기성을 가진 메소드라는 것을 찾을 수 있었습니다. 비동기는 동시에 일어나지 않는다를 의미합니다. 요청과 결과가 동시에 일어나지 않습니다.
따라서 setState 함수를 호출해도 바로 state가 변하지 않은 상태에서 handleFormChange의 console.log(this.state);가 실행 된 후에 state가 set됩니다.

setState가 비동기성을 가지고 있다는 것을 숙지하고 코드를 짜야할 것 같습니다.