React를 작성할 때 JavaScript 코드 내에서 HTML처럼 보이는 구문인 JSX를 자주 보게 됩니다. 하지만 이 코드가 브라우저에서 어떻게 실행되는지 궁금한 적이 있나요?

여기 마법이 있습니다: JSX는 유효한 JavaScript가 아닙니다! 브라우저는 이를 직접적으로 이해할 수 없습니다. 그 이면에는 Babel과 같은 도구가 개입하여 JSX를 일반 JavaScript로 변환(또는 "트랜파일")합니다.

과정:

1.JSX를 작성합니다 – HTML처럼 보이지만 React 구성 요소 내에 있습니다. 예를 들어:

const element = 
Hello, World!
;

2.Babel이 이를 변환합니다 – 빌드 프로세스 중에 Babel은 React.createElement:
를 사용하여 JSX를 순수 JavaScript로 변환합니다.

const element = React.createElement('h1', null, 'Hello, World!');

3.브라우저의 JavaScript – 마지막으로 이 표준 JavaScript는 브라우저가 실행하여 DOM을 동적으로 구축합니다.

바벨은 어떻게 작동하나요?

Babel은 다양한 브라우저와 환경에서 호환성을 보장하면서 최신 JavaScript 기능(React의 JSX 포함)을 사용할 수 있게 해주는 강력한 JavaScript 컴파일러입니다. Babel의 작동 방식은 다음과 같습니다.
1.구문 분석
Babel은 최신 JavaScript 또는 JSX 코드를 추상 구문 트리(AST)로 구문 분석하는 것부터 시작합니다. AST는 Babel(및 기타 도구)에 쉬운 방식으로 코드를 표현하는 상세한 트리형 구조입니다. 분석하고 조작합니다. 이 단계에서 Babel은 코드를 읽기는 하지만 아직 변경하지는 않습니다.
예를 들어 Babel은 다음 JSX 코드를 사용합니다.

const element = 
Hello, World!
;

그리고 이 코드의 구조를 나타내는 AST를 생성합니다.
2.변형 중
다음으로 Babel은 일련의 플러그인을 AST에 적용합니다. 각 플러그인은 자신이 정의한 규칙에 따라 AST의 특정 부분을 변환하는 일을 담당합니다. 이러한 변환에는 최신 JavaScript 구문(예: 화살표 함수 또는 async/await)을 이전 브라우저 호환 버전으로 변환하는 작업이 포함될 수 있습니다.
JSX의 경우 Babel은 다음을 변환합니다.

const element = 
Hello, World!
;

const element = React.createElement('h1', null, 'Hello, World!');

3. 코드 생성
모든 변환이 완료되면 Babel은 변환된 AST에서 JavaScript 코드를 생성합니다. 이는 브라우저나 Node.js가 실행할 수 있는 사람이 읽을 수 있는 출력이 생성되는 마지막 단계입니다.

마무리하겠습니다...

중요한 이유:

JSX를 사용하면 보다 직관적인 구성 요소 기반 UI 코드를 작성할 수 있지만 이를 실제로 구현하는 것은 Babel과 JavaScript 런타임입니다. 이 변환을 이해하면 문제를 더 잘 해결하고 더 최적화된 React 앱을 작성하는 데 도움이 됩니다.