[My Projects] 계산기에 onKeyDown 이벤트 적용하기!

들어가며

 얼마 전에 만든 계산기에 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에 입력값을 설정하도록 짠 조건문이다. 나머지는 연산자나 백스페이스 등 특정 키를 누르면 해당하는 입력값의 동작을 수행하도록 짠 코드이다.

---

함께 보기

https://gdk01.tistory.com/155

[My Projects] 리액트로 계산기 만들기! feat. TypeScript

keydown event

Element: keydown event - Web APIs | MDN

isNaN()

isNaN() - JavaScript | MDN