JSX → React

Virtual DOM

<body>
  <!-- <p>Actual DOM</p> -->
  <script src="./index.js"></script>
</body>

실제 DOM model 컨트롤

// Actual DOM
var actual_dom = document.createElement('p')
actual_dom.innerHTML = 'Actual DOM'
document.body.appendChild(actual_dom)

가상 DOM model 컨트롤

virtual-hyperscript은 실제 virtual tree를 만들어주는 역할을 한다. vdom은 실제 DOM에 렌더링하고 알고리즘을 통해 붙이는(patch)작업을 한다.

h('요소', 'innerHTML')
React.createElement('a', {href: './', className: 'link'}, '클릭')

React.createElement()

React.createElement('a', {href: './', className: 'link'}, '클릭')

먼저 h, createElement를 생성한다.

var h = require('virtual-dom/h')
var createElement = require('virtual-dom/create-element')

예시

<p> 요소에 텍스트 'virtual dom'를 넣는다.

var tree = h('p', 'virtual dom')
var rootNode = createElement(tree)
document.body.appendChild(rootNode)

요소 안에 여러 요소를 추가 할 때는 []배열로 전달할 수 있다. 또한 배열의 순서대로 출력이 되기 때문에 마크업의 순서를 설정할 수 있다.

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)

클래스와 아이디 추가하기

태그 안에 속성을 넣고 싶을 때 {}를 사용해서 넣는 방법도 있지만 아이디와 클래스를 넣을 때는 요소에 바로 입력해서 넣을 수 있다.

h('div.container', list)
h('div', { className: 'container' }, list)

// 위 둘의 결과 값은 같다. 
<div class="container"></div>

h('div#container', list)
h('div', { id: 'container' }, list)

// 위 둘의 결과 값은 같다. 
<div id="container"></div>

중간 정리

h, create-element를 사용해서 가상 요소를 생성하고 가상 tree를 만들 수 있다.

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에 담아 <body>에 붙인다.

var patches = diff(tree, newTree)
patch(rootNode, patches)

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 배열 데이터 순환 처리

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 제거버튼

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()가 비교하는 값을 바꿔줌

function update() {
  var newTree = render(data)
  var patches = diff(tree, newTree)
  patch(rootNode, patches)
  // tree 변수 값 업데이트
  tree = newTree
}

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

// JSX
const reactElement = 
  <h1 lang='en' className='headline'>
    <strong>React</strong>{' '}
    <abbr title='Application Programming Interfaces'>APIs</abbr>
  </h1>
  
ReactDOM.render(reactElement, document.getElementById('root'))
  
// Virtual DOM
var h = require('virtual-dom/h')
var createElement = require('virtual-dom/create-element')

var abbr = h('abbr', { title: 'Application Programming Interfaces' }, 'APIs')
var strong = h('strong', 'React')

var head = h('h1. headline', { leng: 'en' }, [strong, abbr])

var rootNode = createElement(head)
document.body.appendChild(rootNode)

JSX

JSX란?

XML과 유사한 JS 문법(구문) 확장이다. 또는 XML 문법을 가진 JS 표현 식으로 말하기도 한다.

JSX가 하는 일

JSX가 하는 일은 React 요소(Element)를 만드는 것이다. React.createElement()로 요소를 생성하고 추가하는 것은 그 과정이 복잡하다 이때, JSX를 사용해서 요소를 생성하면 가독성도 높아지고 손쉽게 요소를 추가할 수 있다.

React 요소는 실제 DOM 요소가 아니라, JavaScript 객체이다.

React 요소를 만드는 2가지 방법

React 요소를 만들 때, JSX를 사용하거나 React.createElement()를 사용해서 만들 수 있다. 하지만 React.createElement()를 사용하는 방법은 복잡하기 때문에 대부분 JSX를 사용하여 작업한다.

const app = (
  <div className="app">
    <h1>React 앱</h1>
  </div>
)

const appHeading = React.createElement(
  'h1',
  null,
  'React.createElement() 메서드'
)

const appElement = React.createElement('div', { class: 'app' }, appHeading)

DOM vs 가상 DOM

ReactDOM 모듈은 가상 DOM을 실제 DOM에 장착(Mount)시켜 렌더링(Rendering)한다.

가상 DOM을 사용하는 이유?

UI는 수시로 변경되는데 변경될 때마다 DOM이 변경되면 업데이트된 요소를 다시 렌더링 하는데 이 과정이 UI의 속도를 느리게 한다. 만약 렌더링 해야하는 요소의 수가 많을 수록 비용은 더 많이 들고 속도는 더 느려진다.

가상 DOM은 실제 DOM에 직접적으로 조작하는 것이 아니라, 이전/이후 상태를 비교하여 변경 사항이 발생할 때 변경된 부분만 실제 DOM에 업데이트(patch) 하므로 UI 속도를 대폭 향상시킬 수 있다.

Babel's Compile

Babel은 JSX를 React.createElement()로 컴파일 한다.

참고

PreviousJSX Next실습하기

Last updated 3 years ago