리액트 컴파일러란?

리액트 컴파일러란?

리액트 컴파일러는 빌드 과정에서 사용되는 도구입니다. 리액트 19 프로젝트에서 리액트 도구 생태계가 제공하는 설정 옵션을 사용하여 명시적으로 설정해야 합니다.

 

리액트 컴파일러 주요 설정 요소

1. 바벨 플러그인: 컴파일 과정에서 코드 변환을 돕습니다.
2. ESLint 플러그인: 리액트 규칙 위반을 포착하고 보고하는 데 도움을 줍니다.
3. 컴파일러 코어: 코드 분석과 최적화를 수행하는 핵심 컴파일러 로직입니다. 바벨과 ESLint 플러그인 모두 코어 컴파일러 로직을 사용합니다.

리액트 컴파일 흐름

• 바벨 플러그인은 컴파일할 함수(컴포넌트 또는 훅)를 식별합니다. 나중에 컴파일 과정에 포함하거나 제외하는 방법을 배우기 위해 몇 가지 설정을 볼 것입니다. 플러그인은 각 함수에 대해 코어 컴파일러 로직을 호출하고 최종적으로 추상 구문 트리를 생성합니다.
• 그런 다음 컴파일러 코어는 바벨 AST를 IR 코드로 변환하고, 이를 분석하며, 규칙이 위반되지 않았는지 확인하기 위해 다양한 유효성 검사를 실행합니다.
• 다음으로, 사용하지 않는 죽은 코드를 제거하기 위해 여러 패스(pass) 처리 과정을 거쳐 최적화할 코드의 양을 줄이려고 시도합니다. 코드는 메모이제이션을 사용하여 추가로 최적화됩니다.
• 마지막으로, 코드 생성 단계에서 변환된 AST가 최적화된 자바스크립트 코드로 다시 변환됩니다.