새싹 키우기

사칙연산 만들기

input 창에 들어온 수를 인자로 이전 값에 사칙연산 연속 적용하기.

내가 짠 코드

첨에 이렇게 짰다.

import { useState, useEffect } from 'react';
import './App.css';

function App() {
  const [inputValue, setInputValue] = useState(0); // 입력된 값
  const [method, setMethod] = useState(""); // 연산자
  const [result, setResult] = useState(0); // 연산 결과

  // 입력값 업데이트
  const handleInputChange = (event) => {
    setInputValue(Number(event.target.value)); // 입력값을 숫자로 변환
  };

  // 연산 처리 함수
  const calculate = () => {
    setResult((prevResult) => {
      switch (method) {
        case '+':
          return prevResult + inputValue;
        case '-':
          return prevResult - inputValue;
        case '*':
          return prevResult * inputValue;
        case '/':
          return inputValue !== 0 ? prevResult / inputValue : prevResult; // 0으로 나누는 경우 방지
        default:
          return prevResult;
      }
    });
  };



  return (
    <>
      <input 
        type="number" 
        placeholder="숫자를 입력하세요"
        value={inputValue}
        onChange={handleInputChange}
      />
      
      <button onClick={() => {
        setMethod('+');
        calculate();
      }}>➕</button>

      <button onClick={() => {
        setMethod('-');
        calculate();
      }}>➖</button>

      <button onClick={() => {
        setMethod('*')
        calculate();
      }}>✖</button>

      <button onClick={() => {
        setMethod('/')
        calculate();
        }}>➗</button>

      <h2>결과: {result}</h2>
    </>
  );
}

export default App;

내가 낸 에러

에러?라기보다는 연산버튼을 연속으로 누르면 이전 연산자가 적용된 결과가 나오는 모습이 보였다.
딱봐도 이거 상태변화를 감지하지못한 어쩌구.. 리액트의 작동원리 어쩌구.. 에 관련된 문제인 것 같았다.

그럴때는 useEffect를 사용 해주면 된다.

  // method가 변경될 때마다 연산 수행
  useEffect(() => {
    if (method) {
      calculate(); // 연산 함수 호출
    }
  }, [method]); // method가 변경될 때만 실행

이걸 딱 넣어주면 뒤에 의존성 배열에 의해 method값이 변경될때 method가 비었는지를 확인하고 calculate()를 실행해주게된다.