onKeyPress is deprecated!

onKeyPress

react에서의 onKeyPress 이벤트는 컴포넌트에서 키보드 키가 눌러졌을 때 발생하는 이벤트 핸들러이다. 이 이벤트는 키를 누를 때마다 발생하며, 눌린 키에 해당하는 작업을 수행하거나 상태를 업데이트하는 데에 사용된다.

deprecated?

하지만 이 이벤트는 공식적으로 deprecated되었다. deprecated란 해당 기능을 지원하는 곳에서 성능 감소 또는 업그레이드된 기능 출시 등의 다양한 이유로 인해 공식적으로 사용을 권장하지 않는단 뜻이다. 일부 브라우저는 여전히 지원하지만 관련 웹 표준에서 이미 제거되었거나 삭제 중이거나 호환성 목적으로만 유지되었을 수 있기에 사용을 지양해야한다.

onKeyDown or onKeyUp

onKeyPress 이벤트 대신 onKeyDown 혹은 onKeyUp 이벤트를 사용하면된다.

• onKeyDown
  이 이벤트는 사용자가 키를 누를 때 발생한다. 키가 눌려지는 즉시 발생하며, 키가 눌러졌을 때 수행되어야 할 작업에 사용된다. 이벤트 객체에서 눌린 키의 정보를 얻을 수 있다.

• onKeyUp
  이 이벤트는 사용자가 키를 누르고 키를 떼었을 때 발생한다. 키가 눌려졌다가 떼어지는 순간에 발생한다.

// 인자로 받는 타입은 다음과 같이 지정할 수 있다.
const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
  // 키가 눌렸을 때 수행될 작업
  console.log('Key down:', event.key);
};

const handleKeyUp = (event: React.KeyboardEvent<HTMLInputElement>) => {
  // 키가 떼어졌을 때 수행될 작업
  console.log('Key up:', event.key);
};

return (
  <div>
    <input      
      onKeyDown={handleKeyDown}
      onKeyUp={handleKeyUp}
    />
  </div>
);