JSX

JSX(A syntax extension JavaScript) = JavaScript + xml/html

예시
const element = <h1>Hello, world!</h1>;

JSX의 역할
html/xml의 코드를 자바스크립트 코드로 변환하는 역할

React.createElement()의 결과로 아래와 같은 객체가 생성됨

const element = {
	type: 'h1',
    props: {
    	className: 'greeting',
        children: 'Hello, world!'
    }
}

element의 유형

const element = {
	type,
    [props],
    [...chilren]
}

리액트에서 JSX를 사용하는 것이 필수는 아님
하지만 JSX를 사용하면 장점들이 많기 떄문에 편리함

JSX의 장점
1. 간결한 코드
2. 가독성 향상 - 유지보수면에서도 좋음
3. Injection Attacks 방어 - JSX 코드에서 명시적으로 선언된 문자만 들어갈 수 있음

JSX 사용법
html 코드를 쓰다가 자바스크립트 코드를 쓰고 싶다면 {중괄호}를 사용한다

작은따옴표 & 큰따옴표가 아니라 `이다(물결표)