IwannabeRealnerD

Develog

batching

IwannabeRealnerD

batching

글 분류

small

키워드

react

생성일

2023/02/26 12:42

최근 수정일

2023/10/15 23:02

작성중

TLDR;

react는 특별한 설정이 없는 이상 이벤트 핸들러의 모든 함수를 실행하고 난 후 한번에 state update를 수행한다.

Batching

state 일괄처리

en.dict.naver.com

https://en.dict.naver.com/#/entry/enko/57c53eea28954c038c2d7861bc48dd32

사전적 의미

•

집단, 함께 묶다

리액트에서의 의미

•

퍼포먼스 개선을 위해 다수의 state 업데이트를 하나의 리렌더에 그룹화(일괄처리) 하는 것

실생활 예시

상황

•

음식점에서 손님이 종업원에게 주문하는 상황

•

손님은 총 4개의 메뉴를 주문하는 상황

batching

종업원이 손님의 테이블에 도착해 주문을 받음 

손님이 메뉴를 보며 4개의 메뉴를 주문함 

이 때 종업원은 4개의 메뉴에 대한 주문을 다 받고 카운터로 가서 4개의 메뉴를 주방에 전달

streaming

•

일괄처리 batching과 반대되는 개념

종업원이 손님의 테이블에 도착해 주문을 받음

손님이 메뉴를 보며 4개중 첫번째 메뉴를 주문함

종업원은 메뉴를 듣자마자 카운터로 가서 첫번째 메뉴를 주방에 전달

종업원은 다시 손님의 테이블에 도착해 주문을 받음

손님이 메뉴를 보며 4개중 2번째 메뉴를 주문함

종업원은 메뉴를 듣자마자 카운터로 가서 두번째 메뉴를 주방에 전달

4개의 메뉴까지 반복…

리액트 예시

기본 batching 예시

function App() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  function handleClick() {
    setCount(c => c + 1); // 리렌더되지 않음
    setFlag(f => !f); // 리렌더되지 않음
    // Batching -> 리액트가 자동으로 마지막에 한번에 리렌더링 함
  }

  return (
    <div>
      <button onClick={handleClick}>Next</button>
      <h1 style={{ color: flag ? "blue" : "black" }}>{count}</h1>
    </div>
  );
}
TypeScript
복사

•

불필요한 리렌더가 사라지므로 퍼포먼스가 개선됨

•

리액트 17까진 위와 같이 이벤트핸들러 내부에서만 batching이 수행됬었음

리액트 18 batching 예시

function App() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  function handleClick() {
    fetchSomething().then(() => {
      // React 18 and later DOES batch these:
      setCount(c => c + 1);
      setFlag(f => !f);
      // React will only re-render once at the end (that's batching!)
    });
  }

  return (
    <div>
      <button onClick={handleClick}>Next</button>
      <h1 style={{ color: flag ? "blue" : "black" }}>{count}</h1>
    </div>
  );
}
TypeScript
복사

•

리액트 18의 createRoot로 시작된 프로젝트는 state update는 위치에 상관없이 모두 batching 업데이트

◦

이벤트 핸들러에서도

function handleClick() {
  setCount(c => c + 1);
  setFlag(f => !f);
  // 마지막에 한번만 리렌더링
}
TypeScript
복사

◦

setTimeout 콜백함수 에서도

setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // 마지막에 한번만 리렌더링
}, 1000);
TypeScript
복사

◦

fetch resolve 에서도

fetch(/*...*/).then(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // 마지막에 한번만 리렌더링
})
TypeScript
복사

◦

addEventListener 에서도

elm.addEventListener('click', () => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // 마지막에 한번만 리렌더링
});
TypeScript
복사

batching이 싫으면

import { flushSync } from 'react-dom'; // Note: react-dom, not react

function handleClick() {
  flushSync(() => {
    setCounter(c => c + 1);
  });
  // DOM 바로 업데이트
  flushSync(() => {
    setFlag(f => !f);
  });
  // DOM 바로 업데이트
}
TypeScript
복사

•

물론 흔한 케이스가 아니므로 주의 해서 사용 → 꼭 했어야 할까?라는 자세로 사용하자. 생각보다 쓸일 없다.

batching

Batching

사전적 의미

리액트에서의 의미

실생활 예시

상황

batching

streaming

리액트 예시

기본 batching 예시

리액트 18 batching 예시

batching이 싫으면

참조