설치

이 가이드는 React 애플리케이션에 React Compiler를 설치하고 구성하는 방법을 안내합니다.

필수 조건

React Compiler는 React 19에서 가장 잘 작동하도록 설계되었지만, React 17 및 18도 지원합니다. 자세한 내용은React 버전 호환성을 참조하세요.

설치

React Compiler를devDependency로 설치하세요:

npm install -D babel-plugin-react-compiler@latest

Yarn을 사용하는 경우:

yarn add -D babel-plugin-react-compiler@latest

pnpm을 사용하는 경우:

pnpm install -D babel-plugin-react-compiler@latest

기본 설정

React Compiler는 기본적으로 구성 없이 작동하도록 설계되었습니다. 그러나 특별한 상황(예: React 19 미만 버전을 대상으로 하는 경우)에서 구성이 필요한 경우컴파일러 옵션 참조를 참조하세요.

설정 과정은 사용하는 빌드 도구에 따라 다릅니다. React Compiler에는 빌드 파이프라인과 통합되는 Babel 플러그인이 포함되어 있습니다.

Babel

다음을 생성하거나 업데이트하세요babel.config.js:

Vite

Vite를 사용하는 경우, 플러그인을 vite-plugin-react에 추가할 수 있습니다:

또는 Vite용 별도의 Babel 플러그인을 선호하는 경우:

npm install -D vite-plugin-babel

Next.js

자세한 내용은js 문서를 참조하세요.

React Router

다음을 설치하고vite-plugin-babel, 컴파일러의 Babel 플러그인을 추가하세요:

npm install vite-plugin-babel

Webpack

커뮤니티 웹팩 로더는여기에서 사용할 수 있습니다.

Expo

Expo 앱에서 React Compiler를 활성화하고 사용하는 방법은Expo 문서를 참조하세요.

Metro (React Native)

React Native는 Metro를 통해 Babel을 사용하므로, 설치 지침은Babel 사용 섹션을 참조하세요.

Rspack

Rspack 앱에서 React Compiler를 활성화하고 사용하는 방법은Rspack 문서를 참조하세요.

Rsbuild

Rsbuild 앱에서 React Compiler를 활성화하고 사용하는 방법은Rsbuild 문서를 참조하세요.

ESLint 통합

React Compiler에는 최적화할 수 없는 코드를 식별하는 데 도움이 되는 ESLint 규칙이 포함되어 있습니다. ESLint 규칙이 오류를 보고하면 컴파일러가 해당 특정 컴포넌트나 훅의 최적화를 건너뛴다는 의미입니다. 이는 안전합니다: 컴파일러는 코드베이스의 다른 부분은 계속 최적화합니다. 모든 위반 사항을 즉시 수정할 필요는 없습니다. 자신의 속도에 맞춰 처리하여 최적화된 컴포넌트 수를 점진적으로 늘려가세요.

ESLint 플러그인을 설치하세요:

npm install -D eslint-plugin-react-hooks@latest

아직 eslint-plugin-react-hooks를 구성하지 않았다면,README의 설치 지침을 따르세요. 컴파일러 규칙은recommended-latest프리셋에서 사용할 수 있습니다.

ESLint 규칙은 다음과 같은 작업을 수행합니다:

• React의 규칙 위반 사항 식별
• 최적화할 수 없는 컴포넌트 표시
• 문제 해결에 도움이 되는 오류 메시지 제공

설정 확인

설치 후 React Compiler가 올바르게 작동하는지 확인하세요.

React DevTools 확인

React Compiler에 의해 최적화된 컴포넌트는 React DevTools에서 "Memo ✨" 배지를 표시합니다:

1. 브라우저 확장 프로그램React Developer Tools 설치
2. 개발 모드에서 앱 열기
3. React DevTools 열기
4. 컴포넌트 이름 옆에 있는 ✨ 이모지 찾기

컴파일러가 작동 중이라면:

• 컴포넌트가 React DevTools에서 "Memo ✨" 배지를 표시합니다
• 비용이 많이 드는 계산이 자동으로 메모이제이션됩니다
• 수동으로useMemo를 사용할 필요가 없습니다

빌드 출력 확인

빌드 출력을 확인하여 컴파일러가 실행 중인지 확인할 수도 있습니다. 컴파일된 코드에는 컴파일러가 자동으로 추가하는 자동 메모이제이션 로직이 포함됩니다.

문제 해결

특정 컴포넌트 제외하기

컴포넌트가 컴파일 후 문제를 일으키는 경우, "use no memo"지시자를 사용하여 일시적으로 제외할 수 있습니다:

이 지시자는 컴파일러에게 이 특정 컴포넌트의 최적화를 건너뛰도록 지시합니다. 근본적인 문제를 해결한 후에는 지시자를 제거해야 합니다.

더 많은 문제 해결 도움말은디버깅 가이드를 참조하세요.

다음 단계

이제 React Compiler가 설치되었으니, 다음에 대해 자세히 알아보세요:

• React 버전 호환성(React 17 및 18용)
• 구성 옵션으로 컴파일러 사용자 정의
• 점진적 도입 전략기존 코드베이스용
• 디버깅 기법 문제 해결용
• 라이브러리 컴파일 가이드React 라이브러리 컴파일용