React 클래스에 createElement 라는 static public method 를 써서 DOM 을 만들 수 있다.
createElement 의 명세는 아래와 같다.
React.createElement(component, props, ...children);
간단하게 구현을 해보면 아래와 같을 것 같다.
function createElement(component, props, ...children) {
const dom = document.createElement(component);
if (!dom) {
alert('유효하지 않은 component 입니다.');
}
// # 1
Object.assign(dom, props);
// # 2
for (const key of Object.keys(props)) {
dom[key] = props[key];
}
for (const child of children) {
dom.appendChild(child);
};
return dom;
}
createElement 로 View 를 만들면 가독성이 너무 나쁘고 읽기어렵다.
자연스레 디버깅도 어려워짐.
ReactDOM.render(
React.createElement('h1', null,
React.createElement('h2', null, '사과'),
'Hello World',
React.createElement('div', {background: 'red'},
React.createElement('h1', null, 'Bye'))
),
딱봐도 읽기 싫게 생겼다.
편하게 읽고 쓸 수 있도록 JSX 가 도입되었다.
JSX 는 Syntax Sugar 로, 쉬운 사용성을 위해 도입되었다.
JSX 는 Babel 을 활용해 Js 로 transpile 해야한다.
즉, JSX 를 React.createElement() 로 transpile 한 뒤 사용하는 것이다.
위 예시 코드를 JSX 를 사용하면 아래와 같이 바뀐다
ReactDOM.render(
<h1>
<h2>사과</h2>
HelloWorld
<div background='red'>
<h1>Bye</h1>
</div>
</h1>
XML 형식으로 createElement 를 썼을때보다 굉장히 직관적이다.
이는 코드의 유지보수 측면에서 유리하고 이해하기 쉬운 코드를 짤 수 있다는 장점이 있다.
리액트 공식문서 - createElement
리액트교과서