Day17

Day17

1. 명령형 프로그래밍

• 어떻게 처리하는지에 대한 묘사 ex) C, Java, Python

2. 선언형 프로그래밍

• 무엇을 원하는지에 대한 묘사 ex) HTML, SQL

3. 토글 버튼 만들기

• 화면에 버튼을 3개 넣고, 버튼을 클릭하면 삭선이 그어지도록 만들기
• ToggleButton이라는 이름으로 추상화하기
  Code

  ```javascript function ToggleButton({ $target, text }) { const $button = document.createElement('button') $target.appendChild($button); $button.addEventListener('click', () => $button.style.textDecoration = $button.style.textDecoration === 'line-through' ? 'none' : 'line-through') this.render = () => { $button.textContent = text; } this.render(); } const $app = document.querySelector('body') new ToggleButton({ $target: $app, text: 'Button1' }) new ToggleButton({ $target: $app, text: 'Button2' }) new ToggleButton({ $target: $app, text: 'Button3' }) new ToggleButton({ $target: $app, text: 'Button4' }) ```
• 기능 추가하기
  1. 3번 클릭할 때마다 alert 띄우기(DOM 변경 방식)
  Code

  ```javascript function ToggleButton({ $target, text, onClick }) { const $button = document.createElement('button') let clickCount = 0; $target.appendChild($button); $button.addEventListener('click', () => { clickCount++; $button.style.textDecoration = $button.style.textDecoration === 'line-through' ? 'none' : 'line-through' if (onClick) onClick(clickCount); }) this.render = () => { $button.textContent = text; } this.render(); } const $app = document.querySelector('body') new ToggleButton({ $target: $app, text: 'Button1', onClick: (clickCount) => { clickCount % 3 === 0 ? alert('3번째 클릭') : null; } }) new ToggleButton({ $target: $app, text: 'Button2', onClick: (clickCount) => { clickCount % 2 === 0 ? alert('2번째 클릭') : null; } }) new ToggleButton({ $target: $app, text: 'Button3' }) new ToggleButton({ $target: $app, text: 'Button4' }) ```
  1. 3번 클릭할 때마다 alert 띄우기(상태 변경 방식)
  Code

  ```javascript function ToggleButton({ $target, text, onClick }) { const $button = document.createElement('button') $target.appendChild($button); this.state = { clickCount : 0, toggled : false } this.setState = (nextState) => { this.state = nextState; this.render(); } this.render = () => { $button.textContent = text; $button.style.textDecoration = this.state.toggled ? 'line-through': 'none' } $button.addEventListener('click', () => { this.setState({ clickCount : this.state.clickCount + 1, toggled : !this.state.toggled }) if(onClick) onClick(this.state.clickCount); }) this.render(); } const $app = document.querySelector('body') new ToggleButton({ $target: $app, text: 'Button1', onClick: (clickCount) => { clickCount % 3 === 0 ? alert('3번째 클릭') : null; } }) new ToggleButton({ $target: $app, text: 'Button2', onClick: (clickCount) => { clickCount % 2 === 0 ? alert('2번째 클릭') : null; } }) new ToggleButton({ $target: $app, text: 'Button3' }) new ToggleButton({ $target: $app, text: 'Button4' }) ```
  1. ToggleButton 외에 5초 뒤에 자동으로 토글되는 버튼 만들기
  Code

  ```javascript function TimerButton({ $target, text, timer = 3000 }) { const button = new ToggleButton({ $target, text, onClick: () => { setTimeout(() => { button.setState({ ...button.state, toggled : !button.state.toggled }) }, timer) } }) } function ToggleButton({ $target, text, onClick }) { const $button = document.createElement('button') $target.appendChild($button); this.state = { clickCount : 0, toggled : false } this.setState = (nextState) => { this.state = nextState; this.render(); } this.render = () => { $button.textContent = text; $button.style.textDecoration = this.state.toggled ? 'line-through': 'none' } $button.addEventListener('click', () => { this.setState({ clickCount : this.state.clickCount + 1, toggled : !this.state.toggled }) if(onClick) onClick(this.state.clickCount); }) this.render(); } const $app = document.querySelector('body') new ToggleButton({ $target: $app, text: 'Button1', onClick: (clickCount) => { clickCount % 3 === 0 ? alert('3번째 클릭') : null; } }) new ToggleButton({ $target: $app, text: 'Button2', onClick: (clickCount) => { clickCount % 2 === 0 ? alert('2번째 클릭') : null; } }) new ToggleButton({ $target: $app, text: 'Button3' }) new ToggleButton({ $target: $app, text: 'Button4' }) new TimerButton({ $target: $app, text: `3초 뒤에 자동으로!` }) new TimerButton({ $target: $app, text: `10초 뒤에 자동으로!`, timer: 1000 * 10 }) ```
  1. ButtonGroup 만들기
  Code

  ```javascript function TimerButton({ $target, text, timer = 3000 }) { const button = new ToggleButton({ $target, text, onClick: () => { setTimeout(() => { button.setState({ ...button.state, toggled: !button.state.toggled }) }, timer) } }) } function ToggleButton({ $target, text, onClick }) { const $button = document.createElement('button') $target.appendChild($button); this.state = { clickCount: 0, toggled: false } this.setState = (nextState) => { this.state = nextState; this.render(); } this.render = () => { $button.textContent = text; $button.style.textDecoration = this.state.toggled ? 'line-through' : 'none' } $button.addEventListener('click', () => { this.setState({ clickCount: this.state.clickCount + 1, toggled: !this.state.toggled }) if (onClick) onClick(this.state.clickCount); }) this.render(); } function ButtonGroup({ $target, buttons }) { const $group = document.createElement('div') let isInit = false; this.render = () => { if (!isInit) { buttons.forEach(({ type, ...props }) => { if (type === 'toggle') { new ToggleButton({ $target: $group, ...props }) } else if (type === 'timer') { new TimerButton({ $target: $group, ...props }) } }); $target.appendChild($group) isInit = True } } this.render(); } const $app = document.querySelector('body') new ButtonGroup({ $target: $app, buttons: [ { type: 'toggle', text: '토글 버튼' }, { type: 'toggle', text: '토글 버튼' }, { type: 'timer', text: '타이머 버튼', timer: 1000 } ] }) ```
• UI의 상태를 추상화하고 해당 상태에 따라서 렌더 함수를 통해서 상태의 변화를 따라가도록 하는 방법이 좋음
• 외부에서의 직접적인 접근이 아닌 parameter 들만으로 동작하면서 추상화된 상태를 이용하여 UI가 변경되는 방식으로 프로그래밍해야 한다.