key vs code vs keyCode + IME 이슈

key, keyCode, 그리고 code는 브라우저에서 키보드 이벤트를 처리할 때 사용되는 속성입니다.

key

사용자가 누른 키의 "값"을 나타냄.

• 사용자가 입력한 문자를 반환합니다.
• 문자나 키의 실제 값을 기반으로 제공되며, 대소문자 구분이 포함됩니다.
• 로케일에 따라 달라질 수 있음 (예: 다른 키보드 레이아웃).

document.addEventListener('keydown', (event) => {
  console.log(event.key); // 'a', 'A', '1', 'Enter', etc.
});

key는 한글 입력시 Process가 출력됩니다.

  const keydown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    console.log(e.key);
    if (e.key === "Enter") {
      e.preventDefault();
      addClickHandler();
    }
  };

한글은 조합문자이기 때문에 한글을 입력하고 e.key를 출력해보면 Process가 출력되고
그 상태에서 Enter를 입력하면 Process가 한번 더 출력된 후, Enter가 입력됩니다.
mac에서는 list가 두 번 생성되는 이슈도 있습니다.

이를 막기 위해 다음과 같이 코드를 수정해줍니다.

  const keydown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.nativeEvent.isComposing) return;
    console.log(e.key);
    if (e.key === "Enter") {
      e.preventDefault();
      addClickHandler();
    }
  };

e.nativeEvent.isComposing 속성을 사용해 한글 입력 중인지 확인하고, 한글 입력 중에는 keydown 이벤트를 처리하지 않는 방식입니다.
이 방식은 IME(입력기) 사용 시 발생할 수 있는 문제를 해결합니다.

Process가 두 번 출력되는 현상이 해결되었습니다.

code

키보드의 물리적 위치에 해당하는 문자열을 반환.

• 키보드의 물리적 레이아웃에 따라 결정됩니다.
• 키보드 레이아웃에 따라 값이 동일 (로케일 무관).
• 대소문자 구분이 없고, 일반적으로 하드웨어 키의 이름을 반환.

document.addEventListener('keydown', (event) => {
  console.log(event.code); // 'KeyA', 'Enter', 'ArrowUp', etc.
});

keyCode

사용자가 누른 키에 대응하는 고유 숫자 값(Deprecated).

• 키보드의 물리적 키에 매핑된 숫자 코드.
• 오래된 API이며 현재는 사용이 권장되지 않음.(더 이상 최신 브라우저에서 지원되지 않음)
• 숫자로 제공되며, 모든 브라우저에서 완벽히 일관되게 작동하지 않을 수 있음.

document.addEventListener('keydown', (event) => {
  console.log(event.keyCode); // 숫자 값: 65 (A), 13 (Enter), etc.
});