useState에서 set함수의 비동기

• useState에서 set함수는 비동기로 작동한다.
• set함수가 비동기로 작동하지 않았다면, 렌더링이 너무 자주 일어나는 문제가 발생했을 것이다.

   <button onClick={() => {
     setText("A");
     setName("Bob");
     setTitle("Good");
   }}>클릭</button>

• useState가 동기로 일어났다면 setText 후 렌더링, setName 후 렌더링, setTitle 후 렌더링이 일어나 총 세 번의 렌더링이 불필요하게 일어났을 것이다.
• 하지만, useState는 비동기 배치 기능으로 작동하기에 세 개의 상태 변경 함수가 모두 처리된 뒤에 렌더링이 한 번만 일어난다.
• 배치 업데이트의 주기는 16ms이다.

• 하나의 상태를 여러번 변경하는 경우에는 어떻게 비동기를 처리해야 할까?

import { useState } from "react";

const Test = () => {
  
  const [data, setData] = useState("11111");

  return (
    <div>
      Test {data}
      <br/>
      <button onClick={() => {
        setData(data + "A");
        setData(data + "B");
        setData(data + "C");
      }}>+</button>
    </div>
  );
}

export default Test;

• 위의 컴포넌트에서 +버튼을 누르면, 단지 C가 하나만 더 붙는다.

• 즉, 마지막 setDate(data + "C"); 코드만 실행되는 결과처럼 보이게 된다.

• 원하는대로 A, B, C 모든 문자가 data에 붙기를 원한다면, 다음과 같이 코드를 수정한다.

import { useState } from "react";

const Test = () => {
  
  const [data, setData] = useState("11111");

  return (
    <div>
      Test {data}
      <br/>
      <button onClick={() => {
        setData(prev => prev + "A");
        setData(prev => prev + "B");
        setData(prev => prev + "C");
      }}>+</button>
    </div>
  );
}

export default Test;

• 위에 코드에서는 버튼을 누르면, "ABC" 문자열이 한 번에 추가됨을 알 수 있다.