setState 의 비동기적 속성, prevState,prevProps
## Asynchronous
setState()는 비동기 (asynchronous)로 작동한다.
그 말은 즉슨 setState로 변경한 state값은 즉시 적용되지 않는다는 뜻이다.
vscode에서 마우스 커서를 올려보면 다음과 같이 callback이 있음을 알 수 있다.
// index.js
ReactDOM.render(
<React.StrictMode>
<App increment={1} />
</React.StrictMode>,
document.getElementById('root')
);
// App.js
class App extends Component {
constructor(props) {
super(props);
this.state = {
count: 30 + this.props.increment,
};
}
handleClick = () => {
this.setState((prevState, prevProps) => {
return { count: prevState.count + prevProps.increment }
},
() => console.log("callback", this.state.count))
console.log("out of setState", this.state.count);
}
render() {
return (
<div className="App">
<button onClick={this.handleClick}>Update State</button>
<p>{this.state.count}</p>
</div>
);
}
}
console에 각각 "callback", "out of setState"로 출력해보았다.
Update State 버튼을 눌러보면 눈에는 바로 카운트가 증가된 것 처럼 보인다.
하지만 console을 보면 callback 안에 있는 부분은 바로 변경된 값이 적용되지만, 밖의 부분은 1씩 느리다.
prevState, prevProps
말 그대로 이전 상태, 이전 props를 나타낸다.
setState에서 이 변수를 쓴다면 위의 예시 코드처럼 handleClick 안에서 this.state는 prevState로, this.props는 prevProps로 대체하여 쓸 수 있다.
Author And Source
이 문제에 관하여(setState 의 비동기적 속성, prevState,prevProps), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@s2s2hyun/setState-의-비동기적-속성-prevStateprevProps저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)