프론트엔드/React

리액트 Batching

카엔입니다 2022. 11. 3. 12:25

Batching이란?

React에서 렌더링 관련된 아주 중요한 개념입니다

최적화에 크게 기여를 하고 있는 기능이며 18버전에서 Batching이 더욱 강화되었습다

리액트에서의 상태는 렌더링이 발생시킵니다

즉 1 상태 === 1 렌더링입니다

이런식으로 모든 상태 업데이트마다 렌더링을 발생시키면 리액트는 수많은 리렌더 때문에 멈춰버릴 겁니다

이때 사용되는 것이 배칭입니다

Batching이란 16ms 이내에서 발생한 모든 상태 업데이트를 하나의 리렌더링으로 묶어줍니다

이렇게 하나의 리렌더링만 발생함으로써 불필요한 렌더링을 방지하고 성능을 최적화 시키게 되는 리액트의 핵심 개념입니다

Batching은 언제 발생할까?

React Event 단위로 배칭이 발생하게됩니다

즉 2개의 함수에 상태 업데이트가 따로 일어나게 된다면 이벤트는 두번 발생하게됩니다 그 결과 배칭 또한 두번 일어납니다