batching 모르면 react 개발하는거 아님 - batching 알아보기

최근에 학교 아는 선배님의 블로그를 보다가 batching을 처음봤다 여태까지 공부하면서 알지 못했던 부분이라

더 잘기억하기 위해 블로그를 쓰려고 한다

 

batching이란

렌더링을 최소화 하기위해 setState 작업을 하나로 묶어서 실행 시키는 것이다

 

코드로 확인해보자!

import { useState } from "react";

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

  console.log("렌더링 됨");

  return (
    <button
      onClick={() => {
        setCount((prev) => prev + 1);
        setCount((prev) => prev + 1);
        setCount((prev) => prev + 1);
      }}
    >
      +3
    </button>
  );
}

export default App;

 

위의 코드를 보면 +3버튼을 눌렀을때 count state는 3이 되고 setCount가 3번 실행했으니까

그에따른 리렌더링도 3번 되서 "렌더링 됨"이 3번 찍힌다고 생각할수 있다

하지만 렌더링은 1번만 된다 이렇게 setCount를 한번에 묶어 리렌더링을 최소화 하는것이 batching이다

 

왜 렌더링을 최소화 해야할까?

바뀐것이 있다면 렌더링을 하는것이 상관이 없다 하지만 위의 코드와 같이 결국에 count를 3으로 바꾸는데 그에 따른 렌더링이 3번이나 된다면 굉장히 비효율적일 것이다 그래서 batching을 해 렌더링을 1번만 하게 하는 것이다 

 

React 17

react 17버전에서는 setTimeout과 같은 비동기 함수에는 batching이 적용 되지 않는다

import { useState } from "react";

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

  console.log("렌더링 됨");
  return (
    <button
      onClick={() => {
        setTimeout(() => {
          setCount((prev) => prev + 1);
          setCount((prev) => prev + 1);
          setCount((prev) => prev + 1);
        }, 1000);
      }}
    >
      +3
    </button>
  );
}

export default App;

 

+3 버튼을 누르면 3번 렌더링 되서 "렌더링 됨"이 3번 찍힌다

 

하지만 React 18 버전부터 auto batching을 지원해 setTimeout과 같은 비동기 이벤트 함수에서도 적용이 된다!

 

flushsSync

하지만 batching을 사용하지 않아 위와 같은 상황에서 리렌더링을 3번하고 싶게 한다면 flushsync 사용하면 된다

import { useState } from "react";
import { flushSync } from "react-dom";

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

  console.log("렌더링 됨");
  return (
    <button
      onClick={() => {
        flushSync(() => setCount((prev) => prev + 1));
        flushSync(() => setCount((prev) => prev + 1));
        flushSync(() => setCount((prev) => prev + 1));
      }}
    >
      +3
    </button>
  );
}

export default App;

 

flushSync를 사용해 batching을 하는것을 무시하게 해준다

 

마무리

오늘은 batching에 대해 알아보았다

react에서 불필요한 렌더링을 막으려는 노력을 볼수있어서 좋았고

몰랐던 것인데 이번에 새로 알게되어 좋았다