[React] useState(3) : 함수형 업데이트

 

 

💡 useState 의 기존 업데이트와 함수형 업데이트의 차이를 알아보자

 

💡 기존 업데이트

import "./App.css";
import { useState } from "react";

function App() {
  const [number, setNumber] = useState(0);
  return (
    <>
      <div>
        Number State : {number}
        <button
          onClick={() => {
            setNumber(number + 1);
            setNumber(number + 1);
            setNumber(number + 1);
          }}
        >
          +
        </button>
      </div>
    </>
  );
}

export default App;

 

기존 업데이트는 온클릭에 setNumber 를 세번 입력해도 숫자가 1 씩 오른다.

➡️ 마지막 setNumber 만 적용된다. (모아서 하나만 실행)

마지막 setNumber 를 (number + 2) 로 입력하면 2씩 오른다.

 

 

💡 함수형 업데이트

<button
          onClick={() => {
            setNumber((curr) => curr + 1);
            setNumber((curr) => curr + 1);
            setNumber((curr) => curr + 1);
          }}
        >

 

함수형 업데이트는 curr(최근 결과값 = 현재 스테이트) 을 받아와

1을 더한 값을 반환하면서 정상적으로 3씩 오른다.