*-커비 프로젝트-*

 

  키보드 입력받기

 

키보드 이벤트는 키를 누르거나 뗄 때 발생한다. 

이벤트 처리를 위한 콜백 함수를 설정하면 된다.

 

 키보드 이밴트 객체에는 down / up 된 키에 대한 메타 정보들이 담겨있다. 

일단 어떻게 해야할지 몰라서 onClick에 함수를 담고 그 안에 키 이벤트를 받는 함수를 넣어서 출력해봤다. 

이걸로 오른쪽 방향키는 ArrowRight라는 것을 알아냈다,,,검색하면 나오겠지만. 

 그리고 함수에서 꺼내서 자바스크립트 영역에 이렇게만 써봤는데 이렇게 해도 키이벤트값을 받아온다.

 

import * as S from "./BoardMain.styles";

export default function BoardMainUI() {
  window.onkeydown = (d) => console.log(d);

  return (
    <div>
      <S.Kirby src="/img/kirby-ddung.gif" />
    </div>
  );
}

윈도우에 d를 입력하면 콘솔에 찍히는데, 핸들이 있는 윈도우를 의미하는 것 같다. 다른 창에서 눌러도 인식 안 함

 

 

https://ko.reactjs.org/docs/events.html#keyboard-events

합성 이벤트(SyntheticEvent) – React

 

리액트에서 Keyboard 이벤트

onKeyDown      onKeyPress      onKeyUp

boolean altKey
number charCode
boolean ctrlKey
boolean getModifierState(key)
string key
number keyCode
string locale
number location
boolean metaKey
boolean repeat
boolean shiftKey
number which

 

말은 사라지지만 댓글은 남습니다.

이러면 값이 없을 때 괄호랑 ,가 보여서... 어떡하지?!

05/24결국 오늘 커비를 움직이는 것엔 실패했다.

 

ref를 써봐야겠음