setState는 비동기함수다 !

소밍·2022년 12월 15일

CS React TIL

setState

React 클래스 컴포넌트 내에서 사용되는 함수로, 컴포넌트의 상태(state)를 관리하는 데 사용

1. setState() 의 인자

1-1. state 객체

일반적인 상태 업데이트 방식
setState를 연속적으로 호출했을 때 리액트 내부적으로 *Batch 처리함.

✦ Batch

Batch란 여러 상태 업데이트를 한 번에 묶어서 처리하는 것으로
react는 렌더링 최적화를 구현하기 위해 Virtual DOM을 사용하여 Batch를 실행함.

✦ Merging

배치 업데이트를 처리할 때, React는 여러 상태 업데이트를 merge함.
이는 한 번의 렌더링으로 모든 상태 업데이트를 처리하는 과정에서 중복된 업데이트를 제거하고, 최종적인 상태만 적용하는 것을 의미.

✦ Object.assign

React는 setState로 상태를 업데이트할 때,
Object.assign를 이용하여 새로운 상태를 기존 상태와 merge하여 업데이트함.

목표 객체에 동일한 이름을 가진 프로퍼티가 있는 경우 기존 값을 덮어씌움.
-> 최종적인 상태만 적용
let user = { name: "John" };
Object.assign(user, { name: "Pete" });
alert(user.name); // user = { name: "Pete" }

1-2. 새로운 state를 반환하는 함수

함수형 업데이트 방식
이전 상태를 인자로 받아서 새로운 상태를 반환
setState를 연속적으로 호출했을 때
인자로 받은 함수들을 Queue에 저장하여 순차적으로 실행.
이전 상태를 기반으로 새로운 상태를 계산하는 방식이기 때문에
상태를 업데이트할 때마다 새로운 함수를 실행하여 state의 최신 상태 유지.

2. 코드로 이해하기

📌 테스트 코드샌드박스 바로가기

import React, { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);

  const onClick = () => {
    // 일반적인 상태 업데이트 방식
    // 이전 상태와 상관없이 새로운 값을 계산하여 상태를 업데이트.
    // 이 때 여러 번 호출되어도 React가 최적화하여 Batch(merging)
    // state는 객체이고 merging시 Object.assign,
    // 최종적으로 마지막에 호출한 setCount의 결과만 반영
    setCount(count + 1);
    setCount(count + 2); // count + 1 덮어씌움
  };

  const onClick1 = () => {
    // 함수형 업데이트 방식 -> 이전 상태를 기반으로 새로운 상태를 계산
    // 이전 상태에 영향을 받아 순차적으로 상태가 업데이트
    // 함수에 전달된 인자는 이전 상태를 나타내는 값 prevState
    setCount((count) => count + 1); 
    setCount((count) => count + 2);
  };

  return (
    <>
      <h2>{count}</h2>
      <button onClick={onClick}> + </button>
      <button onClick={onClick1}> + </button>
    </>
  );
}