[React] useState의 2가지 업데이트 방식

기존에 우리가 사용하던 방식

setState(number+1)

함수형 업데이트 방식

setState(()=>{});

위와 같이 setState안에 수정할 값이 아닌, 함수를 넣을 수 있다. 그리고 함수의 인자에서는 현재의 state를 가져올 수 있고, {}안에서는 이 값을 변경하는 코드를 작성할 수 있다.

setState((num)=>{return num + 1});

두 방식의 차이점을 예제로 들면

// 기존에 사용하던 방식
import { useState } from "react";

const App = () => {
  const [number, setNumber] = useState(0);
  return (
    <div>
			{/* 버튼을 누르면 1씩 플러스된다. */}
      <div>{number}</div> 
      <button
        onClick={() => {
          setNumber(number + 1); // 첫번째 줄 
          setNumber(number + 1); // 두번쨰 줄
          setNumber(number + 1); // 세번째 줄
        }}
      >
        버튼
      </button>
    </div>
  );
}

export default App;

// 함수형 업데이트 방식
import { useState } from "react";

const App = () => {
  const [number, setNumber] = useState(0);
  return (
    <div>
			{/* 버튼을 누르면 3씩 플러스 된다. */}
      <div>{number}</div>
      <button
        onClick={() => {
          setNumber((previousState) => previousState + 1);
          setNumber((previousState) => previousState + 1);
          setNumber((previousState) => previousState + 1);
        }}
      >
        버튼
      </button>
    </div>
  );
}

export default App;

왜 다르게 동작할까?
일반 업데이트 방식은 버튼을 클릭했을 때 1번째~3번째 줄에 있는 setNumber가 각각 실행되는 것이 아니라 배치(batch)로 처리한다.

즉 onClick을 했을 때 setNumber라는 명령을 세번 내리지만 리액트는 그 명령을 하나로 모아 최종적으로 한번만 실행을 시킨다.

반면에 함수형 업데이트 방식은 3번을 동시에 명령을 내리면, 그 명령을 모아 순차적으로 각각 1번씩 실행시킨다.
그러므로 버튼을 눌렀을때 3씩 올라가게 되는것이다.