React 상태 업데이트의 비동기성과 배치 처리

상태 업데이트는 왜 비동기인가?

동기적이라면?

setCount(count + 1);
console.log(count); // 만약 동기라면? 새로운 값이 찍혀야 함

하지만 실제로는 여전히 이전 값이 찍힌다. 이유는 React가 setState를 즉시 반영하지 않고, 업데이트 요청을 큐에 쌓기 때문이다.

React의 상태 업데이트 과정 (간단 흐름)

1. setState() 호출 → 업데이트 큐(update queue) 에 할 일 기록
2. React는 렌더링 타이밍에 맞춰 큐를 꺼내 처리
3. 새로운 상태를 계산하고 컴포넌트를 리렌더링

즉, setState는 곧바로 값을 바꾸지 않고, 렌더링 예약 역할만 함

배치 처리 (Batching)

React는 효율을 위해 여러 상태 업데이트를 한 번에 합쳐서 처리한다.

setCount(count + 1);
setCount(count + 1);

• 두 번 호출했지만, 실제 결과는 +1
• 이유: 두 호출 모두 같은 count 값을 기반으로 업데이트했기 때문

함수형 업데이트로 해결

함수형 업데이트는 항상 최신 상태(prev) 를 기준으로 계산하기 때문에 안전하다.

setCount(prev => prev + 1);
setCount(prev => prev + 1); // ✅ 최종적으로 +2 됨

React는 큐를 처리할 때 prev를 순차적으로 업데이트하므로 원하는 결과가 나온다.

왜 비동기로 설계했을까?

• React는 여러 업데이트를 모아서 한 번에 처리해야 성능이 좋아짐
• UI를 중간중간 깜빡이거나 불필요하게 여러 번 렌더링하지 않도록
• React 18부터는 동시성(Concurrent Rendering) 개념도 추가되어, 상태 업데이트를 더 효율적으로 스케줄링 가능

정리

• setState/setCount는 즉시 값이 변하지 않음
• 내부적으로 큐에 쌓이고, React가 렌더링 시점에 처리
• 여러 업데이트는 배치(batch) 되어 한 번에 처리됨
• 해결책: 함수형 업데이트(prev => …) 를 사용해 항상 최신 상태를 기준으로 계산