OnKeyPress는 왜 ESC가 인식이 안될까?(React.키 이벤트 처리)

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을 사용하는 것이 좋습니다.

MDN – keypress event


왜 onKeyPress에서 ESC가 동작하지 않을까?

onKeyPress는 기본적으로 ESC가 눌려졌을 때 이벤트가 생성되지 않기 때문입니다.

onKeyPress는 ESC, CTRL, ALT 등 function 기능을 갖는 키를 제외하고 알파벳과 숫자 키에서만 이벤트가 생성됩니다.

하지만 onKeyDown, onKeyUp은 onKeyPress에서 인식되지 기능 키들도 인식이 됩니다.

또한 onKeyPress는 이제 더 이상 지원되지 않는다고 하니 기본적으로는 onKeyDown을 사용하고 상황에 따라 onKeyUp을 사용하면 큰 문제 없이 원하는 방식으로 구현할 수 있을 것입니다.

각 키 값과 이슈 관련 페이지를 링크로 남기겠습니다.


키 코드를 직접 입력해보면서 알 수 있는 사이트 -> https://keycode.info/

관련 이슈 -> https://github.com/Leaflet/Leaflet/issues/5234