렌더링

사용자 정의 성능 위젯

const state = {
  panel: null,
  start: null,
  frames: 0,
};

const createFrameBox = () => {
  const div = document.createElement('div');
  Object.assign(div.style, {
    position: 'fixed',
    left: 0,
    top: 0,
    width: '50px',
    height: '50px',
    backgroundColor: 'black',
    color: 'white'
  });
  return div
};

const tick = () => {
  const now = window.performance.now();
  state.frames++;

  if(now >= state.start + 1000) {
    state.panel.innerText = state.frames;
    state.frames = 0;
    state.start = now
  }
  window.requestAnimationFrame(tick)
};

const init = () => {
  state.panel = createFrameBox();
  document.body.appendChild(state.panel);
  tick()
};

init();

렌더링 함수

순수 함소로 엘리먼트를 렌더링한다는 것은 DOM 엘리먼트가 애플리케이션의 상태에만 의존한다는 것을 의미한다.

view = f(state)

컴포넌트 함수

<span
  class="todo-count"
  data-component="counter">
  1 Item Left
</span>

컴포넌트의 'name'을 data-component 속성에 넣었다. 이 속성은 뷰 함수의 필수 호출을 대체한다. 컴포넌트 라이브러리를 생성하기 위한 필수 조건은 레지스트리(registry)다. 레지스트리는 애플리케이션에서 사용할 수 있는 모든 컴포넌트의 인덱스다.

const registry = {
  todos: todosView,
  counter: counterView,
  filters: filtersView
};

레지스트리의 키는 data-component 속성 값과 일치한다. 이것이 컴포넌트 기반 렌더링 엔진의 핵심 메커니즘이다.

간단한 가상 DOM 구현