React 한글 입력 시 두 번 입력 이슈

한글 입력 시 두번 입력되는 이슈가 있었다. ㅠㅠ
해당 이슈가 생기는 코드는 아래와 같고 onKeyDown 실행 시 이슈가 발생하는 것이다.

const addTag = () => {
  if (newTag) {
    appendTag({ name: newTag });
    setNewTag('');
  }
};

...

<Input
  name="newTag"
  label="Tags"
  value={newTag}
  onChange={(e) => setNewTag(e.target.value)}
  onKeyDown={(e) => {
    if (e.key === 'Enter') {
      e.preventDefault();
      addTag();
    }
  }}
/>

이슈 원인 : IME(input method editor)

한글뿐만 아니라 일본어, 중국어 등 문자를 조합하여 입력하는 언어는 아직 문자가 조합 중인 경우, 해당 이슈가 발생하는 것이다.

onKeyPress

해당 이슈를 구글에 검색하면 가장 처음 나오는 것이 onKeyPress이다.
onKeyPress는 문자가 생성될 때 발생하는 이벤트고 onKeyPress를 사용했을 땐 해당 이슈가 해결된다.

하지만 onKeyPress는 deprecated 되었다고 누가봐도 쓰지말라고 아예 줄이 그어져있다.

isComposing

그럼 근본적으로 문자를 조합 중인지 아닌지 알 수 있는 방법이 없을까? 하며 검색해보다 isComposing를 발견했다.

isComposing는 값이 조합 중인지의 상태를 boolean으로 반환해준다.
isComposing의 값은 event객체의 nativeEvent에 접근하여 확인할 수 있다.

const addTag = () => {
  if (newTag) {
    appendTag({ name: newTag });
    setNewTag('');
  }
};

...

<Input
  name="newTag"
  label="Tags"
  value={newTag}
  onChange={(e) => setNewTag(e.target.value)}
  onKeyDown={(e) => {
    if (e.key === 'Enter' && !e.nativeEvent.isComposing) {  // 이 부분
      e.preventDefault();
      addTag();
    }
  }}
/>

isComposing를 사용하여 위와 같이 코드를 작성했더니 해당 이슈가 완전히 해결되었다.

굿👍

---

너무 오랜만이다,,~
작업하면서 알게 되는 것들 다 적어놓으려고 했는데 업무하기 바쁘다 ㅎㅎ ㅠ
그래도 시간날 때마다 간단하게라도 틈틈이 작성하자💪