[React] useState 비동기 처리와 함수형 업데이트

 

setState는 비동기로 동작

리액트에서 setState를 사용하여 상태를 업데이트할 경우 즉시 반영되지 않는다.

리렌더링이 된 후에 업데이트 된다. (state 변경 > 리렌더링 > state반영)   여러개의 state를 컨트롤하는데에는 이점.

 

배칭이란?

배칭은 React가 더 나은 성능을 위해 여러 개의 state 업데이트를 하나의 리렌더링 (re-render)로 묶는 것을 의미한다.

예를들어, 하나의 클릭 이벤트 안에 두 개의 state 업데이트를 가지고 있다면, React는 언제나 이 작업을 배칭하여 하나의 리렌더링으로 만든다. 다음과 같은 코드를 실행해보면, 매 번 누를 때마다, state를 두 번 변경 하였지만, React는 단 한 번의 렌더링만 수행한다.

 

const [num, setNum] = useState(1)

const plus =()=> {
    setNum(num + 1)
    setNum(num + 1)
  }

plus 함수 실행시 +2  함수가 될 것 같지만 실상 결과는 +1만 되는 함수이다. 리액트는 setState를 batch처리한다.

 

 

const [num, setNum] = useState(1)

const plus =()=> {
    setNum(prev => prev+ 1)
    setNum(prev => prev+ 1)
  }

이러한 비동기적인 방법을 해결하기 위해서  함수형 업데이트(functional update)를 사용할 수 있다.

즉 setState에 값을 그대로 전달하는 것이 아니라 함수를 전달하는 것이다.