내 함수는 제대로 값을 받아낼까?

이번 프로젝트를 하면서 절절히 느낀 점 중 하나는 비동기를 이해해야 코드를 제대로 짤 수 있다라는 것이었다. 리액트에서 state 관리는 값을 관리하는데 있어 무엇보다도 중요했는데 특히 state는 직접 변경하면 안 되고 무조건 setState를 이용해 변경해야했다. 만약 state를 직접 변경하려고 하면 랜더링이 되지 않는다.
그런데 이 setState는 비동기적으로 움직이기 때문에 함수 내에서 setState를 통해 state를 변경하고 console.log를 확인하려면 변경되기 전의 값이 찍힌다.

constructor() {
  super();
  this.state = {
  	name: ''.
  }
}

handleInput = (event) => {
  this.setState({
	name: event.target.value.
  });
  console.log(this.state.name)
}

내가 input의 value를 잘 받고 있는지 확인하려고 console을 확인하고 싶었지만 백날천날 찍어봐와 console에서 빈값만 나왔다.
왜냐?
setState는 비동기적으로 움직였기 때문이다.
간단하게 말해서 state가 바뀌는 순서는
handleInput 함수 실행 -> setState로 state 값 변경 -> 함수 끝 -> console.log(this.state.name) 이다.
특, setState를 통한 값 변경은 함수가 끝나기 전까지 변경되지 않는다는 것이다. 함수가 끝나야지만 state가 변경되어 변경된 값을 console.log로 확인 할 수 있다.

하지만 변경된 state 값을 확인하기를 원할 때가 있다.
그럴때는 call back을 써서 확인 할 수 있다.

handleInput = (event) => {
  this.setState({
	name: event.target.value.
  }, () => {
    console.log(this.state.name)
  });
}

이렇게 setState 내에서 콜백을 사용하면 state가 변경된 후의 값은 console에서 확인 할 수 있다. 하지만...
콜백으로 확인하는 방법은 권장하지 않는다.
굳이! 확인하고 싶다면 쓰는 방법이다.
그러면 어떻게 확인하는 것이 올바른 방법일까?

handleInput = (event) => {
  this.setState({
	name: event.target.value.
  });
  console.log(event.target.value);
}

권장되는 값 확인 방법이다.
어차피 event.target.value는 name의 값으로 들어간다. 그러면 name이 잘 들어가고 있는지 확인하려면 event.target.value만 확인해봐도 알 수 있는 부분이다.
물론 나도 state 자체를 확인하고 싶은 불안이 있어 계속 콜백을 사용해서 console을 확인하고는 한다.
하지만 내가 어떻게 확인 할지는 올바른 방법을 사용하도록 점차 바뀌어야겠다.