TodoContainer.js
const handelCheckEnter = (e) =>{
if(e.key === 'Enter' && e.nativeEvent.isComposing===false){
handleClickAddBtn()
}
}
AddBtn.js
<input className='addInput'
placeholder="할일 입력"
onChange={(e) => {
setAddlist(e.target.value);
}}
onKeyDown={onCheckEnter}
/>
엔터키 입력시 리스트추가 기능 구현 시
onKeyPress를 사용하니 줄이 그어져있어 검색한 결과 더이상 지원하지 않아서 추후 문제가 될수있다는 내용이 있었음
=>onKeyDown이벤트 사용
onKeyDown이벤트를 사용하니 영어는 제대로 입력되는데 한글입력시 두번 입력되는 상황이 발생함
검색결과: 한글은 조합문이라 '이' 에서 '인, 임'등으로 변화할수있어 단어가 끝난지 알수가없어서 이벤트가 두번 발생함
따라서 keyDown을 쓰고 event.nativeEvent.isComposing()도 사용해야한다. event.nativeEvent.isComposing()은 boolean값으로만 읽히기때문에 이벤트가 두번 발생하는걸 방지하기 위해서는 false값을 줘야함