[React] onKeyDown 이벤트로 enter 검색 구현하기!

 

 위처럼 input의 값을 읽어와서 무언가 이벤트를 발생시킬 때 button을 일일이 클릭하자니 귀찮았다. enter키를 눌러 검색을 구현할 수 없을까 해서 찾아보니 'onKeyDown'을 활용하면 된다고 나왔다.

 

 

우선 값을 읽어올 input에 onKeyDown을 적용하고 키보드의 키를 누를 때 console.log를 찍어보면 3번째 사진과 같이 key 프로퍼티에 방금 누른 키가 값으로 할당됨을 볼 수 있다. 따라서 활용하고자 하는 함수에 조건문을 걸어 e.key의 값이 'Enter'가 아닐 경우 return되게 하면 엔터키를 눌렀을 때 특정 함수가 실행되도록 구현할 수 있다.

---

함께 보기

https://www.w3schools.com/jsref/event_onkeydown.asp

onkeydown Event

https://itprogramming119.tistory.com/entry/React-onKeyDown-onKeyUp-onKeyPress-%EC%B0%A8%EC%9D%B4

[React] onKeyDown, onKeyUp, onKeyPress 차이