반응형
여기 간단한 HTML 파일이 있다. (index.html)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>2.2 객체 to DOM Render</title>
</head>
<body>
<div id="root"></div>
<script src="app.js" type="module"></script>
</body>
</html>
이걸 어떻게 할 것이냐면,
복잡한 DOM → 간단한 객체로 바꿈 → DOM Render라는 함수를 하나 만들고 앞에서 만든 객체를 입력 받음 → 그 객체를 실제 DOM으로 변경한다.
위의 HTML 파일에 연결된 app.js의 코드는 아래와 같다. (app.js)
function createDOM(vdom) { // 아래 변수를 vdom으로 했으니 우선 input값을 vdom으로 선언
const element = document.createElement(vdom.tag);
return element // DOM을 만드는 역할
}
const vdom = {
tag: 'p',
props: {},
children: [
{
tag: 'h1',
props: {},
children: ["React 만들기"],
},
],
};
document
.querySelector('#root') // id값이 'root'인 곳에 p 태그를 생성한다.
.appendChild(createDOM(vdom));최초의 DOM 형성은 이런 방식으로 한다.
element의 자식요소도 렌더링 해줘야 한다.
children 객체가 있는지 확인해서 순회해야한다.
function createDOM(vdom) { // 아래 변수를 vdom으로 했으니 우선 input값을 vdom으로 선언
const element = document.createElement(vdom.tag);
vdom.children
.map(createDOM) // 재귀가 발생
.forEach(element.appendChild.bind(element)); // bind를 쓰지 않으면 context가 깨진다.
return element // DOM을 만드는 역할
}
const vdom = {
tag: 'p',
props: {},
children: [
{
tag: 'h1',
props: {},
children: ["React 만들기"],
},
],
};
document
.querySelector('#root') // id값이 'root'인 곳에 p 태그를 생성한다.
.appendChild(createDOM(vdom));
하위 요소가 문자열인 경우의 예외처리가 되어있지 않다. (vdom에서 children은 "React 만들기"라는 문자열임)
예외처리를 추가한다.
vdom이라는 단어는 모든 DOM을 하나의 가상화된 개념으로 묶는 것이고,
createDOM의 함수에서는 개별 객체 하나를 다루는 것이기 때문에 입력값을 node로 단어를 변경해주기로 하자.
그리고 여러 개의 자식을 추가해서 N개의 자식이 있고 단계가 깊어졌을 때 제대로 동작하는지 테스트하기 위해서
자식들을 추가한다.
function createDOM(node) {
if (typeof node === 'string') {
return document.createTextNode(node);
}
const element = document.createElement(node.tag);
node.children
.map(createDOM)
.forEach(element.appendChild.bind(element));
return element;
}
const vdom = {
tag: 'p',
props: {},
children: [
{ // 이것 하나가 객체
tag: 'h1',
props: {},
children: ["React 만들기"],
},
{
tag: 'ul',
props: {},
children: [
{
tag: 'li',
props: {},
children: ["첫 번째 아이템"]
},
{
tag: 'li',
props: {},
children: ["두 번째 아이템"]
},
{
tag: 'li',
props: {},
children: ["세 번째 아이템"]
},
]
}
],
};
document
.querySelector('#root')
.appendChild(createDOM(vdom));
강의를 들으면서
자바스크립트의 객체 형태(하위 값 중첩), bind()에 대한 개념을 잡아야겠다고 생각했다.
나머지는 크게 어렵지 않았다.
반응형