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
를 실행한다고 이해하면 쉽다!
감사합니다