react 동시성 문제?

[jobum97]

구구단 게임을 만든 상황에서 빠르게 입력을 반복해서 눌렀을 때 결과값이 꼬이는 문제 발견

function GuGuDan() {
        const [value, setValue] = React.useState('');
        const [result, setResult] = React.useState('');
        const [firstNum, setFirstNum] = React.useState(Math.ceil(Math.random() * 9));
        const [secondNum, setSecondNum] = React.useState(Math.ceil(Math.random() * 9));
        const [answer, setAnswer] = React.useState('?');
        const inputEl = React.useRef(null);

        function onSubmit(event){
            console.log(firstNum, secondNum, answer, value, result)
            event.preventDefault()
            if (parseInt(value) === firstNum * secondNum) {
                setResult('정답');
                setValue('');
                setFirstNum(Math.ceil(Math.random() * 9));
                setSecondNum(Math.ceil(Math.random() * 9));
                setAnswer(firstNum * secondNum);
                inputEl.current.focus();
            }else{
                setResult('땡');
                setValue('');
                setFirstNum(Math.ceil(Math.random() * 9));
                setSecondNum(Math.ceil(Math.random() * 9));
                setAnswer(firstNum * secondNum);
                inputEl.current.focus();
            }
        }

        function onChange(event){
            setValue(event.target.value);
        }

        return (
            <React.Fragment>
                <div> {firstNum} 곱하기 {secondNum}는?</div>
                <form onSubmit={onSubmit}>
                    <input
                        ref={inputEl}
                        type="number"
                        value={value}
                        onChange={onChange}/>
                    <button>입력!</button>
                </form>
                <div>{result} 정답은 {answer}</div>
            </React.Fragment>
        );
    }

[jobum97]

꼬인다고 생각했지만 아니였음...
다만 이번 의혹으로 setState가 비동기로 동작하는 것을 알았고
입력이 동시에 다중으로 들어오면 꼬일 수 있다??...

[jobum97]

state는 컴포넌트 내부의 변경 가능한 값, 값이 변경되면 리렌더링 실행됨
state는 비동기로 동작
왜?
리렌더링은 비용이 큰 동작인데 값이 변경될 때마다 매번 리렌더링되면 성능상 이슈 발생
고로 state 변경을 모아두었다가 React batch update, 즉 배치 처리한다.

결론은 setState가 비동기 동작하여 console.log로 찍는 값과 화면에 출력되는 값의 싱크가 안맞을 수 있다는 것

[hellices]

javascript function은 callback으로 이벤트 처리해야함
state change 를 동기적으로 처리하려면 callback을 활용하자

---

callback과 promise, async await에 대해서도 같이 점검