[코딩온] calculator

간단한 계산기를 만들어보자

일단 전체코드는 아래와 같다.

import { useState } from "react"
import './style.css'

function Calculator() {
    const [inputValue, setInputValue] = useState("");

    function display(value){
        console.log('value')
        setInputValue(inputValue + value)
    }

    function calculate(){
        let answers = eval(inputValue)
        setInputValue(answers)
    }

    function clear() {
        setInputValue("")
    }
  return (
    <>
        <form name="calc" className="calculator">
            <input type="text" className ="value" value={inputValue} readOnly/>
            <span className="num clear" onClick={() => clear()}>C</span>
            <span onClick={() => display("*")}>*</span>
            <span onClick={() => display("/")}>/</span>
            <span onClick={() => display("7")}>7</span>
            <span onClick={() => display("8")}>8</span>
            <span onClick={() => display("9")}>9</span>
            <span onClick={() => display("-")}>-</span>
            <span onClick={() => display("4")}>4</span>
            <span onClick={() => display("5")}>5</span>
            <span onClick={() => display("6")}>6</span>
            <span onClick={() => display("+")}className="plus">+</span>
            <span onClick={() => display("1")}>1</span>
            <span onClick={() => display("2")}>2</span>
            <span onClick={() => display("3")}>3</span>
            <span onClick={() => display("0")}>0</span>
            <span onClick={() => display("00")}>00</span>
            <span onClick={() => display(".")}>.</span>
            <span onClick={() => calculate()}className="num equal">=</span>
        </form>
    </>
  )
}

export default Calculator

계산기에서 useState를 사용하여 입력값을 관리하고 있다. inputValue는 현재 계산기 입력값을 저장하며, setInputValue로 상태를 업데이트한다.

먼저, form을 만들어주고 인풋 필드를 controlled input으로 설정했다. 즉, 입력 필드는 value 속성을 통해 inputValue와 연결되어 있다.

<input type="text" className ="value" value={inputValue} readOnly/>

처음에는 사용자가 직접 키보드로 값을 입력하지 않고, 버튼 클릭으로만 값을 변경하기 때문에 onChange 핸들러를 추가할 필요가 없다고 생각했지만, 숫자를 눌러도 입력값이 보이지 않는 문제가 발생했다. 에러 메시지에 따라 readOnly를 추가해주었더니 해결되었다.

각 버튼에 로직에 맞는 함수를 onClick 이벤트로 연결했다. 콜백 함수를 사용하는 이유는 버튼 클릭 시 인자로 값을 전달하기 위해서다. 인자를 전달해야 할 경우에는 항상 콜백 함수를 사용하는 것이 좋다.

그럼 함수 로직들을 살펴보자.

    function display(value){
        console.log('value')
        setInputValue(inputValue + value)
    }

    function calculate(){
        let answers = eval(inputValue)
        setInputValue(answers)
    }

    function clear() {
        setInputValue("")
    }
    

display함수는 현재 input value에 parameter로 들어온 value를 더해주는 로직이다.

calculate은 eval 메서드를 이용해서 숫자가 아니어도 숫자로 계산되게 해준다. 예를 들어 "2" + "2" 이렇게 있으면 원래는 string 2개 이므로 값이 22가 된다 하지만 eval 메서드를 써주면 이게 숫자처럼 4로 결과 나온다.

마지막으로 clear 함수는 input값을 ""로 초기화 해준다.