useState의 업데이트 방식에 따른 차이(함수형 업데이트)

useState 훅을 사용할 때, 상태를 업데이트하는 데에는 두 가지 방식이 있다.

하나는 값으로 직접 상태를 업데이트하는 방식이고, 다른 하나는 이전 상태를 기반으로 새로운 상태를 계산하는 함수를 사용하는 방식이다. 후자를 함수형 업데이트라고 한다.

 

• 함수형 업데이트

// 기존에 우리가 사용하던 방식
setState(number + 1);

// 함수형 업데이트 
setState(() => {});

 

위 코드와 같이 setState의 ( ) 안에 수정할 값이 아니라, 함수를 넣고, 인자에서는 현재의 state을 가져와서 변경할 수 있다.

// 현재 number의 값을 가져와서 그 값에 +1을 더하여 반환한 것 입니다.
setState((currentNumber)=>{ return currentNumber + 1 });

 

• 두 방식의 차이점은?

// src/App.js

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;

 

기존의 업데이트 방식은 3번 넣었음에도 최종으로는 1만 증가한다.

반면 함수형 업데이트 방식은 3이 증가한다.

// src/App.js

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;

 

일반 업데이트 방식은 버튼을 클릭했을 때 setNumber가 각각 실행되는 것이 아니라, 배치(batch)로 처리된다!

 

우리가 onClick을 했을 때 setNumber 라는 명령을 세번 내리지만, 리액트는 그 명령을 하나로 모아 최종적으로 한번만 실행한다. 반면에 함수형 업데이트 방식은 3번을 동시에 명령을 내리면, 그 명령을 모아 순차적으로 각각 1번씩 실행시킨다.

 

또한 함수형 업데이트는 비동기적인 상태 업데이트할때 이점을 갖는다. 리액트는 여러 상태 업데이트를 일괄 처리하여 성능을 최적화하는데, 이때 함수형 업데이트를 사용하면 이전 상태를 정확하게 반영할 수 있다. 특히 이전 상태를 기반으로 하는 계산이 많은 경우에 유용하다.