React 18 부터 Automatic Batching 개념이 새롭게 등장했습니다. Automatic Batching을 한국말로 직역하면 '자동 일괄처리'를 뜻해요. 그렇다면 React에서 Automatic Batching은 어떤 기능을 의미하는 것인지 알아봅시다!
이 글은 react github 문서의 내용을 기반으로 작성했습니다.
Batching이란?
Batching 기능은 React 17 이하 버전에서 일부 지원하는 기능이에요. 먼저 아래의 코드를 살펴봅시다!
Next 버튼을 클릭했을 때, handleClick함수가 실행됩니다. handleClick함수에서는 setCount와 setFlag 함수를 사용하여 count state와 flag state를 변경해주고 있습니다.
React에서는 state를 변경하면 리렌더링이 발생합니다. 그런데 state가 변경되는 즉시 리렌더링이 발생하는 것이 아니라, 이벤트 처리가 모두 끝난 후에 리렌더링 합니다. 위의 코드를 보면 setCount가 실행됨과 동시에 리렌더링이 발생하지 않고, handleClick 함수가 모두 실행된 후에 리렌더링이 발생합니다. 즉, state의 변경을 일괄적(Batching)으로 화면에 반영하는 것이죠!
데모 : React17 이벤트 핸들러에서의 state 업데이트는 일괄처리된다.
Batching은 다음과 같은 이점이 있습니다.
- 불필요한 리렌더링을 막음으로써 퍼포먼스가 향상된다.
- state가 불완전한 상태로 렌더링되는 것을 막는다. (만약 일부의 state만 변경된 상태로 리렌더링이 발생한다면, 의도한 대로 화면이 노출되지 않을 수 있습니다.)
이 동작은 마치 음식점에서 여러 음식을 주문했을 때, 하나의 음식이 먼저 완성되더라도 바로 서빙하지 않고 모든 음식이 준비되었을 때 음식을 한번에 서빙해주는 것과 비슷하죠!
React 17 이하 버전에서의 Batching
React 17 혹은 그 이하 버전에서는 클릭과 같은 브라우저 이벤트에서만 Batch update를 지원합니다. 그 외의 이벤트(timeouts, promises, native event 등)에서는 아래의 예시처럼 state 업데이트 즉시 리렌더링이 발생해요.
위의 코드를 살펴봅시다.
Next버튼을 클릭하면 handleClick함수가 실행됩니다. browser event는 fetchSomething함수를 실행하고 종료됩니다. fetchSomething 함수가 완료된 후에 callback 함수가 실행되는데, 이 때 발생하는 state update는 일괄처리 되지 않고, state update를 실행함과 동시에 리렌더링이 발생해요.
🔗 데모 : React17 이벤트 핸들러가 끝난 후에 발생하는 업데이트는 일괄 처리되지 않는다.
따라서 Batching의 이점을 얻을 수 없습니다.
- 불필요한 리렌더링이 발생하여 퍼포먼스가 안좋아진다.
- state가 불완전한 상태로 렌더링된다.
React 18부터 지원하는 Automatic Batching
React 18부터는 browser event handler 내부에서 발생한 업데이트 뿐만 아니라, 모든 업데이트에 Batching이 적용됩니다. 따라서 17이하 버전에서 지원하지 않았던 timeout, promises, native event handler 에서도 동일하게 state가 일괄처리 됩니다!
데모: React18 모든 업데이트가 일괄처리 된다. (createRoot 사용)
⚠️ 단, createRoot를 사용하여 렌더링 했을 때만 동작합니다.
render를사용하여 렌더링한다면, Automatic Batching이 동작하지 않습니다. 따라서 React18로 업그레이드 한다면 렌더링 함수를 createRoot로 변경해주세요!
데모: React18 render를 사용하면 React17과 동일하게 동작한다.
만약 Automatic Batching을 원하지 않는다면?
일반적으로 Batching이 안전하지만, state가 업데이트 되었을 때 즉시 리렌더링이 필요한 기능이 있을 수 있습니다.
이럴 땐, 아래와 같이 flushSync 함수를 사용할 수 있습니다. 하지만 공식 문서에서는 이 기능을 일반적으로 사용하지 않기를 권하고 있어요.
'개발 > React' 카테고리의 다른 글
| [React] 컴포넌트 Property type 가져오기 | Get component props type (0) | 2023.11.14 |
|---|---|
| React useEffect 제대로 사용해보자! (1) | 2023.07.23 |
