React) JSX가 처리되는 과정

JSX코드가 처리되는 과정

JSX는 자바스크립트 코드가 HTML처럼 보이게 만든 일종의 Syntax Sugar일뿐이다. 실제로는 자바스크립트이다.

// JSX
return <div>
        <h2>Let's get started!</h2>
        <Expenses expenses={expenses}></Expenses>
    </div>

// 원시 React?
return React.createElement("div", {}, 
	    React.createElement("h2", {}, "let's get started"),
	    React.createElement(Expenses, {item: expenses})
	) //최상위 div에는 속성이 없으므로 빈객체{}를 2번째 인자로 제공한다.

위 예시의 아래 부분처럼 실제로 JSX 문법이 나오기 전까진 createElement() 메소드의 체이닝을 계속 했어야 했다.

(return문은 단 하나의 값만 낼 수 있으므로) 맨 상위 컴포넌트가 하나여야 하는 이유는 그 때문이다.

 

CreateElement

CreateElement는 자바스크립트 메소드로, 인자는 3개를 받는다.

차례대로 태그네임이 될 문자열, 속성 객체, 자식 컴포넌트 들을 받는다.

React.createElement(tagName, prop, childen)