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

Seob·2020년 9월 13일
7

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

profile
Hello, world!

4개의 댓글

comment-user-thumbnail
2021년 6월 11일

감사합니다

답글 달기
comment-user-thumbnail
2021년 6월 16일

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

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

에서
useEffect의 두 번째 인자인 example은 this.state의 example을 말하는 것 같고,

useEffect 위에 있는 함수로 작성한 example은 어디에 쓰이나요?

this.state 부터 코드 생략 없이 좀 더 구체적으로 작성해 주실 수 있나요?? ㅠㅠ

1개의 답글
comment-user-thumbnail
2022년 6월 3일

감사합니다 ㅜ

답글 달기