JSX 란 무엇입니까?

JSX는 XML/HTML과 같은 텍스트와 JavaScript/React 코드의 공존을 허용하도록 ECMAScript를 확장하는 React 관련 XML/HTML과 같은 구문입니다. 전처리기(예: Babel과 같은 변환기)는 이 구문을 사용하여 JavaScript 파일에 있는 HTML과 유사한 콘텐츠를 JavaScript 엔진이 구문 분석할 표준 JavaScript 개체로 변환합니다.
JSX를 사용하면 JavaScript 코드와 동일한 파일에 컴팩트 HTML/XML과 유사한 구조(예: DOM과 같은 트리 구조)를 작성할 수 있으며 Babel은 나중에 이러한 표현식을 JavaScript 코드로 변환합니다. 과거처럼 JavaScript를 HTML에 넣는 대신 JSX를 사용하면 HTML을 JavaScript에 넣을 수 있습니다.
JSX를 사용하여 다음 JSX/JavaScript 코드를 작성할 수 있습니다.

var nav = (
    <ul id="nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Clients</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
);

그리고 Babel은 이것을 다음과 같이 변환할 것입니다:

var nav = React.createElement(
   "ul",
   { id: "nav" },
   React.createElement(
      "li",
      null,
      React.createElement(
         "a",
         { href: "#" },
         "Home"
      )
   ),
   React.createElement(
      "li",
      null,
      React.createElement(
         "a",
         { href: "#" },
         "About"
      )
   ),
   React.createElement(
      "li",
      null,
      React.createElement(
         "a",
         { href: "#" },
         "Clients"
      )
   ),
   React.createElement(
      "li",
      null,
      React.createElement(
         "a",
         { href: "#" },
         "Contact Us"
      )
   )
);

JSX는 React.createElement() 호출의 약어로 생각할 수 있습니다.
동일한 파일에 HTML과 JavaScript를 혼합한다는 아이디어는 다소 논쟁의 여지가 있는 주제일 수 있습니다. 논쟁을 무시하십시오. 도움이 되셨다면 사용하세요. 그렇지 않은 경우 React 노드를 생성하는 데 필요한 React 코드를 작성하십시오. 당신의 선택. 내 생각에는 JSX가 템플릿 언어를 배우거나 JavaScript를 떠날 필요가 없는 속성으로 트리 구조를 정의하기 위한 간결하고 친숙한 구문을 제공한다는 것입니다. 둘 다 대규모 애플리케이션을 구축할 때 승리할 수 있습니다.