[React] JSX에 대해서

📌 JSX

React.createElement의 표현식이며 문자도 html도 아닌 javascript의 확장 문법이다.

JSX 문법으로 작성된 코드는 Babel이 순수한 javascript로 컴파일하여 사용한다.

JSX 소개 – React

 

📌 Babel

컴파일러로 언어 해석기, 특정 언어를 다른 프로그래밍 언어로 옮기는 프로그램이다.

html과 javascript 사이를 왔다갔다 할 수 있는 장점이 있다. (JSX => Javascript)

Babel · The compiler for next generation JavaScript

CDN 추가

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

 

📌 JSX를 쓰는 이유

1. React.createElement vs JSX 가독성 완승

2. Babel과 같은 컴파일 과정에서 문법적 오류를 인지하기 쉬움

 

📌 React.createElement 와 JSX 비교

React.createElement

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")
);

 

JSX

<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 문법

- 최상위 요소가 하나여야 한다.

- 최상위 요소를 리턴하는 경우, ()로 감싸야 한다.

- 자식들을 바로 랜더링하고 싶으면, <React.Fragment>자식들</React.Fragment>를 사용한다.

  - Fragments를 선언하는 더 짧고 새로운 문법으로는 <> 자식들</> 빈 태그이다.

- 자바스크립트 표현식을 사용하려면, {표현식}를 이용한다.

- if 문은 사용할 수 없다. 삼항 연산자 혹은 &&를 사용한다.

- style을 이용해 인라인 스타일링이 가능하다.

- class대신 className을 사용해 class를 적용한다.

- 자식요소가 있으면, 꼭 닫아야 하고, 자식 요소가 없으면 열면서 닫아야 한다.