JSX

• JSX는 자바스크립트 표준 (ECMAScript)이 아니다.
• JSX는 페이스북이 임의로 만든 새로운 문법이기 때문에 JSX는 반드시 트랜스파일러 (babel)를 거쳐야 비로소 자바스크립트 런타임이 이해할 수 있는 의미 있는 자바스크립트 코드로 변환된다.

<aside> 🧠 JSX의 설계 목적 : 다양한 트랜스파일러에서 다양한 속성을 가진 트리 구조를 토큰화해 ECMAScript로 변환하는데 초점을 두고 있다. (트리구조로 표현하고, 이를 javascript 코드로 트랜스 파일화 시키려는 목적)

</aside>

개인적인 의견 : react에 국한된게 아니고, JSX를 트랜스파일링해서 트리형태의 자료구조를 조금 더 쉽게 나타낼 수도 있다. 즉 추후 자바스크립트내에서 트리구조를 사용해야할때 유용할 수 있다.

JSX의 정의

1. JSXElement : JSX를 구성하는 가장 기본 요소로, HTML의 요소 (element) 혹은 tag와 비슷한 역할을 한다.
2. JSXAttributes
3. JSXChildren : JSX Element의 자식값
4. JSXStrings

<aside> 🧠 이렇게 4가지 컴포넌트를 기반으로 구성돼 있다.

</aside>

JSX의 반환값

• React.createElement()

createElement – React

가상 DOM과 리액트 파이버

알아볼것

• 가상 DOM이 왜 만들어졌는지?
• 실제 DOM과 어떤 차이가 있는지?