• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

비동기로 동작하는 setState에 대해서

24.03.25 13:58 작성 24.03.25 14:00 수정 조회수 107

0

안녕하세요 제로초님
setState 질문이 있는데요

아래 코드에서
1번 코드의 경우 setState함수는 비동기라서 해당 이벤트 함수가 실행된 후 setState함수를 모아서 일괄 처리하기 때문에 +3이 아닌 +1로 렌더링된다 라고 알고 있는데요

2번 코드에서는 왜 +3으로 렌더링되는지 이해가 되지 않아서요. setNum((prev) => prev + 1) 처럼 이전 state 값을 받아오는 형태도 아닌데 어떤 원리로 1번 코드와 2번 코드가 서로 다르게 동작하는 것인지 궁금합니다

 

import React, {useState} from 'react';

export function App(props) {
  let [num, setNum] = useState(0);
  const increase1 = () => {
    // 1번 코드
    setNum(num + 1);
    setNum(num + 1);
    setNum(num + 1);

    // 2번 코드
    setNum(num = num + 1);
    setNum(num = num + 1);
    setNum(num = num + 1);
    
    console.log(`${num}번째 1+ 이벤트 발생 ---> num: ${num}`);
  }
  console.log(`렌더링 ---> num : ${num}`);
  return (
    <div className='App'>
      <button type="button" onClick={increase1}>+1</button>
      <p>{num}</p>
    </div>
  );
}

답변 1

답변을 작성해보세요.

0

저렇게 연달아서 호출하면 배열(큐)에 쌓이게 됩니다.

[num + 1, num + 1, num +1]이 쌓이게 되고 함수가 아니라면 마지막게 state가 됩니다. num이 1이면 [2, 2, 2]입니다.

[num = num + 1, num = num + 1, num = num + 1]은 [2, 3, 4]가 됩니다. num = num + 1의 리턴값은 num + 1입니다. 콘솔에 한 번 쳐보세요.