프로그래머스 프로그래밍 언어 검색 (4) language 선택 기능 구현

(4) language 선택 기능 구현

- Suggestion.js

export default function Suggestion({target, setSelectedLanguages}){
  // ... 이전 코드
  this.state = {
    searchResult: [],
    selectedIndex: 0,
  }
  
  window.addEventListener('keyup',(e)=>{
    const activateKey = ['ArrowUp','ArrowDown'];
    const lastIndex = searchResult.length - 1;
    
    if(activateKey.includes(e.key){
      switch(e.key){
      case 'ArrowUp':
        this.setState({
          selectedIndex: selectedIndex === 0 ? lastIndex : selectedIndex - 1
        });
      break;
      
      case 'ArrowDown':
      this.setState({
          selectedIndex: selectedIndex === lastIndex ? 0 : selectedIndex + 1
        });
      break;
      
      case 'Enter':
      setSelectedLanguages(
        this.state.searchResult[this.state.selectedIndex]
      );
      break;
      }
    }
    
  });
  
  this.element.addEventListener('click',(e)=>{
    setSelectedLanguages(e.target.innerHTML);
  }
  
}

keyup 이벤트를 통해 방향키 위, 아래키를 입력하면 selectedIndex가 변하고, Enter가 입력되면 selectedIndex에 해당하는 language를 App의 프로퍼티에 추가한다. 또, 마우스 클릭 이벤트가 발생할 시 해당 노드의 innerHTML 값을 App의 프로퍼티에 추가한다.

- App 추가

export default function App({target}){
  // ... 이전 코드
  
  const suggestion = new Suggestion({
  	target: target,
    setSelectedLanguages: (language) => {
      let selectedLanguagesQueue = [...this.state.selectedLanguages, language];
      
      if(selectedLanguagesQueue.length > 5){
        selectedLanguagesQueue.shift();
      }
      this.setState({
      	selectedLanguages: selectedLanguagesQueue;
      });
    }
  });
    
}

suggestion 객체를 생성할 때 language를 넘겨받으면 그 값을 App의 selectedLanguages프로퍼티에 추가한다. 단, language를 추가한 후 selectedLanguages의 길이가 5가 넘어간다면 shift() 메서드를 사용하여 맨 앞의 요소를 지워준다.