React Automatic Batching

Automatic Batching

개념

• 원래 React 컴포넌트는 상태(state)가 변경될 때마다 리렌더링이 발생합니다.
• 이런 문제점을 해결하고자 18버전부터는 Batching이라는 개념이 도입되었습니다.
• Batching은 여러 상태 업데이트를 묶어서 한 번에 처리하는 개념입니다.
• 간단히 말해서, 리액트는 여러 상태 변경이 일어날 때, 이를 한 묶음으로 처리하여 효율적인 렌더링을 도와줍니다.

Batching 예시

import React, { useState } from 'react';

const AutoBatchingExample = () => {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);

  const handleButtonClick = () => {
    // 여러 state를 동시에 업데이트
    setCount1(count1 + 1);
    setCount2(count2 + 1);
  };

  return (
    <div>
      <p>Count 1: {count1}</p>
      <p>Count 2: {count2}</p>
      <button onClick={handleButtonClick}>Increment Counts</button>
    </div>
  );
};

export default AutoBatchingExample;

장점

• 성능에서 장점이 발생합니다.
• 여러 개의 state 업데이트마다 발생하는 불필요한 리렌더링을 막아주기 때문입니다.
• Batching은 필요한 하나의 리렌더링을 수행합니다.