React Hooks에서 SetState 비동기 해결하기

React에서는 한 함수 안에서 setState를 하고 console.log를 하면 console에는 한 박자씩 느리게 찍혀 나오는 경우가 생긴다.

Class형 Component에서는 다음과 같이 callback 함수로 해결할 수 있다.

function changeExample (e) {
	this.setState({example:e.target.value});
  	console.log(this.state.example);
}

👇🏻해결법

function changeExample (e) {
     this.setState({ example: e.target.value }, function() {
       console.log(this.state.example);
     });
}

하지만 Hooks에서는 위와 같은 방법으로는 해결이 되지 않는다.

하.지.만? Hooks에는 Effect Hook이라는 엄청난 녀석이 있다.

const changeExample = (e) => {
 setExample(e.target.value)
 console.log(example)
}

위와 같이 문제가 있는 코드에서

const example = (e) => {
 setExample(e.target.value)
}

useEffect(() => {
  console.log(example);
}, [example]);

example의 값이 변할 때 console.log가 호출이 되기 때문에 setExample이 example의 값을 바꾸고 나서 example의 값이 변한 것을 useEffect가 감지(?) 하고 console.log를 실행한다고 이해하면 쉽다!