2022년 3월 리액트 18버전이 출시되었는데, 이전 버전인 리액트 17이 16에 비해 크게 달라지지 않은 점과 달리 18버전에서는 여러 새로운 기능이 소개되었다.

특히 자동 배칭은 2년이 지난 지금까지 리액트 생태계에 대한 깊은 이해 없이도 성능을 최적화할 수 있다는 점에서 개발자들이 쉽게 접근하고 이해할 수 있는 기능으로 평가받고 있다.

이번 글에서는 리액트 렌더링 과정에서 배칭에 대한 개념을 알아본다.

TL;DR

리액트는 상태 값이 변경되면 해당 값을 다루는 컴포넌트를 다시 호출하여 렌더링을 수행하고, 컴포넌트가 JSX 엘리먼트를 반환하면 새로운 가상 DOM을 생성한다. 이후 생성된 가상 DOM은 이전 버전의 가상 DOM과 비교되어 업데이트가 필요한 부분을 식별하는데, 이를 조정이라고 한다.

최종적으로 적용할 가상 DOM이 결정되면, 적용 단계로 넘어가고 사용자는 UI의 변경을 느낄 수 있다. 리액트는 이러한 과정에서 여러 상태 값이 동시에 변경되더라도 한 번에 업데이트하여 성능을 향상시키는 기능을 갖고 있는데, 이를 배칭이라고 한다.

기존 배칭의 단점은 Promise, 타이머 함수, Native Event로 발생하는 상태 값 변화를 감지하지 못했으나, 18버전부터는 createRoot 함수를 사용하여 리액트가 이를 감지할 수 있게 되었다. 이것이 자동 배칭이다.

리액트의 렌더링 과정

배칭을 설명하기전 우선 리액트에서 상태 값이 변하면 어떤 과정을 거치는지 이해할 필요가 있다.

리액트 렌더링

상태 값을 변경하면 리액트는 UI를 변경할 준비에 들어가는데, 그 첫 번째 단계가 렌더링이다. 이 단계에서 리액트는 변경된 상태 값을 중심으로 새로운 가상(Virtual) DOM을 생성한다.

상태 값이 변하면 리액트는 컴포넌트를 다시 호출(리렌더링)하지만 상태 값이 변하는 즉시 컴포넌트가 호출되는 것은 아니다. 리액트는 컴포넌트를 언제 호출해야할지 최적의 시간을 계산하여 적절한 타이밍에 상태 값이 변경된 컴포넌트를 다시 호출하는데, 이는 리액트만이 그 권한을 가지며 언제 컴포넌트를 호출할지는 우리가 알 수 없다.

조정(Reconciliation)

컴포넌트가 다시 호출되면 변경된 상태 값을 바탕으로 가상 DOM을 다시 그린다. 조정 단계에서 새로 그려진 가상 DOM 과 이전 가상 DOM을 비교하여 업데이트가 필요한 부분을 식별한다. 변경 사항이 식별되면, 실제 DOM에 대한 업데이트를 최소화하기 위해 업데이트가 필요한 컴포넌트만 다시 렌더링한다.

적용(Commit)

최종적으로 이전 단계에서 식별된 업데이트가 실제(Actual) DOM에 반영된다. 적용 단계까지 완료되면 사용자는 비로소 화면 상에서 변화된 UI를 확인할 수 있다.

리액트 배칭

리액트에서 배칭은 상태 값의 변화로 인해 발생하는 여러 업데이트를 하나의 그룹으로 묶어서 처리하는 메커니즘을 말한다.

예를 들어, 사용자 이벤트가 발생하는 시점에 여러 상태 값이 변경되는 코드가 있다면, 리액트는 이를 모두 기다린다. 단 하나의 상태 값이 변경되었다고 해서 바로 렌더링 단계로 넘어가는 것이 아니라 같은 이벤트 주기에서 처리할 수 있는 변경점을 하나의 그룹으로 처리하여 성능을 최적화한다.

즉, 리액트 배칭은 리액트의 상태 값을 일정한 주기로 처리하는 작업을 말한다.

예시를 통해 배칭을 살펴보자.

아래 코드는 버튼을 클릭하면 상태 A, B, C에 임의의 숫자를 할당하고 useEffect에서 감지하여 로그를 출력한다.

import { useEffect, useState } from 'react'

const setRandomNumber = () => {
  return Math.floor(Math.random() * 100) + 1
}

export default function App() {
  const [A, setA] = useState(0)
  const [B, setB] = useState(0)
  const [C, setC] = useState(0)

  const handleClick = () => {
    setA(setRandomNumber)
    setB(setRandomNumber)
    setC(setRandomNumber)
  }

  useEffect(() => {
    console.log(`A: ${A}, B: ${B}, C: ${C}, Total: ${A + B + C}`)
  }, [A, B, C])

  return (
    <>
      <button onClick={handleClick}>재할당</button>
      <h4>A: {A}</h4>
      <h4>B: {B}</h4>
      <h4>C: {C}</h4>
    </>
  )
}

상태 A, B, C가 동시에 변경되어도 배칭 덕분에 상태 값은 하나의 그룹으로 변경되어 한 번의 렌더링만 발생한다.

리액트 17버전에서 배칭

리액트 17버전까지는 유저 이벤트에 연결된 함수 내에서 변경된 상태 값만 배칭의 범위 안에 들어왔다는 문제점이 있었다. 따라서 setTimeOut과 같은 타이머 함수와 Promise, Native Event등은 배칭의 효과를 누릴 수 없었고 이러한 점은 성능 최적화와는 거리가 멀어졌다.

위 예시 코드에서 비동기로 실행되는 코드를 추가해 보자.

const timer = (t) => {
  return new Promise(res => setTimeout(res, t));
}

그리고 리액트의 이벤트 함수를 변경했다.

  const handleClick = async () => {
    await timer(0);

    setA(setRandomNumber)
    setB(setRandomNumber)
    setC(setRandomNumber)
  };

리액트 17버전에서 해당 코드를 실행하면 다음과 같은 결과를 확인할 수 있다.

리액트 17버전까지는 프로미스가 사용되면 해당 코드는 배칭 그룹에 포함시키지 못하기 때문에 로그가 세 번씩 출력되는 것을 확인할 수 있다.

리액트 18버전에서 배칭

리액트 18버전에서는 Root 컴포넌트를 생성하는 방식이 createRoot 함수로 변경되었고,Promise와 타이머 함수, Native Event 모두 이제는 리액트가 알아서 같은 주기에서 처리하고 이벤트를 분류할 수 있게 되었다.

이 기능을 자동 배칭이라고 한다.

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)