*-커비 프로젝트-* 움직인다!
마우스 이벤트와 달리, 타입스크립트는 InputEvent에 대한 유형 선언을 제공하지 않는다. 대신 KeyboardEvent 를 사용한다.
import {KeyboardEvent} from 'react';Next.js 사용하기 때문에 React는 따로 import 하지 않았다.
매개변수 e로 KeyboardEvent를 받는데 뒤에 :void 를 안 썼더니 아래와 같은 오류가 나왔다.
: void 붙여줌
import { useState, KeyboardEvent, useEffect } from "react";useState, useEffect 추가
useEffect(() => {
const handleKey = (event) => {
if (event.key === "ArrowRight") {
console.log(event);
console.log("헐대박들어온더");
setMargin((prev) => prev + 1);
console.log(margin);
}
};
window.addEventListener("keydown", handleKey); // 있으면 뚝뚝 끊기며 크게 이동...뭐하는애지
});
🪟window.addEventListener
지정한 유형의 이벤트를 수신할 때마다 호출할 함수를 설정한다.
addEventListener(type, listener);
addEventListener(type, listener, options);
addEventListener(type, listener, useCapture);type : 수신할 이벤트 유형
listener : 지정한 이벤트를 수신할 객체, EventListener 인터페이스를 구현하는 객체거나, JavaScript 함수여야 한다.
options : 이벤트 수신기의 특징을 지정할 수 있는 객체
- capture : EventTarget으로 이벤트가 전달되기 전에 listener 먼저 발동되어야 할 지 true/false 설정
- once : listener가 한 번만 동작해야함 true/false
- passive : true면 listener 내에서 절대 preventDefault() 를 호출하지 않음 true/false
- signal : AbortSignal(요청이 취소되었는지, 그렇지 않은지)
https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener