🤷🏻‍♀️ JSX는 무엇인가?

JSX는 자바스크립트의 구문 확장이이며 React와 함께 사용하도록 작성되었다. HTML코드와 닮은것이 특징이다.
하지만 엄연히 JSX는 HTML이 아닌 Javascript 이다.
자바스크립트 파일에 JSX 코드가 포함되어 있으면 해당 파일을 컴파일해야 한다.
파일이 웹 브라우저에 도달하기 전에 JSX 컴파일러가 어떤 JSX도 일반 자바스크립트로 변환한다는 것을 의미한다.

const title = <h1>Hello World!</h1>;

✨ 클로징 태그는 필수!

JSX는 무조건 클로징태그가 필요하다.

<div></div>
<img src="./image.jpg" alt="사진" />

✨ 2개 이상의 태그 사용은?

태그로 한번 더 감싸주어야 한다.

<div>
	<h1>안녕하세요</h1>
	<p>반갑습니다</p>
</div>

✨ 자바스크립트 사용은?

자바스크립트를 사용할때에는 {} 안에 넣어준다.

<button onClick={click}>클릭해주세요</button>

✨ 스타일은 객체로!

const style = {
      color: "black",
      backgroundColor: "blue",
      fontFamily: "Arial"
}

<p style={style}>Hello World!</p>

✨ JSX에서의 className

JSX에서는 class 대신 className을 써준다.

<div className="wrap">Hello World!</div>

✨ 주석은?

{/**/}

✨ 라벨링은?

label에서의 for 속성만은 JSX에서 htmlFor로 사용한다.

<label htmlFor="">라벨태그</label>