[React] 2장. JSX(JavaScript XML)란? 그리고 장점은?

📍 JSX(JavaScript XML)란?
JSX는 자바스크립트의 확장 문법으로 XML(eXtensible Markup Language)과 매우 비슷하게 생겼다. 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용해 일반 자바스크립트 형태의 코드로 변환된다.

• 예시

// jsx
function App() {
  return (
    <div>
      Hello <b>react</b>
    </div>
  );
}

↓↑
변환
↓↑

// javaScript
function App() {
return React.createElement("div", null, "Hello ", React.createElement("b", null, "react"));
}

매번 React.createElement 함수를 사용해야 한다면 불편할 수밖에 없음! JSX를 사용하면 편하게 UI를 렌더링할 수 있음.

(+) XML(eXtensible Markup Language)

데이터를 구조화해서 저장하거나 전송할 때 사용되는 마크업 언어로 HTML처럼 태그(< >)로 데이터를 감싸는 구조를 지님.

// xml
<person>
    <name>John Doe</name>
    <age>30</age>
    <email>johndoe@example.com</email>
</person>

// jsx
function App() {
    return (
        <div>
            <h1>Hello, World!</h1>
            <p>This is a JSX example.</p>
        </div>
    );
}

태그 문법과 계층적 구조를 활용해 구조화된 표현을 한다는 점에서 JSX가 XML과 비슷하다고 할 수 있음!

(+) 번들링과 바벨이란?

- 번들링
: 사용자에게 웹 애플리케이션을 제공하기 위해 여러 코드와 프로그램들을 묶는 행위

- 바벨
: 자바스크립트 컴파일러로, 최신 자바스크립트를 구 버전으로 변환하여 호환성을 확보하는 역할을 해 줌.

---

👉 JSX의 장점은?

1) 직관적이고 익숙하다
javaScript 코드와 JSX 코드를 비교해보면, JSX가 가독성이 높고, 작성하기 쉽게 느껴진다. JSX를 사용하는 주된 이유!

2) 더욱 높은 활용도
JSX에서는 div, span 같은 HTML 태그를 사용할 수 있고, 앞으로 만들 컴포넌트도 JSX 안에서 작성할 수 있다.