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

 render() {
 return (
 &lt;div&gt;
 &lt;h1&gt;{this.state.c}&lt;/h1&gt; 
 &lt;button onClick={() =&gt; {
 this.setState((prevState) =&gt; {
 console.log(prevState.c)
 return {
 c: prevState.c +1
 }
 })
 // this.setState(newC ++)
 }}&gt;+&lt;/button&gt;
 &lt;/div&gt;
 )
 }
 }

 
 &lt;/script&gt;
 &lt;script type="text/babel"&gt;
 ReactDOM.render(&lt;GuGuDan /&gt;, document.querySelector('#root'));
 &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre></div></div>

2taesung.log

Taesung Lee

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>

setState의 비동기 해결

댓글