요소에 텍스트 'virtual dom'를 넣는다. ```javascript var tree = h('p', 'virtual dom') var rootNode = createElement(tree) document.body.appendChild(rootNode) ```  요소 안에 여러 요소를 추가 할 때는 `[]`배열로 전달할 수 있다. 또한 배열의 순서대로 출력이 되기 때문에 마크업의 순서를 설정할 수 있다. ```javascript var tree = h('div.foo#some-id', [ '입력해주세요 ', h('span', 'some text'), h('input', { type: 'text', value: 'foo' }), ]) var rootNode = createElement(tree) document.body.appendChild(rootNode) ```  **클래스와 아이디 추가하기** 태그 안에 속성을 넣고 싶을 때 `{}`를 사용해서 넣는 방법도 있지만 아이디와 클래스를 넣을 때는 요소에 바로 입력해서 넣을 수 있다. ```javascript h('div.container', list) h('div', { className: 'container' }, list) // 위 둘의 결과 값은 같다.
h('div#container', list) h('div', { id: 'container' }, list) // 위 둘의 결과 값은 같다. ``` ### 중간 정리 `h`, `create-element`를 사용해서 가상 요소를 생성하고 가상 tree를 만들 수 있다. ```javascript var h = require('virtual-dom/h') var createElement = require('virtual-dom/create-element') // Virtual DOM var tree = h('p', 'virtual dom') var rootNode = createElement(tree) document.body.appendChild(rootNode) console.log(typeof h) // function console.log(typeof createElement) // function console.log(tree) // VirtualNode (가상노드) ``` ### 가상 DOM 가상 트리 비교 후, 패치 `diff()`를 사용해서 기존의 `tree`와 `newtree`의 변화를 감지하고 변화된 내용을 변수 `patches`에 담는다. 그리고 `patch()`는 변화된 내용을 변수 `rootNode`에 담아 ``에 붙인다. ```javascript var patches = diff(tree, newTree) patch(rootNode, patches) ``` ```javascript var h = require('virtual-dom/h') var createElement = require('virtual-dom/create-element') var diff = require('virtual-dom/diff') var patch = require('Virtual-dom/patch') var count = 0 function render(n) { return h('p', 'virtual dom ' + n) } function update() { // 새로운 가상 트리를 생성 var newTree = render(++count) // 1, 2, 3, ... // 기존 가상 트리, 새로운 가상 트리하고 변경점이 있는지 확인 var patches = diff(tree, newTree) // 변경사항이 발생하면 rootNode에 패치(붙인다) patch(rootNode, patches) } // Virtual DOM var tree = render(count) var rootNode = createElement(tree) document.body.appendChild(rootNode) window.setInterval(function () { update() }, 1400) ```  ### 가상 DOM 배열 데이터 순환 처리 ```javascript var h = require('virtual-dom/h') var createElement = require('virtual-dom/create-element') var diff = require('virtual-dom/diff') var patch = require('Virtual-dom/patch') var data = ['vue.js', 'angular', 'react'] function render(data) { var lists = data.map(function (item, index) { return h('li', item) }) return h('ul', lists) } // Virtual DOM var tree = render(data) var rootNode = createElement(tree) document.body.appendChild(rootNode) ```  ### 가상 DOM 제거버튼 ```javascript var data = ['vue.js', 'angular', 'react'] function render(data) { var lists = data.map(function (item, index) { return h('li', [ item, h( 'button', { type: 'button', onclick: function (e) { data.splice(index, 1) console.log(data) update() }, }, 'delete' ), ]) }) return h('ul', lists) } function update() { var newTree = render(data) var patches = diff(tree, newTree) patch(rootNode, patches) } // Virtual DOM var tree = render(data) var rootNode = createElement(tree) document.body.appendChild(rootNode) ``` ### 가상 DOM 추가버튼 버튼을 클릭 했을 때 클릭 할 때마다 1, 2, 3, 4, ... 개씩 추가되는 오류를 방지하기 위해 `tree=newTree` 구문으로 `diff()`가 비교하는 값을 바꿔줌 ```javascript function update() { var newTree = render(data) var patches = diff(tree, newTree) patch(rootNode, patches) // tree 변수 값 업데이트 tree = newTree } ``` ```javascript var h = require('virtual-dom/h') var createElement = require('virtual-dom/create-element') var diff = require('virtual-dom/diff') var patch = require('Virtual-dom/patch') var data = ['vue.js', 'angular', 'react'] function render(data) { var lists = data.map(function (item, index) { return h('li', [ item, h( 'button', { type: 'button', onclick: function (e) { data.splice(index, 1) console.log(data) update() }, }, 'delete' ), ]) }) var list = h('ul', lists) var input = h('input.add-content', { type: 'text', placeholder: 'Add Favorite Framework', }) var add_button = h( 'button.add-button', { type: 'button', onclick: function (e) { var input = document.querySelector('.add-content') // 모델 데이터 업데이트 data.push(input.value) // 화면 뷰 업데이트 update() // 콘솔 변경된 데이터 출력 input.value = '' }, }, 'Add' ) var container = h('div.container', [input, add_button, list]) return container } function update() { var newTree = render(data) var patches = diff(tree, newTree) patch(rootNode, patches) // tree 변수 값 업데이트 tree = newTree } // Virtual DOM var tree = render(data) var rootNode = createElement(tree) document.body.appendChild(rootNode) ``` ### JSX와 Virtual DOM ```javascript // JSX const reactElement =