insertAdjacentElement로 요소 추가

---

다음과 그림과 같이 리스트가 주어져 있고 input에 내용을 입력한 뒤 엔터키를 누르게 되면 리스트의 맨 앞에 새로운 키워드 아이템이

추가되도록 구현하고자 한다.

 

keyup/keypress Event로 이벤트 감지

엔터키가 눌렀을 경우 input의 value 값이 리스트에 추가되도록 다음과 같이 코드를 구현하였다.

this.inputElement.addEventListener('keypress', e => {
            let newItem = this.chipTemplate(e.target.value);

            if(e.keyCode === 13) {
                // 새로운 아이템 리스트에 추가
            }
        })

처음에는 keyup 이벤트 핸들러를 등록하여 주었는데 value 값이 한글일 경우 이벤트 발생이 두 번 중독되어 발생하는 오류가 발생하였다.

이에 대신에 keypress 이벤트 핸들러 등록하여 주었고 정상적으로 한글 또한 리스트에 추가되었다.

 

이벤트의 키 코드가 13일 경우 이벤트를 발생하도록 했는데, 여기서 13은 키보드에서 엔터키의 아스키 코드이다.

event.keyCode 는 ASCII 코드에 기반합니다.

 

insertAdjacentElement로 요소 추가

JS 상에서 동적으로 새롭게 만든 아이템 요소를 리스트 컨테이너의 맨 앞에 추가해주기 위해 insertAdjacentElement를 사용하였다.

insertAdjacentElement의 첫 번째 인자에는 요소를 어디 위치에 동적으로 추가해줄 것인지 넣어 줄 수 있다.

• beforebegin: targetElem 그 자체 전에
• afterbegin: targetElem 첫 번째 자식 앞에
• beforeend: 막내 targetElem, 마지막 자식 뒤
• afterend: targetElem 자체 후

if(e.keyCode === 13) {
                this.container.insertAdjacentElement('afterbegin', newItem);
                this.data.unshift(e.target.value);
                e.target.value = '';
            }

removeData(label) { //데이터를 삭제 기능 모듈화
        let targetIndex = this.data.findIndex(item => item === label); 
        this.data.splice(targetIndex, 1);
    }

이때 화면 상에서 랜더링되는 리스트(컴포넌트)말고도 리스트되어 있는 실제 데이터(state)에도 추가 및 삭제에 대한 정보가 반영되어야 하기 때문에 위의 소스 코드와 같이 unshift 와 findIndex 메서드를 사용해 주었다.

unshift() 메서드는 새로운 요소를 배열의 맨 앞쪽에 추가하고, 새로운 길이를 반환합니다.

findIndex() 메서드는 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환합니다.
만족하는 요소가 없으면 -1을 반환합니다.