JSX란?

리액트에서 HTML 문법을 사용할 수 있게 해주는 자바스크립트의 확장 문법

• HTML 요소에 class 키워드 대신 className 키워드를 사용해야 함
• 에서 사용하는 for 속성 대신 htmlFor이라는 속성을 사용해야 함
• HTML 속성들은 전부 camelCase로 표기 해줘야 함

!! 반드시 하나의 태그로 감싸줘야 함

Fragment

JSX 요소는 반드시 하나의 태그로 감싸 return 해야 하는데, 를 사용하면 불필요한 요소를 줄이고 최상단 태그의 역할을 할 수 있음

  import { Fragment } from "react";

위 코드와 함께 사용해야 함!

JSX에서 자바스크립트 표현식 사용하려면 {} 중괄호 안에 작성해주기 (표현식만 가능하기 때문에 if문 for문, 함수 선언 같은은 문장은 불가능)

    const root = ReactDOM.createRoot(document.getElementById("root"));
  
	function click() {
  		alert('클릭되었습니다!');
  	}
  
  	root.render(
    <Fragment>
      <button onclick={click}>Click me</button>
  	</Fragment>
  	)