리액트버전 18부터 등장하는 Batching 개념

🧐  Batching 이란 여러 상태가 한 번에 변경될 때, 리액트는 이러한 변경 사항을 일괄 처리하여 렌더링 주기를 최적화하는 방식을 의미한다.

 

Batching

• 리액트 버전 18부터 더욱 강화되었다.
• 이벤트 처리 방식의 개선으로, 성능을 향상하는데 도움이 된다.
• 리액트가 UI 업데이트를 처리할 때 여러 업데이트를 일괄로 처리하여 렌더링 주기를 최적화하는 방식을 의미한다.

 

 

기존

• 상태(State)가 업데이트되면, 해당 컴포넌트와 그 자식 컴포넌트들이 모두 다시 렌더링 되었다.
• 이러한 방식은 작은 업데이트도 큰 렌더링 작업으로 이어질 수 있어 성능 문제가 발생할 수 있었다.

 

 

버전 18

• 여러 상태 업데이트를 한꺼번에 처리하여 렌더링 작업을 최적화한다.
• 예를 들어, 여러 상태가 한 번에 변경될 때, 리액트는 이러한 변경 사항을 일괄 처리하여 렌더링을 단일 작업으로 처리한다.
• 중복된 렌더링을 방지하고 성능을 향상한다.

 

 

Batching 예문

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  
  const handleClick = () => {
    // 여러 상태 업데이트를 한 번에 처리
    setCount(count + 1); // count 상태를 증가시킴
    setCount(count + 1); // count 상태를 다시 증가시킴
    setCount(count + 1); // count 상태를 한 번 더 증가시킴
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increase Count</button>
    </div>
  );
}

export default Counter;

// 자바스크립트 기반 콘솔 결과
count 1
count 2
count 3

// batching 콘솔 결과
count 3

• handleClick 함수 내에서 setCount 함수를 연속해서 호출
• 리액트는 상태 업데이트를 일괄 처리하여 최적화한다.
• 따라서 버튼을 클릭할 때마다 count 상태가 세 번 증가하지만, 리액트는 이를 한 번의 렌더링 작업으로 처리하여 성능을 최적화한다.