컴포넌트를 구현할 때 크게 세가지 항목을 주목하며 구현합니다.
위 세가지를 고려한 컴포넌트는 다음과 같은 기본적인 틀을 갖추게 됩니다.
// $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();
}