react - redux 이용해서 계산기 만들기

📌redux를 이용해 만든 계산기 기능 

import React from "react";
import { createStore } from "redux";
import { Provider, useDispatch, useSelector } from "react-redux";

// Actions
const ADD_NUMBER = "ADD_NUMBER";
const ADD_OPERATOR = "ADD_OPERATOR";
const CALCULATE_RESULT = "CALCULATE_RESULT";
const CLEAR_DISPLAY = "CLEAR_DISPLAY";

const addNumber = (number) => ({ type: ADD_NUMBER, payload: { number } });
const addOperator = (operator) => ({
  type: ADD_OPERATOR,
  payload: { operator },
});
const calculateResult = () => ({ type: CALCULATE_RESULT });
const clearDisplay = () => ({ type: CLEAR_DISPLAY });

// Reducer
const calculatorReducer = (
  state = { displayValue: "", operator: null, prevValue: null },
  action
) => {
  switch (action.type) {
    case ADD_NUMBER:
      return {
      //객체 전개 연산자(...state)를 사용하여 현재 상태를 복사합니다. 
      // 불변성을 유지하면서 새로운 상태를 생성하는 기본적인 방법입니다.
        ...state,
        displayValue:
          state.displayValue === ""
            ? action.payload.number
            : state.displayValue + action.payload.number,
      };
    case ADD_OPERATOR:
      return {
        ...state,
        operator: action.payload.operator,
        prevValue: state.displayValue,
        displayValue: "0",
      };
      
    case CALCULATE_RESULT:
      const prev = parseFloat(state.prevValue);
      const current = parseFloat(state.displayValue);
      let result;

      switch (state.operator) {
        case "+":
          result = prev + current;
          break;
        case "-":
          result = prev - current;
          break;
        case "×":
          result = prev * current;
          break;
        case "÷":
          result = prev / current;
          break;
        case "%":
          result = (prev / 100) * current;
          break;
        default:
          result = current;
      }

      return {
        ...state,
        displayValue: result.toString(),
        operator: null,
        prevValue: null,
      };
    case CLEAR_DISPLAY:
      return {
        displayValue: "",
        operator: null,
        prevValue: null,
      };
    default:
      return state;
  }
};

// Store
const store = createStore(calculatorReducer);

// App Component
const App = () => {
  const displayValue = useSelector((state) => state.displayValue);
  const dispatch = useDispatch();

  const handleNumberClick = (number) => {
    dispatch(addNumber(number));
  };

  const handleOperatorClick = (operator) => {
    dispatch(addOperator(operator));
  };

  const handleEqualClick = () => {
    dispatch(calculateResult());
  };

  const handleClearClick = () => {
    dispatch(clearDisplay());
  };

  return (
    <div>
      <div>Display: {displayValue}</div>
      {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((number) => (
        <button
          key={number}
          onClick={() => handleNumberClick(number.toString())}
        >
          {number}
        </button>
      ))}
      {["+", "-", "×", "÷", "%"].map((operator) => (
        <button key={operator} onClick={() => handleOperatorClick(operator)}>
          {operator}
        </button>
      ))}
      <button onClick={handleEqualClick}>=</button>
      <button onClick={handleClearClick}>Clear</button>
    </div>
  );
};

// Render
const CalculatorApp = () => (
  <Provider store={store}>
    <App />
    <p className="text-blue-500 text-xl font-bold">tailwindcss 테스트하고 있습니다.</p>
  </Provider>
);

export default CalculatorApp;

 

1. 리듀서(Reducer):
   • calculatorReducer는 현재 상태(state)를 받아서 액션에 따라 새로운 상태를 반환하는 함수이다. 
   • 각각의 액션 타입에 대한 상태 변화 로직이 구현되었다. 
2. 액션(Action): 액션 객체는 type과 payload라는 두 속성을 가지고 있다.
   • type: 액션의 종류를 식별하는 문자열.
   • payload: 액션과 관련된 데이터를 포함하는 객체.
3. 스토어(Store):
   • createStore 함수를 사용하여 Redux 스토어를 생성하고, 그 안에 리듀서를 등록한다. 
4. 컴포넌트(Component):
   • App 컴포넌트에서는 Redux의 useSelector 훅을 사용하여 현재 상태를 가져오고, useDispatch 훅을 사용하여 액션을 디스패치한다.
   • 버튼 클릭 이벤트에 따라 액션을 디스패치하도록 하는 핸들러 함수들이 정의되어 있다. 

 

📌calculatorReducer() 함수 파헤치기 

case ADD_OPERATOR:
  return {
    ...state,
    operator: action.payload.operator,
    prevValue: state.displayValue,
    displayValue: "",
  };

 

case ADD_OPERATOR::

• switch 문에서 ADD_OPERATOR 액션 타입에 대한 처리를 시작한다. 

...state:

• 객체 전개 연산자(...state)를 사용하여 현재 상태를 복사. 이것이 불변성을 유지하면서 새로운 상태를 생성하는 기본적인 방법이다

operator: action.payload.operator:

• 새로운 상태에서 operator 속성을 업데이트한다. 이 값은 액션 객체의 payload에서 전달된 연산자 값으로 설정되었다. 

prevValue: state.displayValue:

• prevValue 속성을 현재 displayValue로 업데이트한다. 이렇게 함으로써 현재까지의 입력 값을 이전 값으로 저장.

displayValue: "":

• displayValue를 ""으로 초기화. 연산자를 입력받으면 새로운 숫자를 입력받기 시작할 것이므로, ""으로 초기화한다. 

결과:

• 예를 들어, 현재 state가 다음과 같다고 가정해보자. 

{
  displayValue: "123",
  operator: null,
  prevValue: null
}

 

사용자가 "+" 연산자를 입력하면, 새로운 상태는 다음과 같이 된다. 

{
  displayValue: "",
  operator: "+",
  prevValue: "123"
}

 

이제 displayValue는 ""으로 초기화되었고, prevValue에는 이전에 입력된 숫자 "123"이 저장되었습니다.

 

 case CALCULATE_RESULT:
      const prev = parseFloat(state.prevValue);
      const current = parseFloat(state.displayValue);
      let result;

      switch (state.operator) {
        case "+":
          result = prev + current;
          break;
        case "-":
          result = prev - current;
          break;
        case "×":
          result = prev * current;
          break;
        case "÷":
          result = prev / current;
          break;
        case "%":
          result = (prev / 100) * current;
          break;
        default:
          result = current;
      }

      return {
        ...state,
        displayValue: result.toString(),
        operator: null,
        prevValue: null,
      };

 

displayValue: result.toString()

 

JavaScript에서 연산 결과는 기본적으로 숫자이지만, displayValue는 문자열 형태로 상태로 유지되고 있다. 따라서 displayValue에 문자열을 할당하여 화면에 표시하기 위해 result를 문자열로 변환한다. 

 

📌아쉬운 점 

연산자를 눌렀을 때 연산자가 출력되는 것이 아니라 빈값이 된다.

이 코드를 const prev = parseFloat(state.prevValue);  사용했기 때문에 이전값에 연산자가 들어가면 NaN 에러가 난다. .