JSX

1. 개념

: 자바스크립트의 확장 문법

어떻게 확장했는가? Javascript + XML/HTML

// JSX 코드
const element = <h1>Hello world<h1>

2. 역할

실제로 JSX로 작성해도 결과는 javascript로 나옴

// JSX를 사용한 코드
const element = (
	<h1 className="greeting">
		Hello world
	<h1>
)

// JSX를 사용하지 않은 코드
const element = React.createElement(
	'hi'.
	{className: 'greeting'},
	'Hello world'
)

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

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

리액트에서 JSX를 사용하는것이 필수는 아님!

다만, 사용하면 장점이 많아 권장함

3. 장점

// JSX
<div>Hello, {name}<div>

// JSX를 사용하지 않은 코드
React.createElement('div', null, `Hello. ${name}`);

1) 코드가 간결해짐

2) 가독성이 높아짐