JSX & babel

📌 babel

JSX 문법으로 작성된 코드를 순수한 JavaScript로 컴파일하여 사용

https://babeljs.io/setup#installation

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

<script type="text/babel">
    console.log(React);
    console.log(ReactDOM);

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

JSX 문법

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