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

babel

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

// 4. 복잡한 리액트 엘리먼트 모임
  
// 우리가 작성한 어떤 코드를 => 순수하게 실행할 수 있는 자바스크립트
// babel

ReactDOM.render(
  <div>
    <div>
      <h1>title</h1>
      <ul>
        <li>React</li>
        <li>Vue</li>
      </ul>
    </div>
  </div>,
  document.querySelector('#root')
);

왜 JSX 를 쓸까?

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

JSX문법

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

  • 내용

  •