React를 작업할때
setState의 비동기가 큰 문제가 되는 경우가 있었다.
왜 setState를 비동기로 디자인을 했는지 의문일 정도.. 그래서 상당 부분을 hook로 data를 걸어서 chaining으로 해결한다거나
useRef를 적극적으로 사용했다.
그런데 React를 다시 전체적으로 복습을 하는데 가장 기본적으로 이 문제를 해결하기 위해서 React에서 prevSate 인자를 제공한다는 것을 알게 됐다.
Chart 라이브러리를 사용할때 참고한 reference들 중요 useRef로 해결하기도 했지만 prevState로 해결하는 경우들도 있었는데
이 두가지 기능을 적절히 개념적으로 선택해서 잘 사용하면 좋을듯 하다. 특히, 예시처럼 그냥 단순히 count up 하는 것과 같은 데이터의 동기적인 효과를 갖기 위해서는 prevState를 사용하는게 좋을듯하다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>구구단</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
'use strict';
class GuGuDan extends React.Component {
constructor(props) {
super(props);
this.state = {
c: 0,
}
}
render() {
return (
<div>
<h1>{this.state.c}</h1>
<button onClick={() => {
this.setState((prevState) => {
console.log(prevState.c)
return {
c: prevState.c +1
}
})
// this.setState(newC ++)
}}>+</button>
</div>
)
}
}
</script>
<script type="text/babel">
ReactDOM.render(<GuGuDan />, document.querySelector('#root'));
</script>
</body>
</html>
긍정적인 에너지를 가진 개발자, 이태성입니다.