점진적 도입

React Compiler는 점진적으로 도입할 수 있어, 코드베이스의 특정 부분부터 먼저 시도해 볼 수 있습니다. 이 가이드는 기존 프로젝트에서 컴파일러를 점차적으로 롤아웃하는 방법을 보여줍니다.

왜 점진적 도입인가요?

React Compiler는 전체 코드베이스를 자동으로 최적화하도록 설계되었지만, 한 번에 모두 도입할 필요는 없습니다. 점진적 도입은 롤아웃 프로세스를 제어할 수 있게 해주어, 나머지 부분으로 확장하기 전에 앱의 작은 부분에서 컴파일러를 테스트할 수 있습니다.

작게 시작하면 컴파일러의 최적화에 대한 신뢰를 쌓는 데 도움이 됩니다. 컴파일된 코드로 앱이 올바르게 동작하는지 확인하고, 성능 향상을 측정하며, 코드베이스에 특정한 엣지 케이스를 식별할 수 있습니다. 이 접근 방식은 안정성이 중요한 프로덕션 애플리케이션에서 특히 가치가 있습니다.

점진적 도입은 또한 컴파일러가 발견할 수 있는 React 규칙 위반 사항을 해결하기 쉽게 만듭니다. 전체 코드베이스의 위반 사항을 한 번에 수정하는 대신, 컴파일러 적용 범위를 확장하면서 체계적으로 해결할 수 있습니다. 이렇게 하면 마이그레이션을 관리 가능하게 유지하고 버그 도입 위험을 줄일 수 있습니다.

코드의 어떤 부분이 컴파일되는지 제어함으로써, 컴파일러 최적화의 실제 영향을 측정하기 위한 A/B 테스트를 실행할 수도 있습니다. 이 데이터는 전체 도입에 대한 정보에 기반한 결정을 내리는 데 도움이 되며, 팀에게 그 가치를 입증합니다.

점진적 도입 접근 방식

React Compiler를 점진적으로 도입하는 주요 접근 방식은 세 가지가 있습니다:

1. Babel 오버라이드- 특정 디렉토리에 컴파일러 적용
2. "use memo"를 통한 옵트인- 명시적으로 옵트인한 컴포넌트만 컴파일
3. 런타임 게이팅- 기능 플래그로 컴파일 제어

모든 접근 방식을 통해 전체 롤아웃 전에 애플리케이션의 특정 부분에서 컴파일러를 테스트할 수 있습니다.

Babel 오버라이드를 통한 디렉토리 기반 도입

Babel의overrides옵션을 사용하면 코드베이스의 다른 부분에 다른 플러그인을 적용할 수 있습니다. 이는 React Compiler를 디렉토리별로 점진적으로 도입하는 데 이상적입니다.

기본 구성

특정 디렉토리에 컴파일러를 적용하는 것으로 시작하세요:

적용 범위 확장

신뢰가 쌓이면 더 많은 디렉토리를 추가하세요:

컴파일러 옵션과 함께

오버라이드별로 컴파일러 옵션을 구성할 수도 있습니다:

"use memo"를 통한 옵트인 모드

최대한의 제어를 위해compilationMode: 'annotation'를 사용하여 "use memo"지시어로 명시적으로 옵트인한 컴포넌트와 훅만 컴파일할 수 있습니다.

어노테이션 모드 구성

지시어 사용

컴파일하려는 함수의 시작 부분에"use memo"를 추가하세요:

을 사용할 때는 다음을 수행해야 합니다:

• 최적화하려는 모든 컴포넌트에"use memo"를 추가합니다
• 모든 커스텀 훅에"use memo"를 추가합니다
• 새 컴포넌트에도 추가하는 것을 잊지 마세요

이렇게 하면 컴파일러의 영향을 평가하는 동안 어떤 컴포넌트가 컴파일되는지 정밀하게 제어할 수 있습니다.

게이팅을 통한 런타임 기능 플래그

옵션을 사용하면 기능 플래그를 통해 런타임에 컴파일을 제어할 수 있습니다

게이팅 작동 방식

컴파일러는 최적화된 코드를 런타임 검사로 감쌉니다. 게이트가 를 반환하면 최적화된 버전이 실행되고, 그렇지 않으면 원본 코드가 실행됩니다.

게이팅 구성

기능 플래그 구현

게이팅 함수를 내보내는 모듈을 생성하세요:

도입 문제 해결

도입 중 문제가 발생하면:

1. 문제가 있는 컴포넌트를 일시적으로 제외하려면 를 사용하세요
2. 일반적인 문제에 대한 를 확인하세요
3. ESLint 플러그인이 식별한 React 규칙 위반을 수정하세요
4. 보다 점진적인 도입을 위해 사용을 고려하세요

다음 단계

• 더 많은 옵션에 대한 를 읽어보세요
• 에 대해 알아보세요
• 모든 컴파일러 옵션에 대한 를 확인하세요