🍄템플릿 언어

엘리먼트를 생성할 때 document.createElement()함수를 사용한다. 트리 형태의 돔에 맞게 엘리먼트를 구성하려면 엘리먼트 간의 부모-자식 관계를 만들어야 한다.

const h1 = document.createElement("h1")
const header = document.createElement("header")
header.appendChild(h1)

위 두 엘리먼트는 부모-자식 관계다.

엘리먼트 h1(자식)을 만들고 이걸 자식으로 갖을 header(부모)엘리먼트도 만든다.
appendChild()함수를 이용해서 h1을 header의 자식 엘리먼트로 만들었다.

-- EX --

트리 형태의 웹 문서 구조상 코드는 늘어날 수밖에 없다.
UI를 나타내는 코드는 읽기 어렵다는 특징이 있다.
이런 문제점의 대안으로 나오는 것이 템플릿 언어이다.
핸들바, pug가 대표적이고 앵귤러와 vue.js도 템플릿 기능을 지원한다.
-> 리액트는 템플릿언어를 지원하지 않는다.
UI만 담당하는 아주 작은 라이브러리이기 때문이다.

리액트는 createElement()로 자식 요소를 추가할 수 있지만 쉬운 일은 아니다.

const h1 = React.createElement("h1", null, "Hello world")
const header = React.createElement("header", null, h1)

-> 이러한 한계점 때문에 리액트는 JSX라는 자바스크립트 확장 문법을 사용한다.

🥕JSX란?

JSX는 자바스크립트의 확장 문법이다.
UI 다루는 코드의 가독성을 높이기 위해 고안된 문법이다.

<h1>Hello world</h1> // React.createElement('h1', null, 'Hello world')
<header>
	<h1>Hello world</h1>
</header>