usetState 비동기 실행 질문 드립니다.

[강병민]

import React, { useState } from "react"; // useState 를 import

function App() {
  const [num, setNum] = useState(0);

  const click = () => {
    setNum(num + 1);
    setNum(num + 2);
    setNum(num + 3);
  };

  return (
    <>
      {num}
      <button onClick={click}>click!</button>
    </>
  );
}

useState 가 비동기 실행되는 이유가 batch 때문이라고 하고 , batch가 일어나는건 객체의 키값이 같으면 오브젝트 컴포지션이 일어나기 때문이라고 하는데,  그럼 setter 함수가 객체라는 뜻인가요? 그리고 객체의 키 값이 같다는게 setter 함수에서 어떤의미인지 알고싶습니다.

그리고 함수형 업데이트를 하면 파라미터에 들어오는게 객체가 아니라서 오브젝트 컴포지션이 일어나지 않는다고 하는데 ,  그럼 저 num+1 은 객체라는 뜻인가요..? 계속 찾아볼수록 헷갈리기만 하고 명확한 설명이 없어서 질문드립니다 ㅠㅠ

[codingapple]

오브젝트 컴포지션이 일어난다는건 저도 뭔소린지 모르겠군요 

아무튼 합쳐서 처리해줘서 재렌더링은 1번만 일어납니다

[강병민]

음.. 그럼 함수형 업데이트를 사용하면 왜 동기적으로 실행되는지 알수 있을까요???

[codingapple]

state변경함수들은 항상 async 하게 늦게 처리됩니다

리액트 18버전부터는 state변경함수가 여러개 연달아서 있으면 한 번에 합쳐서 처리해주는데

그걸 동기적으로 처리된다고 표현했나보네요 

[글쓴이]

글