728x90
리액트 컴파일러란?
리액트 컴파일러는 빌드 과정에서 사용되는 도구입니다. 리액트 19 프로젝트에서 리액트 도구 생태계가 제공하는 설정 옵션을 사용하여 명시적으로 설정해야 합니다.
리액트 컴파일러 주요 설정 요소
- 바벨 플러그인: 컴파일 과정에서 코드 변환을 돕습니다.
- ESLint 플러그인: 리액트 규칙 위반을 포착하고 보고하는 데 도움을 줍니다.
- 컴파일러 코어: 코드 분석과 최적화를 수행하는 핵심 컴파일러 로직입니다. 바벨과 ESLint 플러그인 모두 코어 컴파일러 로직을 사용합니다.
리액트 컴파일 흐름
- 바벨 플러그인은 컴파일할 함수(컴포넌트 또는 훅)를 식별합니다. 나중에 컴파일 과정에 포함하거나 제외하는 방법을 배우기 위해 몇 가지 설정을 볼 것입니다. 플러그인은 각 함수에 대해 코어 컴파일러 로직을 호출하고 최종적으로 추상 구문 트리를 생성합니다.
- 그런 다음 컴파일러 코어는 바벨 AST를 IR 코드로 변환하고, 이를 분석하며, 규칙이 위반되지 않았는지 확인하기 위해 다양한 유효성 검사를 실행합니다.
- 다음으로, 사용하지 않는 죽은 코드를 제거하기 위해 여러 패스(pass) 처리 과정을 거쳐 최적화할 코드의 양을 줄이려고 시도합니다. 코드는 메모이제이션을 사용하여 추가로 최적화됩니다.
- 마지막으로, 코드 생성 단계에서 변환된 AST가 최적화된 자바스크립트 코드로 다시 변환됩니다.
(번역) 리액트 컴파일러 사용법 — 완벽 가이드
원문: https://www.freecodecamp.org/news/react-compiler-complete-guide-react-19/
junghan92.medium.com
728x90