[React] JSX란?

JSX란?

React.createElement의 표현식이며 문자도 HTML도 아닌 JavaScript의 확장 문법이다.
JSX 문법으로 작성된 코드는 Babel이 순수한 JavaScript로 컴파일하여 사용한다.

=> Babel이란?

컴파일러로 언어 해석기, 특정 언어를 다른 프로그래밍 언어로 옮기는 프로그램이다.
html과 JavaScript 사이를 왔다갔다 할 수 있는 장점이 있다.
https://babeljs.io/ (JSX -> JavaScript)

CDN 추가

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel"></script>

JSX 쓰는 이유

• React.createElement vs JSX
  • 가독성 완승
• babel과 같은 컴파일 과정에서 문법적 오류를 인지하기 쉬움

React.createElement와 JSX 비교

ReactDOM.render(
  React.createElement(
    "div",
    null,
    React.createElement(
      "div",
      null,
      React.createElement("h1", null, "주제"),
      React.createElement(
        "ul",
        null,
        React.createElement("li", null, "React"),
        React.createElement("li", null, "Vue")
      )
    )
  ),
  document.querySelector("#root")
);

<script src="text/babel">
  ReactDOM.render(
  <div>
    <div>
      <h1>주제</h1>
      <ul>
        <li>React</li>
        <li>Vue</li>
      </ul>
    </div>
  </div>, document.querySelector("#root"));
</script>

JSX 문법

• 최상위 요소가 하나여야 한다.
• 최상위 요소를 리턴하는 경우, ()로 감싸야 한다.
• 자식들을 바로 랜더링하고 싶으면, <>자식들</>를 사용한다. => Fragment
• 자바스크립트 표현식을 사용하려면, {표현식}를 이용한다.
• if 문은 사용할 수 없다.
  • 삼항 연산자 혹은 &&를 사용한다.
• style을 이용해 인라인 스타일링이 가능하다.
• class대신 className을 사용해 class를 적용한다.
• 자식요소가 있으면, 꼭 닫아야하고, 자식 요소가 없으면 열면서 닫아야 한다.
  • <p>Hello</p>
  • <br />