React Compiler v1.0 릴리즈

React Compiler v1.0 소개

🔗 리액트 블로그: React Compiler v1.0

간단하게 설명하면, React Compiler는 자동 메모이제이션을 통해 React 앱을 최적화하는 빌드 타임 도구입니다.

리액트 특징 중에서 부모컴포넌트가 랜더링이 되면 자식 컴포넌트가 랜더링이 되는 것입니다. 자식은 그대로인데 말이죠.

이러한 특성은 때때로 성능 저하를 일으킬 수 있습니다.

그래서 개발자들은 useMemo와 useCallback을 사용하여 메모이제이션을 구현했습니다.

하지만 이 방법은 때때로 복잡해질 수 있습니다. (귀찮기도하구요..)

beta버전 때부터 언제 도입되나 기다리고 있던 와중에 반가운 소식이 들려왔내요. (리액트 버전 19도 릴리즈 되었군요..)

React Compiler 적용

우선, React Compiler는 버전 17이상 부터 적용이 가능합니다. (19버전 부터 최적의 성능을 제공한다 합니다.)

🔗 리액트 블로그: 리액트 컴파일러

위의 블로그를 참고하여 각 환경에 맞게 설치를 진행해줍니다.

React Compiler

npm install react-compiler-runtime@rc

Babel Plugin

npm install babel-plugin-react-compiler@rc

Babel 설정

// babel.config.js
const ReactCompilerConfig = {
  target: '18', // '17' | '18' | '19'
}

module.exports = function () {
  return {
    plugins: [['babel-plugin-react-compiler', ReactCompilerConfig]],
  }
}

주의할 점으로 babel에 설정할 때, babel-plugin-react-compiler는 다른 babel 플러그인보다 먼저 실행되어야 합니다.

React Compiler 확인

잘 적용되었는지 확인하는 방법은 여러 가지가 있습니다.

1. React DevTools

개발자도구(F12)에서 Components 탭에 들어가면, 컴파일러에 의해 최적화된 컴포넌트 옆에 "Memo ✨" 배지가 표시됩니다.

기존에 React.memo로 감싸지 않았던 컴포넌트들에도 이 배지가 붙어있다면 React Compiler가 잘 동작하고 있는 거예요.

2. 빌드 로그 확인

빌드 시 터미널에서 React Compiler가 몇 개의 컴포넌트를 최적화했는지 로그로 확인할 수 있습니다.

# 빌드 로그 예시
Successfully compiled 42 out of 50 components

만약 일부 컴포넌트가 컴파일되지 않았다면, React의 규칙을 위반하는 코드가 있을 수 있으니 확인해보는 게 좋습니다.

3. eslint-plugin-react-compiler

React Compiler 팀에서 제공하는 ESLint 플러그인을 사용하면, 컴파일러가 최적화하지 못하는 코드를 미리 잡아낼 수 있습니다.

npm install eslint-plugin-react-compiler

// eslint.config.js
import reactCompiler from 'eslint-plugin-react-compiler'

export default [
  {
    plugins: {
      'react-compiler': reactCompiler,
    },
    rules: {
      'react-compiler/react-compiler': 'error',
    },
  },
]

이 플러그인을 적용하면 컴파일러가 건너뛰는 코드에 대해 경고를 띄워주기 때문에, 어떤 부분을 수정해야 하는지 파악하기 쉬워집니다.

마무리

실무에서 React로 개발하다 보면, 컴포넌트와 상태, 그리고 훅이 비대해지면서 의도치 않은 리렌더링이 자주 발생하곤 합니다. 이를 해결하기 위해 수많은 리팩터링과 useMemo, useCallback, React.memo 등의 최적화 작업을 반복적으로 해왔었죠.

근데 이제 React Compiler를 적용하면 이런 반복적인 성능 최적화 작업에서 벗어나서 기능 구현과 사용자 경험에 더 집중할 수 있을 것 같습니다. React 개발의 방향이 "최적화를 위한 React"에서 "더 나은 UX를 위한 React"로 바뀌어가고 있다는 점에서 개인적으로도 기대가 되네요.

목차