1. 문제 상황
- 영어 입력은 문제가 없었지만 한글 입력의 경우 문제 발생했습니다.
- 아래와 같이 입력중이던 마지막 문자가 추천키워드 뒤에 나온다는 것입니다.
2. 원인
- IME의 조합 상태: 한글 IME는 자음과 모음이 조합되는 과정에서 compositionstart, compositionupdate, compositionend 이벤트를 발생시킵니다. React에서 상태 업데이트가 이 조합 중간에 실행되면 한글 입력이 중단되거나 커서 위치가 예기치 않게 이동할 수 있습니다.
- React의 비동기 상태 업데이트: React의 setState는 비동기적으로 상태를 업데이트하므로, 한글 입력 상태에서 Tab 키로 자동완성 텍스트를 추가하려고 할 때 업데이트 순서나 타이밍이 IME 입력 처리와 충돌할 수 있습니다.
3. 해결 방법
IME 입력이 완료된 후에만 자동완성 처리를 하도록 하여 해결할 수 있습니다. 이를 위해 compositionstart와 compositionend 이벤트를 활용하여 IME 상태를 추적하고, Tab 키가 눌렸을 때 IME가 활성화된 상태인지 확인한 후, 필요할 경우 compositionend 이벤트를 강제로 호출하여 입력을 완료 상태로 전환합니다.