useState의 비동기적 속성과 batching

리액트에서 setState를 사용하여 상태를 업데이트할 경우, 업데이트 된 상태는 즉시 반영되지 않는다. 왜냐하면 setState는 비동기적으로 작동하기 때문이다.

즉, 리렌더링이 된 후에야 비로소 업데이트된 state가 반영된다.

( state 변경 → 리렌더링 → state 반영 )

리액트의 state를 업데이트하는데 있어서, 비동기적으로 작동하는 여러개의 state를 다룰 때 퍼포먼스 측면에서, 성능면에서 유리하다.

동기적으로 작동했다면 state1 업데이트- state2 업데이트... 이런 식으로 하나씩 업데이트가 될테이 말이다.

여러 state를 동시에 업데이트 하는 경우, 리액트는 state를 batching하여 업데이트를 진행한다.

( batching : 전달된 오브젝트들을 하나로 합치는 작업, 일괄처리 )

batching은 object composition 이라고도 불린다.

JavaScript 코드로 object composition을 살펴보면 아래와 같다.

const singleObject = Object.assign({},
  objectFromSetState1,
  objectFromSetState2,
  objectFromSetState3
);

React의 batching 예제

const [value, setValue] = useState(0);

setValue(value + 1);
setValue(value + 1);
setValue(value + 1);

// Expected value: 3
// Result value: 1

이러한 특성 때문에 업데이트된 state를 즉시 반영해야 할 때, 우리는 useEffenct()를 사용한다.