[React Native] 리액트 네이티브 JSX

 

JSX = JavaScript + XML

 

JSX는 'JavaScript XML'의 줄임말로, XML에 자바 스크립트를 결합할 용도로 만든 구문입니다.

React.createElement 호출 코드를 좀 더 단순하고 간결하게 만들 수 있고,

이를 자바스크립트를 확장하는 방식으로 구현합니다. 

 

'자바스크립트를 확장한다'라는 의미는

표준 ESNext 자바 스크립트나 타입스크립트 문법에는 JSX 구문이 없다는 뜻입니다.

리액트 네이티브 프레임워크 개발사인 페이스북은 마치 JSX 구문이 표준 자바스크립트 문법에 포함된 것처럼 동작하도록 설계했습니다.

그리고 이런 설계를 할 수 있었던 이유는 ESNext 자바스크립트 컴파일러인 바벨(babel)이 플러스인 구조로 동작하기 때문입니다.

 

바벨은 ESNext 자바스크립트 코드를 만나면 수십 개의 플러그인이 차례로 동작하여 특정 ESNext 구문을 플러그인으로 보냅니다.

그러면 수십 개의 바벨 플러그인은 파이프라인 형태로 차례로 동작하면서 자신이 이해할 수 있는 구문만 컴파일(트랜스 파일)하여 ES5 자바스크립트 코드로 변환합니다.

 

바벨은 수십 개의 플러그을 일일이 설치하는 번거로움을 덜고자 이름에 'preset'이 포함된 몇 가지 패키지를 제공합니다. 리액트 네이티브 프로젝트에서는 metro-react-native-babel-preset이라는 패키지를 사용합니다.

 

페이스북은 JSX 구문을 컴파일하고자 @babel/plugin-transform-react-jsx라는 바벨 플러그인을 제공합니다.

바벨은 JSX 구문이 있는 ESNext 자바스크립트를 만나면

이 플러그인을 실행해 여러 개의 React.createElement 함수를 호출하는 평범한 자바스크립트로 변환합니다.

타입스크립트 컴파일러 tsc도 바벨의 이런 동작 방식과 비슷하게 JSX 코드를 만나면 

React.createElement 함수 호출 자바스크립트로 변환합니다.

 

리액트나 리액트 네이티브 코드 작성자는 복잡한 여러 번의 React.createElement 호출 코드를 작성하는 대신

훨씬 간결한 JSX 코드만 작성하면 되므로 빠르고 간결하게 코드를 작성할 수 있고 개발 생산성이 대폭 향상됩니다.

JSX 구문이 주는 이런 간편성은 리액트가 인기 있는 프론트엔드 자바스크립트가 되는데 큰 역할을 했습니다.

 

JSX구문이 있는 타입스크립트 코드는 확장자가 .tsx여야 합니다.

또한 JSX구문이 있는 코드는 import React from 'react' 과 같은 import문이 필요합니다.

 

 

 

 

 

 

 다음 내용은 위 책을 참고하여 작성하였습니다:)