🚨 이슈 발생

문제는 태그를 작성하는 input에서 발생하였습니다.
텍스트를 입력하고 엔터키를 누르게 되면 알록달록한 태그가 생기게 되는데 영어로 태그를 만들면 아무런 문제가 없지만 한글로 태그를 생성하고 다른 태그를 만드려고 하면 이전에 입력했던 텍스트가 자동으로 입력되는 오류가 발생하였습니다.

🧐 원인분석

처음엔 엔터키를 누르고 input value 값을 초기화를 안 해줘서 생기는 문제인 줄만 알았다.. 하지만 그러면 영어로 입력했을 때도 발생하여야 하는데 그러지 않아서 열심히 검색을 해보며 문제를 찾아보았습니다.

원인 : IME(input method editor) 문제

IME란?

입력기 또는 입력 방식 편집기(input method editor, IME)는 한글, 한자처럼 컴퓨터 자판에 있는 글자보다 수가 더 많은 문자를 계산하거나 조합하여 입력해 주는 시스템 소프트웨어이다.

1. 한글은 자음과 모음이 합쳐져 만들어지는 조합 문자이기 때문에, 글자가 조합 중인지 조합이 완료된 상태인지 파악하기 어려워 이벤트가 중복 호출된다.

2. 현재 코드에서 사용중인 onKeyDown 메서드의 경우, 문자의 입력이 아닌 단순 엔터 키 클릭에 대해 반응하는 메서드이기 때문에 이러한 문제가 발생하는 것으로 생각된다.

🔓 해결

isComposing 사용

KeyboardEvent에는 isComposing이라는 값이 존재하는데, 문자가 조합 중인지를 boolean 값으로 알려준다.

이번 문제는 한글이 조합 중인지 판단하지 못해 발생한 문제라고 생각하여 조건문에 e.nativeEvent.isComposing === false 코드를 추가하여 문제를 해결해 보았습니다.

const onKeyboardAction = (e: KeyboardEvent<HTMLInputElement>) => {
    // 한글 입력 오류 해결 조건문
    if (e.code === "Enter" && e.nativeEvent.isComposing === false) {
      e.preventDefault(); // 이벤트의 기본 동작 막기

      const inputValue = e.currentTarget.value.trim();

      if (inputValue.trim()) {
        //랜덤 색상 값
        const randomColor =
          colorList[Math.floor(Math.random() * colorList.length)];
        setTagList((prev) => [
          ...prev,
          { text: inputValue, color: randomColor },
        ]);
        const previousTags = getValues("tags");
        setValue("tags", [...previousTags, inputValue]);
        setInputState("");
      }
    }