[React] Batching과 렌더링 최적화

혤·2022년 11월 17일

React

목록 보기

6/21

React 18버전부터 Batching이 더욱 강화되었다.
Batching은 React에서 굉장히 중요한 개념이며 최적화에 크게 기여하고 있다고 하는데, 이번에 Batching에 대해 처음 알게 되었다...
Batching에 대해 살펴보자!

📌 Batching 이란?

📍 Batch

Batch는 '일괄'이란 뜻이다.

📍 React에서의 Batching

배칭 (Batching)이란 여러 개의 state 업데이트를 하나의 리렌더링으로 묶는 것을 의미한다.

React 17까지는 React event handler 내부의 업데이트까지만 batch update를 했기 때문에, Promise, setTimeout, native event handler와 그 외 모든 이벤트 내부에서의 업데이트들은 batching되지 않았다.

React 18부터 createRoot를 통해 브라우저 이벤트 뿐만 아니라 모든 업데이트들이 어디서 왔는가와 무관하게 자동으로 bathing이 적용되게 할 수 있다. (= automatic batching)
auto batching이 적용되게 할 수 있다라고 한 이유는 automatic batching을 하지 않게 할 수도 있다는 뜻이다.
ReactDOM.flushSync를 이용해 해당 상태 업데이트 호출을 배치 대상에서 제외시킬 수 있다.

📌 Batching 예시

function App () {
  const [count, setCount] = useState(0);
  
  const handleClick = () => {
    setCount((count) => count+1);
    setCount((count) => count+1);
    setCount((count) => count+1);
  };
  
  useEffect(() => {
    console.log("count", count);
  }, [count]);
  
  return <button onClick={handleClick}> + </button>;
}

Javascript 기반으로 생각할 경우 console에 count1 > count2 > count3이라고 찍힐 것 같은 느낌이 온다.

그러나, React에서는 count3만 한 번 찍힌다.
즉, 배칭으로 인해 세 번의 상태변화가 세 번의 렌더링을 발생시키지 않고 한 번의 렌더링만을 발생시킨다.

📌 Batching 설계 이유

배칭은 성능 최적화를 위해 설계됐다.
단기간에 일어나는 상태 변화를 매번 렌더링 시키지 않고, 일괄처리함으로써 성능을 최적화한다.

레스토랑 직원이 하나의 주문을 받을 때마다 주방으로 가는 것은 비효율적이다.
수 개의 주문이 동시에 들어온다면, 한 번에 받아서 주방으로 향하는 것이 효율적이다.

따라서, 일정 기간이 끝날 때까지 setState를 실행하지 않고 모아둔다.

배칭은 React event 단위로 발생한다.

📌 Batching을 활용한 렌더링 최적화

[ 최적화 전 ]

function useInput () {
  const [value, setValue] = useState('');
  const [validation, setValidation] = useState(false);
  
  const onChange = (e) => {
    setValue(e.target.value);
  }
  
  // value가 업데이트 되면 validation 업데이트
  useEffect (() => {
    setValidation(validate(value));
  }, [value]);
  
  const validate = (value) => {
    ...
  }
    
  return {value, validation, onChange}
}

setValue, setValidation이 다른 React event에 기반하므로 렌더링이 두 번 일어난다.

[ 최적화 후]

function useInput () {
	const [value, setValue] = useState('');
	const [validation, setValidation] = useState(false);

	const onChange = (e) => {
  		setValue(e.target.value);
  		setValidation(validate(e.target.value));
	}
  
	const validate = (value) => {
	  ...
	}
  
	return {value, validation, onChange}
}