Deku 치트시트 (함수형 가상 DOM 라이브러리)

Deku는 순수 JavaScript 함수를 사용하여 대화형 UI를 구축할 수 있도록 지원하는 우아한 함수형 가상 DOM 라이브러리입니다.

함수형 컴포넌트 및 라이프사이클 훅

/** @jsx element */
import { element } from 'deku';

function render({ props, children, context, path }) {
  return (
    <div class="card" hidden={props.hidden} style={{ color: context.theme.color }}>
      <h2>{props.title}</h2>
      {children}
    </div>
  );
}

function onCreate({ props, dispatch, path }) {
  // Triggered on component mount
}

function onUpdate({ props, nextProps, dispatch }) {
  // Triggered when props change
}

function onRemove({ props, dispatch }) {
  // Triggered on component unmount
}

export default { render, onCreate, onUpdate, onRemove };

---

렌더링 및 Redux 스토어 연동

import { createStore } from 'redux';
import { dom, element } from 'deku';
import App from './app';

const store = createStore(reducer);

// Bind renderer to DOM mounting container
const render = dom.createRenderer(document.getElementById('root'), store.dispatch);

// Subscribe to store updates
function update() {
  render(<App state={store.getState()} />, { theme: { color: '#333' } });
}

store.subscribe(update);
update();

---

관련 치트시트

• Virtual-DOM
• Redux