JSX를 왜 사용해야 하나요? (feat. Babel)

JSX란?

JSX (JavaScript + xml)

JavaScript의 확장 문법으로, JavaScript내에서 HTML이 사용 가능하다.

---

본론으로 들어가, 왜 우리는 js가 아닌 jsx를 사용하며, 이를 추천할까?

위 내용은 React공식문서에서 퍼온 내용이다.

실제로, jsx를 이용한 코드를 작성해보면, 코드가 직관적으로 표현된다는 것을 알 수 있다.
또한, 개발자가 마크업 코드에 익숙하다면, 그 사실으로 jsx를 통해 component구성에 쉽게 적응을 할 수 있을 것이다.

const Title = (
            <h3 id="title" onMouseEnter={ () => console.log("mouse.enter")}> 
                hello i'm jongin
            </h3>
            );

위 코드는 jsx 문법으로 작성 된 코드이다.

---

Babel이란?

Babel이란 JavaScript 컴파일러이며 TypeScript, JSX를 지원한다.

갑자기 Babel? 이라 생각 할 수 있지만, 짝꿍과 같은 역할을 한다. (사실 나만 갑자기라 생각 할 듯)

JSX는 React(Facebook)에서 만든 HTML과 비슷하지만, 동일하지 않은 언어이기에, 이를 변환하지 않고서 브라우저가 읽어올 수 없다.
따라서 Babel이 JSX언어를 지원하기 때문에, 이 둘은 짝꿍과 같은 역할을 한다.