React 19의 컴파일러를 통한 라이브러리 제공 가이드

시작하기

필자는 FE 생태계에서 모듈화에 관심이 많은 사람이다.

React 19가 출시되어서 공식문서를 살펴보고 있는데 흥미가 가는 항목이 있어서 이 부분을 소개하고자 한다.

공식 문서의 내용에 따르면 라이브러리 메인테이너들에게 리액트 컴파일러를 통해 어떻게 소비자들에게 코드를 공급할 수 있는지를 다룬다.

이 문서에서 다루는 첫번째 단락에 대한 내용이다.

다음과 같은 이점을 소개하고 있다.

당신의 라이브러리 코드를 NPM에 배포하기 전, 컴파일된 코드를 배포할 수 있습니다. 이는 몇가지 이점을 가지고 있습니다.
- 모든 라이브러리 사용자들에게 개선된 성능을 제공합니다. 사용자들이 리액트 컴파일러를 사용하고 있지 않아도요.
- 모든 라이브러리 사용자들이 별도의 설정을 하지 않아도 됩니다. 최적화는 라이브러리 빌드 시점에 진행되니까요.
- 모든 라이브러리 사용자들이 동일하게 최적화된 코드를 사용하게 됩니다.

이 내용을 봤을 때 리액트 팀은 라이브러리 개발자들이 NPM 생태계에 소스코드를 컴파일하여 배포하도록 권장하고 있다는 생각이 들었다.

babel-plugin-react-compiler를 통해 라이브러리 코드를 최적화된 형태로 트랜스파일 할 수 있는 플러그인을 가이드하고 있다.

결과적으로 플러그인 설치만으로 리액트 컴파일러를 활용할 수 있게 해주며 라이브러리 메인테이너가 작성한 코드를 좀더 최적화된 성능으로 동작하게 도와줄 것이다.

트랜스파일러를 Babel로 한정시키는 부분이 있기 때문에 라이브러리 메인테이너가 프로젝트상에서 다른 트랜스파일러를 적용하고 있는 상황이라면 조금 곤란할 수 있을 것 같다.

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

babel.config.js

1// babel.config.js
2module.exports = {
3  plugins: ['babel-plugin-react-compiler'],
4};

기존의 라이브러리가 React 19 버전 미만에서 동작하고 있는 경우를 가정한다.

react-compiler-runtime 패키지를 활용한다.

1$ npm install react-compiler-runtime@latest

이후 package.json 파일의 peerDependencies 필드를 React 17 ~ 19 까지로 설정한다.

라이브러리의 최소 React 지원 버전은 17로 설정되는 것을 의미한다.

package.json

1"peerDependencies": {
2  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
3  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
4}

컴파일된 라이브러리 코드가 잘 동작하는지 확인해보라는 것이다.

만약 컴파일러 도입 이후로 잘 동작하지 않는다면 다음과 같은 액션을 수행한다.

React 19의 컴파일러를 통해 라이브러리를 컴파일하여 NPM 생태계에 배포하는 것을 제안하는 문서의 내용을 소개했다.

최신의 React 버전까지 지원하며 리액트 컴파일러를 통해 최적화된 성능을 제공하는 라이브러리 개발을 예정하고 있다면 다음의 요소들을 고려해야 할 것 같다.

ON THIS PAGE