Practice) Calculator

 
- 학습 내용

• React
• useState

 
 
- 회 고

 
 

: 예전에 만들다 실패했던 계산기를 만들었다(기능 구현을 하지 못했다). 아이폰 계산기를 모델 삼아 만들어 제 기능을 하는 계산기를 만들었다. mock up에서 각 버튼을 li 요소로 썼지만, 만드는 과정에서 button 요소로 바꾸었다. 
계산기를 만들면서 최근에 배운 React의 useState에 익숙해질 수 있었다(Movie App을 만들며 React를 공부했다). React로 js와 html를 한 번에 작성할 수 있어 나중에 익숙해지면 엄청 편하고 재밌을 것 같다.
이전에 계산기를 만들 때는 html과 css 작업만으로도 벅찼는데, 생각보다 일찍 끝났다. 문제는 역시 기능 구현이었다.
setNum으로 숫자를 설정할 때, 입력값은 숫자지만 문자로 바뀌는 것 때문에 Number()을 계속 사용했었는데, 나중엔 불필요한 경우가 많았다는 것을 늦게 알게 되었다. num값이 이미 string이므로 비교 연산자 사용 시, 굳이 숫자로 바꿔 줄 필요가 없는 것이다. 
마지막에 두 자리 숫자를 받지 못하는 에러를 잡지 못해 한참을 고생했다. 즉, 한 자릿수만 입력 가능했다. 이 문제로만 4시간가량 고민했었는데, 결국 도움을 받아 해결할 수 있었다. 문제는 setNum으로 입력값을 받을 때, 기존에 입력된 값은 무시하고 계속 새로운 값으로 reset 해주었기 때문이었다(즉, 1을 입력받고 다음으로 연산자가 아닌 2를 입력받았을 때, 입력값이 12가 아닌 1이 되는 것). '아...' 하고 이해했지만, 왜 그렇게 한참 동안 문제가 보이지 않았는지... 도움을 줄 수 있는 사람이 옆에 있어 감사함을 느끼는 하루였다. 😍