수업내용
QnA
Q_ 검색이 완료된 후 this.target.value = '' 처리, 하지만 다음 input 에 텍스트를 입력하면 이전에 입력했던 단어의 마지막 글자가 나와서 수동으로 지워주어야함. 어떤 키워드로 구글링을 해보면 좋을지 난해.
A_ 영어와 달리 한글의 경우 글자를 타이핑할 때 CompositionEvent(compositionstart, compositionupdate, compositionend)를 타는데, event listener의 callback 내부에서 onSearch를 한 뒤 값을 초기화시켜도 한글의 경우 compositionend가 되지 않았기 때문에, 마지막 글자가 남아있는 것.
현재 상태에서 재빠르게 스페이스바나 방향키를 누른 뒤, input에 값을 입력하면 남아있는 글자가 없는 것을 알 수 있음.
한글이 compositionend가 되려면 뒤에 whitespace(space, enter) 혹은 우측 방향키 같은 키들이 필요. 두 가지 방법이 있을 수 있음. (표준이 있거나 다른 좋은 방법이 있을 수도 있음)
Review1
[...this.state.searchHistories]
-> this.state.searchHistories
Review2
const searchHistories = [...this.state.searchHistories]
넣을 필요 없음this.setState({ searchResults, searchHistories })
const searchHistories = [...this.state.searchHistories]
삭제 this.setState({ searchResults, searchHistories })
-> this.setState({ ...this.state, searchResults })
Review3
filter
는 새로운 배열을 생성하기 때문에 스프레드 기법이 필요 없음const nextHistories = [...this.state.searchHistories].filter((target) => target !== this.state.searchHistories[itemIndex])
-> const nextHistories = this.state.searchHistories.filter((target) => target !== this.state.searchHistories[itemIndex])
Review4
this.state
가 빈배열일 경우 체크Array.isArray(this.state) && this.state.length !== 0
빈배열 체크하는 조건 if
문에 추가Review5
this.target.blur()
this.target.value = ''
this.target.focus()