간소화 반응형 컴포넌트와 스토어(복기)

간단히 구현하여 사용할 수 있는 vanilla javascipt 컴포넌트
반응형 컴포넌트 기초 학습용

ls

component
- 다른 컴포넌트를 생성하는 기초
store
- 공통 상태 관리를 위한 스토어

demo

in demo branch

Needs improvement

반응형 최적화

아래 코드처럼 isRender가 매 render시마다 renderState를 중복해서 누적시키고 있다.

  get: (target, key, reciever) => {
      if(isRender) {
        renderState.push(key);
      }
      return Reflect.get(target, key, reciever);
    },
  ======================================================
  this.render = () => {
  isRender = true;
  const childs = renderFuntion.call(state);
  if (typeof childs === 'string') {
    rootEl.innerHTML = childs;
  }
  if (typeof childs === 'object') {
    for (const child of childs) {
      rootEl.appendChild(child);
    }
  }
  isRender = false;
};

set 자료형을 통해 중복을 줄여야 한다. (mounted 전에만 호출 시 선택적으로 호출하는 state는 놓칠 수 있다)

vuex에서 사용 가능한 getters 미구현, mutaion은 actions로 통합
- getters는 render처럼 참조하는 state가 업데이트 되면 업데이트 되며 state처럼 로컬 state와 연결
- 편의상 구현되지 않은 mutation은 기존의 actions를 사용하고 actions는 mutation을 bind하고 mutaion은 state를 bind하면 깔끔한 코드가 될 것이다.
렌더링 최적화
- 한 컴포넌트에 영향을 주는 변수 여러 개가 한 함수에 의해 변화하더라도 각각의 변수 변화가 렌더링을 호출하는 문제가 있다.
- render의 호출을 requestAnimationFrame으로 미루고 그동안 같은 함수 내에서의 호출을 막아 해결할 수 있다.
props와 memoization
- memoization이 없는 props 전달은 성능상의 이슈와 오류가 발생할 가능성이 높다고 생각하여 사용하지 않았다.
가볍게 작성되었고 Anneong.js로 개선된 프레임워크 제작중

dororodoroddo/SimpleVanillaComponent

간소화 반응형 컴포넌트와 스토어(복기)

ls

demo

Needs improvement