JSX

JSX(Javascript *XML)는 Javascript를 확장한 문법으로 Javascript파일을 HTML과 비슷하게 마크업을 작성할 수 있도록 도와준다.

# JSX 동작원리

아래와 같이 JSX를 작성하면

<MyButton color="blue" shadowSize={2}>
    Click Me
</MyButton>

*바벨이 아래와 같이 변환해준다:

React.createElement(
    MyButton,
    {color:'blue', shadowSize: 2},
    'Click Me'
)

createElement는 React 엘리먼트를 생성해주는 함수이므로 변환된 코드는 React 엘리먼트가 된다.

JSX가 컴파일링이 되는 결과물을 보고싶으면 여기 온라인 babel 컴파일러 들어가보면 된다.

babel: https://moonformeli.tistory.com/28
XML: https://80000coding.oopy.io/e900f62f-3f47-454e-94a7-d4bc08b19219