WXT에서 React Compiler를 활성화하는 설정 방법

WXT에서 React Compiler를 활성화하면 컴포넌트가 자동으로 최적화된다.

수동으로 useCallback 이나 useMemo 를 넣을 필요가 크게 줄어들어 코드가 더 단순해진다.

설치

먼저 babel-plugin-react-compiler 패키지를 설치한다.

pnpm을 쓰는 경우:

pnpm add -D babel-plugin-react-compiler

Bun을 쓰는 경우:

bun add -D babel-plugin-react-compiler

WXT 설정 파일 수정

wxt.config.ts 에 React Compiler용 Babel 플러그인 설정을 추가한다.

export default defineConfig({
  react: {
    vite: {
      babel: {
        plugins: [["babel-plugin-react-compiler"]],
      }
    }
  }
})

이렇게 하면 React Compiler가 활성화되고, 빌드 시 컴포넌트가 자동으로 최적화된다.

요약

WXT에서 React Compiler를 쓰려면 babel-plugin-react-compiler 를 설치하고 설정의 Babel 플러그인 목록에 추가하면 된다.

수동 최적화 부담이 줄고 코드 가독성이 좋아진다.