[React] JSX : JavaScript XML

JSX란?

 JSX는 JavaScript를 확장한 문법이다. 

React에서 UI를 표현하기 위해 사용되며, 문법이 HTML과 매우 비슷해서 가독성이 좋고 작성이 편리하다.

 

 

 

 

---

JSX를 사용하는 이유

 

React에서는 UI를 React Element 객체로 표현한다.
이 React Element는 아래처럼 React.createElement로도 만들 수 있다.

 

기존 방식 (createElement)

const title = React.createElement(
    "h3",
    {
        className:'title',
        onMouseEnter:()=>console.log("title"),
    },
    "hello",
);

 

이 방식은 JavaScript만으로 작성할 수 있지만
구조가 복잡해지고 가독성이 떨어진다.

 

 

JSX 방식

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
    
    const title = (
        <h3 className="title" 
            onMouseEnter={()=> console.log("title")}
        >
            hello
        </h3>
     );
     
</script>

JSX는 HTML과 유사한 문법을 사용하기 때문에
UI 구조를 직관적으로 이해할 수 있다.

 

 

---

JSX의 정체

JSX는 새로운 문법처럼 보이지만,
실제로는 React.createElement를 더 쉽게 작성하기 위한 문법 설탕(syntax sugar) 이다.

아래 두 코드는 완전히 동일한 의미를 가진다.

 

// jsx
<h3 className="title">hello</h3>

// js
React.createElement("h3", { className: "title" }, "hello");

 

 

 

---

Babel이 필요한 이유

 

브라우저는 JSX 문법을 이해하지 못한다.

따라서 JSX 코드를 브라우저가 이해할 수 있는 JavaScript 코드로 변환하는 과정이 필요하다.
이 역할을 하는 도구가 Babel이다.

 

Babel의 역할

• JSX → React.createElement 형태의 JavaScript 코드로 변환
• 최신 JavaScript 문법을 구형 브라우저에서도 동작하도록 변환

즉, Babel은 JSX로 작성된 코드를 브라우저가 이해할 수 있는 JavaScript로 변환한다.

 

Babel