코드스피츠 86 객체지향 자바스크립트 - 1회차 part3 (step 30)

프레임워크 vs 라이브러리

라이브러리는 제어의 역전을 X
프레임워크는 제어의 역전을 O

제어 역전과 관련한 코드내용이 어려워 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로만 수정이 가능하고 state가 변경되면 setState함수 안의 render를 실행한다.

출처

Vanilla Javascript로 컴포넌트 만들기

코드 스피츠