[TIL] React Native 에서 External Keyboard 입력 잡아내기 - 실패

햄스터아저씨·2022년 1월 11일
0

3시간 가량 찾아봤으나, 해법을 찾지 못함.

  1. 기본피쳐 확인
    우선 device에 블루투스 외부키보드를 연결하고 https://en.key-test.ru/ 에서 ctrl, alt, shift 키가 각기 별도로 입력되는지 확인했다. 결과 device에서 각 키를 구분해서 인식한다는 것은 확인했다. 이제 react-native 에서 사용할 수 있는지만 확인하면 된다.

  2. Keyboard 관련
    https://reactnative.dev/docs/keyboard#addlistener
    우선 React Native 에서 Keyboard는 외부 키보드가 아닌 화면에 뜨는 UI 키보드를 의미한다. 폰에서 keyboard 는 뜨는 시점과 사라지는 것, size가 중요하다. 즉 웹에서의 키보드와는 아예 다르다.
    React 의 Keyboard 컴포넌트와 달리 addEventListener 에 추가할 수 있는 이벤트 종류가 적다. 우선 keydown 이벤트가 없어서, ctrl 키를 당연히 감지할 수 없다.

    keyboardWillShow
    keyboardDidShow
    keyboardWillHide
    keyboardDidHide
    keyboardWillChangeFrame
    keyboardDidChangeFrame

  1. TextInput 관련
    onKeyPress 속성에 희망을 걸어봤다
    이 속성은 일반 글자키와 Enter 까지는 이해하지만, modifier keys들 (ctrl, alt, shift 등)을 감지하지 못한다.
    그리고 특수키가 한번이라도 입력되면, 그 때부터는 아예 감지하지 못한다.
    아래와 같은 형식으로 쓴다.
onKeyPress={(e) => {
    if(e.nativeEvent.key == "Enter"){
        ...
    }
  1. react-native-keyevent 라이브러리 사용
    https://github.com/kevinejohn/react-native-keyevent
    마지막 커밋이 2년 전이라 큰 기대는 안했지만 역시나...
    외부 키보드 검색시 연관성이 높게 나오는 라이브러리였으나, 일반 키도 감지하지 못했다.

  2. node_modules 파일분석
    node_modules > react > index.d.tsKeyboardEvent 인터페이스 내에는 altKey, ctrlKey, shiftKey 속성이 있지만, node_modules > react-native > index.d.ts 에는 해당 속성이 없다... 즉 React Native 차원에서 ctrl 키를 별도로 감지하는게 불가능 할 가능성이 높다는 것.

  3. stackoverflow 조사
    마찬가지로 별 소득이 없었다. react native 로 검색해도 대다수는 react 문서가 나오고, 그나마 간간히 나오는 native 글에도 react 에서만 가능한 방법이 적혀있다던가 그런 식이다.
    혹은 react native 에서는 안된다는 뜻.
    https://stackoverflow.com/questions/43204272/react-native-key-board-events

  4. 배운 것
    그나마 이번 조사를 통해 알게된 것들

profile
서버도 하고 웹도 하고 시스템이나 인프라나 네트워크나 그냥 다 함.

0개의 댓글