본문 바로가기
👩‍💻 Programming/My Projects

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

by codingBear 2022. 9. 7.
728x90
반응형

들어가며

 얼마 전에 만든 계산기에 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

들어가며  개인 사이드 프로젝트로 재무관리 앱을 만들고 있는데 기능 중 하나로 계산기를 추가하고 싶었다. 언뜻 보기에는 계산기 그까이꺼 사칙연산만 대충 구현하면 되는 거 아닌가?!?! 싶어

gdk01.tistory.com

keydown event

 

Element: keydown event - Web APIs | MDN

The keydown event is fired when a key is pressed.

developer.mozilla.org

isNaN()

 

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

 

728x90
반응형

댓글