[React] 일반사용법, 함수형 업데이트 방식의 차이점

 

1. useState 일반사용법

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;

일반 사용법은 onClick 이벤트 클릭시 클릭시 1씩 증가함.

 

 

2. useState 함수형 업데이트 방식

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;

함수형 업데이튼는 3씩 증가한다. 

 

 

 

왜그럴까?

공식문서에 따르면 리액트팀은 불필요한 리-렌더링을 방지(렌더링 최적화)와 리액트의 성능을 위해 한꺼번에 업데이트 한다고  한다.

한개 한개 한개 올리는것이 아닌 한꺼번에 올리는것을 단일 업데이트(batch update)라고 한다.

 

깨달은것

useState를 통해 값을 업데이트할경우, 함수형으로  화살표함수를 사용 한다면, 배치업데이트 방식을 사용한다는점과,

원시아닌 객체 타입의 경우 불변성을 유지해아한다는 것.