[트러블슈팅] 한글 입력 시 중복 등록 문제 해결하기🔥

이번에 zustand를 사용해서 todo-app을 구현하려고 하는데…

상태관리도 사용하기 전에 .. 문제가 발생했다

한글을 입력하면 중복으로 입력되는 문제인데 ,, 스트레스 가득 😣

한글을 적으면 이렇게 중복으로 입력된다🙄

웃긴게 영어로 등록하면 정상적으로 입력되는 걸 확인 가능하다

이걸 보고 한글 문제인 것을 알 수 있었다 🙌🏻

문제가 발생한 이유는 한글 IME(입력기)의 조합 과정에서 onKeyDown 또는 onChange 이벤트가 예상치 못하게 트리거되기 때문인데.. 한글 입력이 조합 중일 때와 조합 완료 후 이벤트가 다르게 동작하기 때문에 발생하는 것..!!!!

이를 해결하기 위해서 기존 코드에서 | IME 입력 상태를 관리하는 로직을 추가했다

1. onCompositionStart

   • 한글 조합이 시작될 때 호출

   • setIsComposing(true)를 실행하여 현재 한글 조합 중

2. onCompositionEnd

   • 한글 조합이 완료될 때 호출

   • setIsComposing(false)를 실행하여 한글 조합이 끝났음

const [isComposing, setIsComposing] = useState(false);

const handleKeyPress = (e) => {
  if (e.key === "Enter" && !isComposing) {// IME 조합 중이 아닐 때만 처리
    e.preventDefault(); 
    handleAddTodo();
  }
};

<input
  type="text"
  placeholder="오늘 할 일을 적어주세요"
  value={todoList}
  onChange={(e) => setTodoList(e.target.value)} 
  onKeyDown={handleKeyPress}
  onCompositionStart={() => setIsComposing(true)} 
  onCompositionEnd={() => setIsComposing(false)} 
/>

완료..👍🏻

이제 zustand를 사용해서 todo-app을 구현하러 갑니다🔥