babel, JavaScript, JSX, react
반응형
html 태그로 표현되어있는 문법을 createElement 로 변환해준다.
const vdom = <p>
<h1>헤더</h1>
<ul>
<li style="color:red">첫번째</li>
<li style="color:blue">두번째</li>
</ul>
</p>위에 있는 코드가 아래와 같이 변환이 된다.
"use strict";
const vdom = /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("h1", null, "\uD5E4\uB354"), /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", {
style: "color:red"
}, "\uCCAB\uBC88\uC9F8"), /*#__PURE__*/React.createElement("li", {
style: "color:blue"
}, "\uB450\uBC88\uC9F8")));출처 : https://babeljs.io/ 에서 변환함.
왜 저렇게 변환이 필요한가??
// app.js
const vdom = createElement(
"p",
{},
createElement("h1", {}, "헤더"),
createElement(
"ul",
{},
createElement("li", { style: "color:red" }, "첫번째"),
createElement("li", { style: "color:blue" }, "두번째")
)
);
// react.js
export function createElement(tag, props, ...children) {
props = props || {}
return {
tag,
props,
children,
};
}JSX 를 사용하지 않으면 위와같이 코드를 작성해줘야 한다. 하지만 위보다는 html 태그 구조가 눈에 더 잘 들어온다.
한가지 더 기본적으로 JSX 가 변환을 할때에 메소드를 보면 React.createElement를 사용한다. 하지만 위에 작성된 코드에서는 createElement를 사용하고 있다. 이걸 변경해주려면 다음과 같이 표시해 주면된다. 변환된 코드는 아래와 같다.
/* @jsx createElement */
// app.js
const vdom = createElement(
"p",
{},
createElement("h1", {}, "헤더"),
createElement(
"ul",
{},
createElement("li", { style: "color:red" }, "첫번째"),
createElement("li", { style: "color:blue" }, "두번째")
)
);실제로 babel 사이트에서 변환된 것을 봐도 변경된 것을 알수 있다.
"use strict";
// app.js
const vdom = createElement("p", {}, createElement("h1", {}, "헤더"), createElement("ul", {}, createElement("li", {
style: "color:red"
}, "첫번째"), createElement("li", {
style: "color:blue"
}, "두번째")));
728x90
반응형
'Development > Frontend skills' 카테고리의 다른 글
| [javascript] webpack.config.js 설정 (0) | 2023.01.13 |
|---|---|
| [javascript] 배열 연산의 형태 (0) | 2022.12.23 |
| [Javascript] 함수 형태 (0) | 2022.12.20 |
| [React] Warning: Each child in a list should have a unique "key" prop. (0) | 2022.08.12 |
| [React] React.useState() (0) | 2022.08.12 |
