JSX란?

Javascript XML의 약자
JS 코드 내부에 HTML 구문을 포함시켜 React 엘리먼트를 정의하는
자바스크립트 확장 문법이다.

장점

명령형 -> 선언형으로 진화
1. 자바스크립트의 createElement 개념을 간소화
2. 깔끔하고 가독성이 좋음

But..!

브라우저는 JSX를 해석할 수 없다.
따라서 JSX를 브라우저가 해석 가능하도록 변환해주어야 한다.
이때 필요한 도구가 바벨(Babel)이다.

바벨이란 이름이 어디서 나왔는지 개인적으로 추측해봤는데,
아마 성서나 성경에 나오는 '바벨탑'이 기원인 것 같다.
이 탑에는 신에게 대항하기 위해 높은 탑을 쌓아올리는 인간들을 막기 위해
신이 사람들의 언어를 각자 다 바꿔버려서
더 이상 공사를 이어나가지 못하도록 했다는 비하인드 스토리가 있다.
아마 복잡한 ES6 문법을 브라우저가 이해하기 쉬운 기존의 ES5 문법으로 바꿔준다는 이유로 바벨탑의 이름을 따서 짓지 않았나 싶다.

바벨(Babel)

대부분의 프로그래밍 언어는 소스 코드를 자체 컴파일하지만,
자바스크립트는 인터프리터 언어여서 브라우저가 소스 코드를 해석해줘야 한다.

근데 그 어떤 브라우저도 JSX 문법을 지원하지 않기 때문에
브라우저가 해석할 수 있게 소스 코드를 바벨로 변환(컴파일)해줘야 한다.

[ 바벨 사용법 (일반 JS) ]

바벨 CDN을 import하고
script의 type을 'text/babel'로 지정한다.

=> 이렇게 하면 클라이언트가 script 안의 코드를 실행하기 전에 바벨이 컴파일을 수행한다.