JSX

Seulyi Yoo·2022년 7월 4일
0

React

목록 보기
3/12
post-thumbnail

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를 적용
  • 자식요소가 있으면, 꼭 닫아야 하고, 없다면 열면서 닫아야 함
    • 내용


profile
성장하는 개발자 유슬이 입니다!

0개의 댓글