0. Batch Update란?
React에서 배치 업데이트(Batch Update)란
컴포넌트가 여러 번 업데이트 되더라도, 실제 DOM 요소에 변경사항을 적용하는 것을 최소화하여 애플리케이션의 성능을 최적화하는 기능이다.
React에서는 컴포넌트가 업데이트 되면, 다음과 같은 과정을 거칩니다.
- render() 함수 호출: 컴포넌트의 render() 함수가 호출되어 Virtual DOM을 반환합니다.
- Virtual DOM 비교: 이전에 렌더링된 Virtual DOM과 현재 렌더링된 Virtual DOM을 비교하여 변경사항을 찾습니다.
- 변경사항 적용: 변경된 Virtual DOM 요소들을 실제 DOM 요소에 적용합니다.
배치 업데이트는 이 과정에서 일어나는 "3. 변경사항 적용" 단계에서 최적화를 수행합니다. React에서는 변경사항을 적용할 때, 일정 시간 동안 변경사항을 모아서 한번에 적용하는 방식을 사용합니다. 이렇게 함으로써, DOM 요소에 접근하는 횟수를 줄이고, 변경사항 적용이 일어나는 빈도를 최소화하여 성능을 향상시킵니다.
batch update 사용
React에서 배치 업데이트를 사용하는 가장 대표적인 예시는 setState() 메서드입니다. setState() 메서드를 호출하면, 컴포넌트의 상태(State)를 변경하는 것이지만, 실제 변경사항이 적용되는 시점은 render() 함수가 호출되는 이후입니다. setState() 메서드를 여러번 호출하더라도, 이들은 배치로 처리되어 실제 변경사항이 적용되는 시점이 늦춰지게 됩니다.
또한, React에서는 ReactDOM.render() 함수를 호출할 때도 배치 업데이트를 수행합니다. ReactDOM.render() 함수는 애플리케이션 전체를 렌더링하는 함수이기 때문에, 이 함수를 호출할 때도 변경사항을 모아서 한번에 적용하는 방식을 사용합니다.
배치 업데이트는 React에서 자동으로 수행되기 때문에, 개발자가 별도로 처리할 필요가 없습니다. 다만, setState() 메서드를 사용할 때에는, 배치 업데이트가 일어나는 시점을 고려하여 코드를 작성해야 합니다.
