React/Basic

React - JSX

고코모옹 2021. 6. 3. 22:07
  • JSX 문법은 Babel compiler를 통해 순수한 JavaScript로 컴파일 되어 사용 가능
// JSX
<h1>hello</h1>

// Babel Compiler
React.createElement("h1", null, "hello");
  • JSX 사용 이유
    • 가독성
    • babel 과 같은 컴파일 과정에서 문법적 오류를 인지하기 쉬움

  • JSX 문법
    • 최상위 요소는 하나여야 함
    • 자식들을 바로 렌더링 하고 싶으면, <> </> 사용 ( Fragment )
    • 자바스크립트 표현식을 사용하려면, {표현식}
      • if문은 사용 불가
      • 삼항 연산자 또는 && 사용

    • style을 이용해 인라인 스타일링 가능
    • class 대신 className을 사용
    • 자식요소 태그는 꼭 닫아야 함