component create & connect

컴포넌트를 구현할 때 크게 세가지 항목을 주목하며 구현합니다.

• constructor
  • new를 통해 생성
  • DOM 변수를 파라미터로 받아 렌더링
  • 컴포넌트가 표현될 때 element를 생성
• setState
  • 포커싱된 컴포넌트의 state를 갱신합니다. state를 기준으로 렌더링 되기 때문에, state가 변경될 때 반드시 render를 호출하여 업데이트 해야 합니다.
• render
  • 포커싱된 컴포넌트의 state를 기준으로 별도의 파라미터 없이 자신의 element를 렌더링 합니다.

위 세가지를 고려한 컴포넌트는 다음과 같은 기본적인 틀을 갖추게 됩니다.

// $dom         : DOM 변수
// initialState : 생성 시 초기 state 값
function example({ $dom, initialState }) {
  this.state = initialState;
  //this.$target : 컴포넌트를 렌더링 할 DOM
  this.$target = document.createElement("div");
  //DOM에 컴포넌트 렌더링
  $dom.appendChild(this.$target);

  //state를 재 전달 받으면 변경하고 리렌더링 
  this.setState = (nextState) => {
    this.state = nextState;
    this.render();
  }

  //this.state를 기준으로 렌더링 시작
  this.render = () => {
    this.$target.innerHTML = `
      <div class="exmaple">${this.state}</div>
    `
  }

  //인스턴스화 후 render함수를 호출하여 new로 생성 시 바로 렌더링 됨
  this.render();
}