이벤트 흐름(키보드, 마우스, form 입력)

문제(정리하게 된 배경)

검색 키워드 다중 추가를 엔터 키 입력으로 처리하는 키보드 입력 이벤트 리스너를 onKeyDown에 달았다가,

“뒷글자 하나 더 추가요” 문제 발생.

알고보니, 한글 IME 때문에 Enter가 두 번 취급되어 발생한다고.(조합 중인 상태에서 Enter → 조합 확정 + 실제 Enter)

onKeyDown은 조합 중에도 먼저 불려서 위 현상이 발생.

해결법은 3 개 인데

1. if (e.nativeEvent.isComposing || e.keyCode === 229) return; 코드 추가 (IME 조합 중이면 무시)
2. onKeyDown이 아니라, onKeyUp 에 달기
3. 키 이벤트 대신 “폼 제출”로 처리하기 (onSubmit)

난 2번으로 해결했었고, onKeyDown~onKeyUp 순서에 대해 깊은 생각과 함께 이 글을 찌게 되었는데…

3번 onSubmit이 낫다는 걸 방금 알게 되었다 😂

엔터키는요…

• 원래 제출 행동이라 추가 키 핸들러 없이 잘 동작함;
• 이러한 onSubmit 방식이 IME/브라우저 케이스 전반에 가장 튼튼

각종 2벤트 흐름을 알아보자

1. 키보드 이벤트 흐름

onKeyDown → onKeyPress (사라질 예정)→ onChange → onKeyUp

① onKeyDown

• 키가 눌리는 순간 발생
• 한 번 누르고 있으면 키가 계속 눌린 상태로 반복 발생(키 반복 이벤트)
• 문자키, 기능키(F1~F12, Shift, Ctrl, Alt 등) 모두 감지 가능

② onKeyPress (사라질 예정)

• 문자 입력이 가능한 키를 눌렀을 때만 발생
• Shift, Ctrl 같은 비문자키는 발생 X
• 현재는 onBeforeInput 또는 onKeyDown 사용 권장

③ onChange

• input, textarea 등의 값이 실제로 변했을 때 발생
• 키보드 입력뿐만 아니라, 붙여넣기·삭제·자동완성 같은 값 변경도 포함
• React에서는 HTML의 input 이벤트를 감싼 형태로, 값 변경이 완료되면 ‘한 번’ 호출

④ onKeyUp

• 키를 뗀 순간 발생
• 키를 오래 눌렀다면 마지막 onKeyDown 반복 후 발생

2. 마우스 이벤트 흐름

onMouseDown → onMouseMove(드래그 중) → onMouseUp → onClick (→ onDoubleClick : 더블 클릭 시 발생)

3. 폼 입력 이벤트 흐름

onFocus → onInput(실시간 값 변경) → onChange(최종 변경) → onBlur

• onChange는 포커스를 잃거나 엔터를 칠 때 발생하는 경우도 있음(React에서는 즉시 반영됨)
• 유효성 검사 로직 짤 때 중요