React 18의 Automatic Batching과 flushSync를 설명해주세요.

Question

Accepted Answer

### **Automatic Batching**

배칭은 **여러 상태 업데이트를 모아 한 번의 리렌더링으로 처리**하는 것입니다.

React 17까지는 **React 이벤트 핸들러 안에서만** 배칭이 됐습니다. setTimeout, Promise 후속 처리, 네이티브 이벤트 안에서 상태를 두 번 바꾸면 리렌더도 두 번 일어났습니다.

React 18부터는 `createRoot` 기준으로 **어디서 업데이트하든 자동으로 배칭**됩니다. API 응답을 받아 데이터와 로딩 상태를 연달아 바꿔도 리렌더는 한 번입니다. 코드 변경 없이 리렌더 횟수가 줄어드는, 18의 대표적인 기본 개선입니다.

### **flushSync**

반대로 **배칭을 강제로 끊고 상태 변경을 즉시 DOM에 반영**해야 할 때 쓰는 탈출구입니다. `react-dom`에서 제공합니다.

필요한 경우는 제한적입니다.

- 상태 변경 **직후의 DOM을 측정**해야 할 때 — 새 항목을 추가하자마자 그 위치로 스크롤

React