[React] useState란? 비동기처리, batch update에 대하여

useState란?

useState는 상태를 정의하고, 이 상태를 관리할 수 있게 하는 훅이다.

import { useState } from 'react';

const [state, setState] = useState('초기값');

useState의 반환값은 배열이다

• state: 첫 번째 원소, 처음에는 '초기값'으로 세팅됨
• useState: state를 변경할 수 있는 함수

state는 문자열, 숫자, 배열, boolean 등 다양한 타입으로 생성 가능하다

counter 예제

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

function App() {
  const [count, setCount] = useState(0)
  return (
     <>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>숫자 증가</button>
     </>
  )
}

export default App

숫자증가 버튼을 누르면 count의 상태가 1씩 증가하게 된다.

비동기적 처리(batch update)

이 코드를 보면 number+1을 3번 반복하니 버튼 한 번 클릭 당 3이 증가해야할 것 같지만, 그렇지 않다!

React는 상태 업데이트를 처리하기 전에 이벤트 핸들러의 모든 코드가 실행될 때까지 리기 때문이다.

state값이 바뀔때마다 리렌더링을 하면 비효율적임으로 여러 개의 state 업데이트를 취합(batch)하여 일괄처리하는 것이다.

따라서 number+1을 했으나 아직 number가 0에서 1로 증가하지 않은 채로 다음 setNumber가 실행됨으로 결국 setNumber는 3번 실행되지만 number는 3이 더해지지 않고 1이 더해진다.

함수형 업데이트

이럴 땐 아직 변경되지 않은 number대신, 이전 값에 대해 변화를 요구하는 업데이트 함수 형으로 작성하면 한 번에 3개가 변경된다.
참고로 저 n 부분 변수명은 그냥 사용자가 정하면 된다.
(주로 이전을 뜻하는 'prev'를 많이 씀)

setCount(prev => prev + 1);

리액트 공식 문서를 참고하였습니다!

출처
https://react.dev/learn/queueing-a-series-of-state-updates#react-batches-state-updates