React 자동 배칭: 몇 번 재렌더링?

Source: Dev.to

Example

import { useState } from 'react';

const App = () => {
  const [name, setName] = useState('');
  const [age, setAge] = useState(null);
  const [hobby, setHobby] = useState('');

  const displayPerson = () => {
    setName('Luiji');
    setAge(29);
    setHobby('swimming');
  };

  console.log('Component rendered');

  return (
    <>
      
### {name}

      
### {age}

      
#### Enjoys: {hobby}

      
        {name === 'Yoshi' ? 'Display Person' : 'Person Displayed'}
      
    
  );
};

export default App;

버튼을 클릭하면 컴포넌트가 한 번만 다시 렌더링됩니다. 세 번이 아니라 한 번만 렌더링되는 이유는 React가 동일한 이벤트 루프 내에서 발생하는 상태 업데이트들을 자동으로 배치하기 때문입니다.

Note: 첫 번째 console.log는 초기 렌더링 시 실행되고, 두 번째는 버튼 클릭으로 인해 재렌더링이 트리거된 후 실행됩니다.

배치란 무엇인가?

배치는 여러 상태 업데이트를 하나의 렌더링 패스로 묶어 불필요한 작업을 줄이고 성능을 향상시킵니다. React 18에서는 자동 배치가 기본적으로 활성화되어 있으며 다음 상황에서 작동합니다:

• 네이티브 이벤트 핸들러(예: 클릭)
• 비동기 작업(예: 프로미스)
• 타임아웃 및 인터벌

세 개의 setState 호출(setName, setAge, setHobby)이 모두 같은 클릭 이벤트 동안 발생하기 때문에 React는 이를 배치하고 단 한 번의 렌더링만 수행합니다.