React - JSX

• JSX 문법은 Babel compiler를 통해 순수한 JavaScript로 컴파일 되어 사용 가능

// JSX
<h1>hello</h1>

// Babel Compiler
React.createElement("h1", null, "hello");

• JSX 사용 이유
  • 가독성
  • babel 과 같은 컴파일 과정에서 문법적 오류를 인지하기 쉬움
    
    
• JSX 문법
  • 최상위 요소는 하나여야 함
  • 자식들을 바로 렌더링 하고 싶으면, <> </> 사용 ( Fragment )
  • 자바스크립트 표현식을 사용하려면, {표현식}
    • if문은 사용 불가
    • 삼항 연산자 또는 && 사용
      
      
  • style을 이용해 인라인 스타일링 가능
  • class 대신 className을 사용
  • 자식요소 태그는 꼭 닫아야 함