728x90 반응형 event2 [My Projects] 계산기에 onKeyDown 이벤트 적용하기! 들어가며 얼마 전에 만든 계산기에 onKeyDown 이벤트를 추가했다. 기능 구현은 생각보다 간단했는데 미처 발견하지 못했던 자잘한 버그들이 발생했고 잡는 데 꽤 애를 먹었다. 리팩토링을 거치긴 해야 할 텐데 함수마다 조건문을 무지성으로 휘갈겨놓은 탓에 어디서부터 손을 봐야 할지 감이 잡히질 않는다. 무튼 키보드로 계산기를 조작하는 데 필요한 코드들을 설명해보겠다! onKeyDown 이벤트 구현 코드 const handleKeyDown = (e: React.KeyboardEvent) => { const key = e.key; if (!isNaN(+key) && totalNumber) { handleReset(); if (inputValChecker(inputNumber, key)) { setInputNu.. 2022. 9. 7. [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 Even.. 2022. 9. 6. 이전 1 다음 728x90 반응형
