React Compiler ?

React Complier는 build time에 소스 코드를 훨씬 **최적화(useMemo(), useCallback(), React.Memo 등을 Complier가 알아서 처리)**하여 처리를 도와줍니다.

React 19에서는 지금까지 개발자가 스스로 해왔던 것들을 리액트 자체에서 컨트롤 해줘서 더 안정감이 있고 소스코드도 깔끔하게 만들 수 있게 하는 기술들이 도입 되었으며, 그 이유는 React Complier 덕분입니다.

React Complier 사용하기

Compiler 사용 가능 여부 확인

컴파일 가능한 컴포넌트를 확인할 수 있습니다.

npx react-compiler-healthcheck@experimental

react-complier eslint 설치하기

npm install eslint-plugin-react-compiler@experimental

eslint config에 추가하기

module.exports = {
	plugins: [
	'eslint-plugin-react-compiler',
	],
	rules: {
	  'react-complier/react-compiler': 'error'
	}
}

babel-plugin-react-compiler 설치하기