24.06.24 리액트의 Batching이란 무엇인가

Batching이란?

리액트의 useState훅에서 setState는 state 값을 바꾸면서 리렌더링을 유발한다.

이 때 여러번 setState를 사용하여 여러번 리렌더링을 하게되면 효율적이지 못하므로 일괄적으로 모아서 처리하는것을 batching이라 한다.

batching을 이용하여 리액트는 불필요한 리렌더링을 방지한다.

 

 

Batching필요성 예시

예시 이미지

만약, 우리가 버스를 탔을 때 하차벨을 누른 즉시 버스가 멈추고 해당 승객이 하차한다고 가정해보자.

그렇다면 짧게는 몇초, 길게는 몇십초마다 버스가 멈추고 하차한뒤 다시 버스가 출발할 것이다.

다수의 인원을 정해진 구역마다 돌아다니며 수송시키는 대중교통의 목적성에 어긋난다.

 따라서 우리는 정류소를 지정하고, 하차벨을 누르면 정류소에 버스가 정차하여 하차를 원하는 승객은 하차하고, 승차를 원하는 승객은 승차하는 규칙을 가지고있다.

 

버스기사는 리액트, 승객은 이벤트, 하차벨은 상태값의 변화라 해보자. 승객이 하차벨을 누르는 모습은 리액트의 상태값이 변경되었음을 리액트에게 알려주는 것과 비슷하다.

 

// src/App.js

import { useState } from 'react';

const App = () => {
    const [number, setNumber] = useState(0);

    function numberIncrease() {
        setNumber((prev) => prev + 1);
        setNumber((prev) => prev + 1);
        setNumber((prev) => prev + 1);
    }

    return (
        <div>
            {/* 버튼을 누르면 3씩 플러스 된다. */}
            <div>{number}</div>
            <button onClick={numberIncrease}>버튼</button>
        </div>
    );
};

export default App;

이러한 코드가 있다고 생각해보자.

버튼을 누르면 numberIncrease함수가 실행되는데, 함수에는 setNumber을 세번 실행하는 명령이 들어있다.

setNumber가 실행될때마다 렌더링이 진행되므로, 3번 리렌더링이 발생한다고 생각할 수 있지만, batching에 의하여 세번의 setNumber을 한 큐에 모아놓고 한번에 순차적으로 진행하므로 한번의 리렌더링이 발생한다.

batching

 

따라서 Batching은 리액트의 상태값 변화를 일정 주기로 처리하는 방법을 의미한다.

 

 

리액트 17버전까지의 batching은 오직 이벤트 핸들러 내부의 state변경 작업에 대해서만 가능했다. 하지만 Promise, setTimeout, Native Event Handler 내부의 작업은 불가능했다.

 그 이유는 브라우저의 이벤트가 실행되는 중에만 batching을 실행했기 때문이다. 하지만 리액트 18버전의 automatic Batching 업데이트로 인하여 batching에 해당하지 않는 것들도 포함되어 하나의 큐안에 묶여 순차적으로 진행된다.

 

---

추가적으로 flushSync() 메서드를 활용하면 auto Batching을 무시하고 렌더링을 시킬 수 있다.

// src/App.js

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

const App = () => {
    const [number, setNumber] = useState(0);

    function numberIncrease() {
        flushSync(() => {
            setNumber((prev) => prev + 1);
        });
        setNumber((prev) => prev + 1);
        setNumber((prev) => prev + 1);
    }

    return (
        <div>
            {/* 버튼을 누르면 3씩 플러스 된다. */}
            <div>{number}</div>
            <button onClick={numberIncrease}>버튼</button>
        </div>
    );
};

export default App;

이렇게 작성하면 flushSync메서드가 실행될 때 DOM을 즉시 업데이트하고 뒤 setNumber 두개는 batching되어 작업이 진행된다.

 

---

리액트 배칭(Batching)의 모든 것 | 요즘IT