TIL) useState의 두가지 업데이트 방식, 비동기적 동작과 batch처리

1. 함수형 업데이트

setState 사용 방식에는 일반적 사용법, 함수형 업데이트 방식이 있다.

 

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

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

 

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

 

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

 

2. 두 방식의 차이점

일반 업데이트 방식은 onClick안에서 setNumber(number+1)를 3번 호출했다. number가 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;

 

함수형 업데이트 방식으로 동일하게 작동시키면 number는 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)로 처리 된다. 일반형은 setNumber라는 명령을 세번 내리지만, 리액트는 그 명령을 하나로 모아 최종적으로 한번만 실행 시킨다. 그래서 setNumber를 3번 명령하던 100번 명령하던 1번만 실행된다.

 

반면에 함수형 업데이트는 3번을 동시에 명령을 내리면 그 명령을 모아 순차적으로 각각 1번씩 실행시킨다. 0+1 +1 +1 =3 이란 결과가 보이게 되는것.  이렇게 동작하게되면 리렌더링 횟수를 줄이고 성능의 향상을 기대할 수 있다. 

 

또한, 이벤트를 다음과 같이 수정해 실행하게되면...

 

import React, { useState } from "react";

const App = () => {


  const [number, setNumber] = useState(0);
  return (
    <div>
    <div>{number}</div>
    <button
      onClick={()=> {
        setNumber(number+1); 
        setNumber(number+1);
        setNumber(number+0);
      }}
      >버튼</button>
  </div>
  );
}

export default App;

 

카운트가 하나도 증가하지 않는다. 이러한 동작을 보이는 이유는 setState가 비동적으로 동작하기때문이다.

하지만 setNumber(number+0); 의 위치를 중간이나 맨 위로 바꾸면 카운터의 +1이 동작한다.

비동기란 한가지 일을 처리하는 동안 다른 작업이 기다리지 않고 동시에 수행되는 것이다. 위의 setState는 모든 주문을 받은 후에 가장 최신의 결과를 렌더링하게된다. 다음 리렌더링 시에 useState를 통해 반환받은 첫번째 값은 항상 갱신된 최신 state이고 이때문에 useState의 Hooks은 비동기적으로 동작한다고 볼수있다.  비동기로 동작하게되면 리렌더링 횟수를 줄이고 성능 향상을 기대 할 수 있다.