프로그래머스 프로그래밍 언어 검색 (4) SelectedLanguages 구현

(4) SelectedLanguages 구현

- SelectedLanguages.js

export default function SelectedLanguages({target}){
  this.element = document.createElement('ul');
  this.className = 'selectedLanguages 스타일 입히는 클래스');
  target.appendChild(this.element);
  
  this.state = {
    selectedLanguages: [],
  }
  
  this.setState = (nextState) => {
    this.state = {
      ...this.state,
      ...nextState,
  	}
    this.render();
  }
  
  this.render = () => {
    const languages = this.state.selectedLangauges;
    this.element.innerHTML = `
	  ${
        languages.map(item => `<li style="margin-right: 8px;">${item}</li>`)	
  	  }
	`
  }
  
  this.render();
}

App의 state프로퍼티에 선택된 언어가 추가 될 때마다 SelectedLanguages의 setState메서드가 호출되고, setState메서드에서 render메서드의 호출이 발생해 화면에 선택된 언어들이 보여지도록 한다.

- App.js 추가

export default function App({target}){
  // ... 이전 코드
  
  this.setState = (nextState) {
    this.state = {
      ...this.state,
      ...nextState
  	}
    
    selectedLanguages.setState({
      selectedLanguages: this.state.selectedLanguages,
    })
  }
  
  const selectedLanguages = new SelectedLanguages({
  	target: target
  })
}

App의 setState메서드가 호출될 때 SelectedLanguages의 setState메서드도 함께 호출되도록 해준다.