Js Class 개념 + 컴포넌트

컴포넌트

1. state
2. setState
3. render

코드

<div id="app"></div>
<script>
const $app = document.querySelector('#app');

let state = {
  items: ['item1', 'item2', 'item3', 'item4']
}

const render = () => {
  const { items } = state;
  $app.innerHTML = `
    <ul>
      ${items.map(item => `<li>${item}</li>`).join('')}
    </ul>
    <button id="append">추가</button>
  `;
  document.querySelector('#append').addEventListener('click', () => {
    setState({ items: [ ...items, `item${items.length + 1}` ] })
  })
}

const setState = (newState) => {
  state = { ...state, ...newState };
  render();
}

render();
</script>

state가 변경되면(setState함수로인해) render를 실행한다.
state는 setState로만 변경해야 한다.

결국 setState함수로 인해 state가 변경되고 render가 진행된다.

class로 변환

<div id="app"></div>
<script>
class Component {
  $target;
  $state;
  constructor ($target) { 
    this.$target = $target;
    this.setup();
    this.render();
  } 
  render () {
    this.$target.innerHTML = this.template();
    this.setEvent();
  }
  setState (newState) {
    this.$state = { ...this.$state, ...newState };
    this.render();
  }
   setup () {};
   template () { return ''; }
   setEvent () {}
}

class App extends Component {
  setup () {
    this.$state = { items: ['item1', 'item2'] };
  }
  template () {
    const { items } = this.$state;
    return `
        <ul>
          ${items.map(item => `<li>${item}</li>`).join('')}
        </ul>
        <button>추가</button>
    `
  }
  
  setEvent () {
    this.$target.querySelector('button').addEventListener('click', () => {
      const { items } = this.$state;
      this.setState({ items: [ ...items, `item${items.length + 1}` ] });
    }); 
  }
}

new App(document.querySelector('#app'));
</script>

처음 new App(Dom)을 통해 해당 div태그가 부모 class인 Component로 가서 처음 시작인 constructor함수가 실행되고 해당 $target을 this.$target으로 저장해준 후 기본적인 setup함수와 render함수를 실행한다.

추가로 Component의 이부분은 없어도 오류는 나지않는다.

   setup () {};
   template () { return ''; }
   setEvent () {}

그리고 해당 내용에서 this는 App을 가르킨다. 따라서 부모클래스에서 자신이 가지고 있지 않은 함수인 setup함수를 사용할 수 있다.

constructor의 render함수의 경우도 this.render()가 아닌 render()로 하면 undefined로 어떤 객체가 가지고 있는 부모클래스의 render함수인지를 확실하게 하기 위해 this.render()로 만들어야 한다.

(내가이해하기 쉽게) 정리 (틀릴수있음)

1. 부모클래스에서도 자신이 가진 함수를 함부로 쓸수없다. (자식클래스를 정확히 지정하는 this를 써서 제대로 된 함수를 가리켜야한다.
2. 해당 new 객체()를 통해 만들어진 내용에서 this는 그객체를 나타낸다.
3. 이제는 Dom을 다루는것이 아닌 컴포넌트를 다루는데에 익숙해져야 할 때이다. (할 수 있을까...)

출처

junilhwang