훅스에서 setState는 비동기다

제로초님 강의 - 웹 게임을 만들며 배우는 React 2-2

 

일반 클래스 컴포넌트로 사용했던 setState 

 

this.setState((prevState) => {
  return {
    result: '정답! ' + prevState.result,
    firstNumber: Math.ceil(Math.random() * 9),
    secondNumber: Math.ceil(Math.random() * 9),
    value: '',
    beforeValue: this.state.value
  }
});

 

리액트에서 state 상태 변화가 일어날 때 setState 함수를 사용하는데 이 함수는 비동기식이라

카운트 함수와 같이 이전 값에 변화를 줘야 하는 경우 부작용이 일어날 수 있다. 

그래서 setState 함수 안에 preveState 와 같은 함수를 사용하여

이전 상태값과 앞으로의 상태값 구분이 명확해진다.

 

 

++

 

함수형 컴포넌트로 사용했던 리액트훅트 setState

 

if (parseInt(value) === firstNumber * secondNumber) {
  // prevResult 사용시 prevResult 그대로 리턴
  setResult((prevResult) => {
  	return '정답 : ' + value
  });
  setFirstNumber(Math.ceil(Math.random() * 9));
  setSecondNumber(Math.ceil(Math.random() * 9));
  setValue('');
  setBeforeValue(value);
  onRefInput.current.focus();

 

state 상태 변화가 일어날 때마다 렌더링 되지만 setState는 비동기이기 때문에 

위 코드의 setState들을 전부 한군데에 모아서 렌더링한다.

 

 

https://github.com/ksy8230/zerocho-reactgame/commit/2877493b12e9dc92471b7679c897cc7a00aa6134

불러오는 중입니다...