들어가며
얼마 전에 만든 계산기에 onKeyDown 이벤트를 추가했다. 기능 구현은 생각보다 간단했는데 미처 발견하지 못했던 자잘한 버그들이 발생했고 잡는 데 꽤 애를 먹었다. 리팩토링을 거치긴 해야 할 텐데 함수마다 조건문을 무지성으로 휘갈겨놓은 탓에 어디서부터 손을 봐야 할지 감이 잡히질 않는다.
무튼 키보드로 계산기를 조작하는 데 필요한 코드들을 설명해보겠다!
onKeyDown 이벤트 구현 코드
const handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => { const key = e.key; if (!isNaN(+key) && totalNumber) { handleReset(); if (inputValChecker(inputNumber, key)) { setInputNumber(inputNumber + key); setIsTotal(false); } } if (!isNaN(+key) && inputValChecker(inputNumber, key)) { setInputNumber(inputNumber + key); setIsTotal(false); } if (key === '+' || key === '-' || key === '*' || key === '/') { operate(key); setMiddleNumber(''); setInputNumber(''); setTotalNumber(''); setIsTotal(false); setIsComplete(true); } if (key === '=') { evaluate(); } if (key === 'Backspace') { handleDelete(); } if (key === 'Escape' || key === 'r') { handleReset(); } if (key === 'p') { handleChangePercent(); } if (key === 's') { handleChangeSign(); } if (key === 'h') { handleCalHistoryToggle(); } };
일단 최상단 div태그에 onKeyDown을 입력하여 키보드 입력값을 받아 입력값이 if문의 조건을 충족하면 해당 함수를 실행하는 식으로 코드를 짰다. onKeyDown 이벤트를 통해 어떤 키를 입력받았는지는 이벤트의 'key' 프로퍼티를 참조하면 알 수 있다.
맨 위의 두 if문은 isNaN을 활용하여 입력 받은 값이 숫자이면서 다른 조건까지 충족할 경우 inputNumber에 입력값을 설정하도록 짠 조건문이다. 나머지는 연산자나 백스페이스 등 특정 키를 누르면 해당하는 입력값의 동작을 수행하도록 짠 코드이다.
함께 보기
[My Projects] 리액트로 계산기 만들기! feat. TypeScript
들어가며 개인 사이드 프로젝트로 재무관리 앱을 만들고 있는데 기능 중 하나로 계산기를 추가하고 싶었다. 언뜻 보기에는 계산기 그까이꺼 사칙연산만 대충 구현하면 되는 거 아닌가?!?! 싶어
gdk01.tistory.com
Element: keydown event - Web APIs | MDN
The keydown event is fired when a key is pressed.
developer.mozilla.org
isNaN() - JavaScript | MDN
The isNaN() function determines whether a value is NaN or not. Because coercion inside the isNaN function can be surprising, you may alternatively want to use Number.isNaN().
developer.mozilla.org
'👩💻 Programming > My Projects' 카테고리의 다른 글
[My Projects] 리액트로 계산기 만들기! feat. TypeScript (0) | 2022.09.05 |
---|
댓글