- Batching
주요 사례와 사용 방법
- 상태 업데이트(batch state updates):
- 리액트 같은 프레임워크에서는 상태 업데이트가 여러 번 발생할 때마다 각각 렌더링을 하지 않고, 특정 시점에 모아서 한 번에 렌더링하는 방식입니다. 이러면 불필요한 렌더링을 줄여 성능이 좋아집니다.
- 예를 들어, 리액트 18에서는 이벤트 핸들러 내부의 여러 상태 업데이트가 자동으로 배칭되며, ReactDOM.flushSync() 같은 메서드를 통해 강제 동기 업데이트도 가능합니다.
- 이벤트 처리(batch event handling):
- JavaScript에서 스크롤, 리사이즈 같은 빈번히 발생하는 이벤트는 성능에 큰 영향을 줄 수 있습니다. 이러한 이벤트는 requestAnimationFrame, setTimeout 등을 이용해 특정 주기마다 모아서 한 번에 처리하도록 배칭합니다.
- 이 기법은 디바운싱(debouncing), **스로틀링(throttling)**과 함께 자주 사용됩니다. 디바운싱은 이벤트가 발생하는 빈도를 낮추는 것이고, 스로틀링은 일정 주기마다 이벤트를 실행하도록 제한합니다.
- 네트워크 요청(batch network requests):
- 동일한 API를 여러 번 호출하는 상황에서는 요청을 배칭하여 한 번에 서버로 보내는 방식이 성능에 유리합니다.
- 예를 들어 GraphQL에서는 여러 쿼리를 모아서 한 번에 서버로 보내는 Batching을 지원합니다. 이를 통해 네트워크 부하를 줄이고, 서버에 보내는 요청 횟수를 줄일 수 있습니다.
Batching의 장점
- 성능 최적화: 연산량을 줄이고, 불필요한 작업을 줄여 성능을 개선합니다.
- 코드 간결성: 여러 작업을 하나의 배치로 묶어 관리하면 코드가 간결해지고, 유지 보수하기 쉬워집니다.
- 사용자 경험 향상: 이벤트 배칭이나 네트워크 요청 배칭을 통해 앱의 응답성을 높일 수 있습니다.
Batching을 활용할 때 주의할 점
- 배치의 타이밍을 잘 조절하지 않으면, 예기치 않은 지연이 발생할 수 있습니다.
- 상황에 따라 불필요한 배치로 인해 오히려 성능이 떨어질 수도 있습니다.