[React] 이벤트를 활용하여 키보드 인식하기

이번 글은 이벤트를 활용하여 어떤 키보드 버튼이 눌렸는지 인식하는 법에 대한 글이다.

 

---

 

[ 활용 실습 ]

keyCode에서 13번은 enter버튼을 의미한다.

아래 코드는 만약 이벤트가 enter 버튼이 눌렸을 경우 onClickAdd()를 실행한다는 의미가 된다.

const onKeyDown=(e)=>{
    if(e.keyCode===13){
      onClickAdd();
    }
  }

 

=> input에 키가 눌렸을 때 onKeyDown이 실행되고 이때 enter가 눌렸다면 키 코드가 13번이 맞으므로 함수 내부가 실행됨

return (
	<div>
    <input> onKeyDown={onKeyDown} </input>
    </div>
    );

 

 

---