[React] React Compiler 당장 씁시다

성능 최적화에 대한 고민을 해본 개발자라면 React.memo, useMemo, useCallback 같은 API들과 씨름했던 경험이 있을 텐데요. 오늘은 이 수동적인 최적화 작업을 한 번의 설치 딸깍으로 해결해줄 React Compiler에 대해서 알아봅시다.

반응형

---

1. React Compiler란?

React Compiler는 React 애플리케이션의 성능을 자동으로 최적화해주는 빌드 타임 도구인데요.

useMemo나 useCallback을 사용하여 불필요한 계산을 건너뛰거나, React.memo를 사용하여 컴포넌트의 불필요한 리렌더링을 막아왔던 작업을 자동으로 해주는 컴파일러라고 생각하시면 됩니다.

참고를 위해, 메모이제이션으로 성능 최적화하는 방법에 대해 다룬 글도 첨부해봅니다.

https://musubi-iroiro.tistory.com/633

[React] 메모이제이션으로 성능 최적화하기(useMemo, React.memo, useCallback 완전 비교)

 

2. 설치 방법

아직 공식 릴리즈는 아니고 릴리스 후보 버전으로만 사용이 가능한데요. Vite 환경에서 개발하는 걸 가정하고 설치 방법을 써보겠습니다.

우선, 터미널에 아래의 코드를 입력해서 설치해줍시다.

# 리액트 19+
npm install -D babel-plugin-react-compiler@rc

# 리액트 17, 18
npm install react-compiler-runtime
npm install -D babel-plugin-react-compiler@rc

 

 

그다음, vite.config.js 또는 vite.config.ts에 플러그인 설정을 추가해줍시다.

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [
          ["babel-plugin-react-compiler", {
            // React 17, 18 사용 시
            runtimeModule: "react-compiler-runtime"
          }]
        ]
      }
    })
  ],
  // ...
});

 

설치 후에는 그냥 코드 save만 해도 react compiler를 누릴 수 있는데요. 그럼 얘는 어떤 작업을 해주는걸까요?

 

3. React compiler를 통한 메모이제이션

react compiler를 쓰면 useMemo, useCallback, React.memo를 알잘딱깔센 적용해서 불필요한 재계산 및 재생성을 방지해줍니다. 

기존에 우리는 컴포넌트나 함수의 불필요한 재실행을 막기 위해 React.memo, useMemo, useCallback 같은 API를 수동으로 사용해야 했습니다. 이는 개발자에게 큰 부담이었고, 의존성 배열을 잘못 설정하면 오히려 성능 저하를 일으키거나 예상치 못한 버그를 만들기도 했는데요. 

React Compiler는 코드를 분석하여 어떤 값이 변했고 어떤 값이 변하지 않았는지를 컴파일 시점에 자동으로 파악합니다. 그리고 변하지 않은 값에 의존하는 계산이나 컴포넌트 렌더링은 불필요하게 다시 실행되지 않도록 자동으로 메모이제이션 로직을 주입해 줍니다.

// 컴파일러 적용 전 (수동 최적화)
function MyComponent({ data }) {
  const processedData = useMemo(() => heavyCalculation(data), [data]);
  return <ChildComponent result={processedData} />;
}

// 컴파일러 적용 후 (자동 최적화)
function MyComponent({ data }) {
  // 개발자는 이대로 작성하면 됨.
  // 컴파일러가 'data'가 변경될 때만 heavyCalculation이 실행되도록 자동으로 메모이제이션 로직 주입.
  const processedData = heavyCalculation(data);
  return <ChildComponent result={processedData} />;
}

 

요렇게 아무것도 안 써도 자동으로 최적화해주는건데요.

이게 가능한 이유는 React Compiler가 정밀하게 의존성을 추적해주기 때문인데요. React Compiler는 코드의 실제 흐름과 데이터 종속성을 깊이 이해해 의존성을 알아서 정밀하게 추적해서 객체 전체가 아니라 실제 사용되는 속성만 추적하고, 불필요한 반응성을 제거해줘서 최적화에 도움을 줍니다.

 

---

이상입니다.

react compiler 아직 안 써보신 분들이라면 한번씩 써보시길 바랍니다!