Key 입력을 처리하는 속성
리액트 input에서 키 입력 이벤트를 처리할 때 onKeyPress, onKeyDown, onKeyUp 이벤트를 사용합니다.
자바스크립트와 같은 명칭의 속성들을 리액트는 camel case로 표기합니다.
다음과 같이 사용합니다.
const onKeyPress= e => {
if(e.key==='Enter'){
findExecute();
}
}
........
<div onKeyPress={onKeyPress}>click</div>
이벤트가 발생하는 시점이 조금씩 다를 뿐 사용 방법은 같습니다.
그리고 각 이벤트 별 특징은 다음과 같습니다.
onKeyDown 👉 이벤트가 먼저 실행
onKeyUp 👉 text가 입력되면 실행
onKeyPress 👉 text 입력이 완료되면 실행 (Deprecated)
MDN의 공식 문서를 보면 이제 onKeyPress는 더 이상 사용되지 않는다고 하니 거의 비슷하게 동작하는 onKeyDown을 사용하는 것이 좋습니다.
왜 onKeyPress에서 ESC가 동작하지 않을까?
onKeyPress는 기본적으로 ESC가 눌려졌을 때 이벤트가 생성되지 않기 때문입니다.
onKeyPress는 ESC, CTRL, ALT 등 function 기능을 갖는 키를 제외하고 알파벳과 숫자 키에서만 이벤트가 생성됩니다.
하지만 onKeyDown, onKeyUp은 onKeyPress에서 인식되지 기능 키들도 인식이 됩니다.
또한 onKeyPress는 이제 더 이상 지원되지 않는다고 하니 기본적으로는 onKeyDown을 사용하고 상황에 따라 onKeyUp을 사용하면 큰 문제 없이 원하는 방식으로 구현할 수 있을 것입니다.
각 키 값과 이슈 관련 페이지를 링크로 남기겠습니다.
키 코드를 직접 입력해보면서 알 수 있는 사이트 -> https://keycode.info/