React에서 setState 호출이 항상 비동기적으로 동작한다고 말할 수 있을까요? React 18 이전과 이후의 자동 배치(automatic batching) 동작 차이를 setTimeout이나 Promise 콜백 내부에서의 setState를 예로 들어 설명해주세요.

React에서 setState 호출이 항상 비동기적으로 동작한다고 단정하기는 어렵습니다. React 18 이전에는 이벤트 핸들러 내에서 호출된 setState만 비동기적으로 동작하여 여러 setState 호출을 묶어(batching) 한 번의 리렌더링으로 처리했습니다. 하지만 setTimeout이나 Promise 콜백과 같이 이벤트 핸들러 외부에서 호출된 setState는 각각 별도의 비동기 작업으로 처리되어 여러 번의 리렌더링을 유발했습니다.

React 18부터는 자동 배치(automatic batching)가 도입되어 이벤트 핸들러 외부의 setState 호출도 자동으로 배치됩니다. 즉, setTimeout이나 Promise 콜백 안에서 여러 번의 setState를 호출하더라도 React 18에서는 이를 묶어서 한 번의 리렌더링으로 처리합니다. 이는 성능 향상에 크게 기여합니다.

예를 들어, React 18 이전에는 setTimeout 안에서 setState를 두 번 호출하면 두 번의 리렌더링이 발생했지만, React 18에서는 한 번의 리렌더링만 발생합니다. 이처럼 React 18 이전과 이후의 자동 배치 동작 차이는 setState가 비동기적으로 처리되는 방식과 리렌더링 횟수에 직접적인 영향을 미칩니다.