React onKeyDown 이용하기

onKeyDown으로 enter키 이벤트 만들기

button을 클릭해서 todo를 저장하는 기능을 구현했다.
하나 입력하고 저장 클릭하고, 하나 입력하고 저장 클릭하고, 하나 입력하고...Enter키로 저장이 되는 기능을 구현하면 마우스로 손을 옮기지 않아도 편하겠다고 생각했다.

검색 결과 onKeyPress 속성이 많이 나와 사용해보려 했지만 지원하지 않는다는 문구가 나왔다.
다른 key 이벤트에는 onKeyDown, onKeyUp 두가지 종류가 있다.

onKeyDown : 키보드를 누를 때 실행
onKeyUp : 키보드에서 손을 뗄 때 실행

  const handleEnter = (e) => {
    if (e.key === "Enter") {
      handleSubmit();
    }
  };

<input onKeyDown={handleEnter} />

입력받는 키가 "Enter"키를 비교하여 같은 경우 입력한 값이 제출되는 handleSubmit() 함수가 실행되는 함수를 만들었다.
입력하는 input의 속성으로 입력해준다.

button을 클릭하지 않고 Enter 키를 누르면 제출된다.