setState함수와 setTimeout

[박찬우]

class Counter extends Component {
constructor(props) {
super(props);
this.state = {
number: 0
 } 
}

<button
onClick={() => { setTimeout(() => {
this.setState({ number: number + 10 });
 }, 3000);
this.setState({ number: number + 3 });
}}
>

class로 컴포넌트를 구현해보고 있는데요 
button의 onClick 이벤트에  setState함수를 실행시키면 처음 setState함수로 + 3이 되고 
setTimeout 에서도 + 10이 될거라  생각햇는데
처음 0에서 + 3만 동작하고 3초뒤에는 10이 더해지는게 아니라 10이 되버리네요 
왜 이런건가요??

[codingapple]

저기선 아마 setTimeout 콜백함수가 위에 있는 number 변수값을 가지고 돌아다니나봅니다

[글쓴이]

글