// 예시
const list = document.querySelector('.list-group')
const container = document.createElement('li')
const todoStatus = document.createElement('input')
container.classList.add('list-group-item', 'list-group-flat')
container.appendChild(todoStatus)Last updated
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>react를 만들어보자</title>
</head>
<body>
<div id="root"></div>
<script src="app.js" type="module"></script>
</body>
</html>// app.js
// 개별적인 돔 노드를 다루는 함수기때문에 인자의 이름을 node로 지어준다.
function createDOM(node) {
// 4. children이 재귀적으로 들어오는데 object 타입이 아닌 string이며 문자열 돔을 만들어 return 해준다.
if (typeof node === 'string') {
return document.createTextNode(node);
}
const element = document.createElement(node.tag); // 1. vdom 객체를 받아 dom element를 만들었다.
node.children
.map(createDOM) //2. 재귀 패턴 하위 children을 순회하며 구조를 만든다.
.forEach(element.appendChild.bind(element));// 3. element 컨텍스트를 지켜주기위해 bind 해준다. 부모 element의 자식 요소로 추가되게 된다.
return element;
}
const vdom = {
tag: 'p',
props: {},
children: [
{
tag: 'h1',
props: {},
children: ["잼는거 list"],
},
{
tag: 'ul',
props: {},
children: [
{
tag: 'li',
props: {},
children: ["피지컬100"]
},
{
tag: 'li',
props: {},
children: ["우마게임"]
},
{
tag: 'li',
props: {},
children: ["블랙컴뱃"]
},
]
}
],
};
document
.querySelector('#root')
.appendChild(createDOM(vdom));