[2단계 - 계산기] 호프(김문희) 미션 제출합니다.

src/components/Calculator.js

@@ -1,177 +1,118 @@
-import { Component } from 'react';
+import {
+  useLayoutEffect,
+  useEffect,
+  useState,
+  useRef,
+  useCallback,
+} from 'react';
 import '../styles/Calculator.css';
+import { computeExpression, hasInput, computeNextOperand } from '../utils';
+import Expression from './Expression';
+import Digits from './Digits';
+import Modifier from './Modifier';
+import Operations from './Operations';
 
-const computeExpression = ({ firstOperand, secondOperand, operation }) => {
-  if (operation === '/') {
-    return Math.floor(firstOperand / secondOperand);
-  }
-  if (operation === 'X') {
-    return firstOperand * secondOperand;
-  }
-  if (operation === '-') {
-    return firstOperand - secondOperand;
-  }
-  if (operation === '+') {
-    return firstOperand + secondOperand;
-  }
-};
-
-const hasInput = ({ firstOperand, secondOperand, operation }) =>
-  firstOperand !== '0' || secondOperand !== '' || operation !== null;
+const Calculator = () => {
+  const [state, setState] = useState({
+    firstOperand: 0,
+    secondOperand: -1,
+    operation: null,
+    isError: false,
+  });
 
-const computeNextOperand = (currentOperand, digit) => {
-  return currentOperand.length >= 3
-    ? `${currentOperand.slice(0, -1)}${digit}`
-    : `${Number(currentOperand + digit)}`;
-};
+  const ref = useRef(null);
 
-class Calculator extends Component {
-  constructor() {
-    super();
+  useLayoutEffect(() => {
     const memoizedState = JSON.parse(localStorage.getItem('prevState'));
-    this.state = memoizedState
-      ? memoizedState
-      : {
-          firstOperand: '0',
-          secondOperand: '',
-          operation: null,
-          isError: false,
-        };
-  }
+    if (!memoizedState) return;
+    setState(memoizedState);
+  }, []);
 
-  componentDidMount() {
-    window.addEventListener('beforeunload', this.onBeforeUnload);
-  }
+  useEffect(() => {
+    ref.current = state;
+  }, [state]);
 
-  componentWillUnmount() {
-    window.removeEventListener('beforeunload', this.onBeforeUnload);
-    localStorage.setItem('prevState', JSON.stringify(this.state));
-  }
+  useEffect(() => {
+    window.addEventListener('beforeunload', handleWindowClose);
+    return () => window.removeEventListener('beforeunload', handleWindowClose);
+  }, []);
 
-  initState = () => {
-    this.setState({
-      firstOperand: '0',
-      secondOperand: '',
-      operation: null,
-      isError: false,
-    });
+  const handleWindowClose = (e) => {
+    e.preventDefault();
+    if (!hasInput(ref.current)) return;
+    localStorage.setItem('prevState', JSON.stringify(ref.current));
+    e.returnValue = '';
   };
 
-  onClickDigit = ({ target }) => {
-    const { textContent: digit } = target;
-    this.state.operation
-      ? this.setState(({ secondOperand }) => ({
-          secondOperand: computeNextOperand(secondOperand, digit),
-          isError: false,
+  const onClickDigit = (digit) => () => {
+    state.operation
+      ? setState((prevState) => ({
+          ...prevState,
+          secondOperand: computeNextOperand(
+            prevState.secondOperand === -1 ? 0 : prevState.secondOperand,
+            digit,
+          ),
         }))
-      : this.setState(({ firstOperand }) => ({
-          firstOperand: computeNextOperand(firstOperand, digit),
-          isError: false,
+      : setState((prevState) => ({
+          ...prevState,
+          firstOperand: computeNextOperand(prevState.firstOperand, digit),
         }));
   };
 
-  onClickOperation = ({ target }) => {
-    const { textContent: operation } = target;
+  const onClickOperation = (operation) => () => {
     if (operation !== '=') {
-      this.setState({ operation });
+      setState((prevState) => ({
+        ...prevState,
+        operation,
+      }));
       return;
     }
-
     const result = computeExpression({
-      firstOperand: Number(this.state.firstOperand),
-      secondOperand: Number(this.state.secondOperand),
-      operation: this.state.operation,
+      firstOperand: Number(state.firstOperand),
+      secondOperand: Number(state.secondOperand),
+      operation: state.operation,
     });
 
     if (isFinite(result)) {
-      this.setState({
-        firstOperand: `${result}`,
-        secondOperand: '',
+      setState((prevState) => ({
+        ...prevState,
+        firstOperand: result,
+        secondOperand: -1,
         operation: null,
-      });
+      }));
       return;
     }
-
-    this.setState(() => ({
-      isError: true,
+    setState((prevState) => ({
+      ...prevState,
+      isError: false,
     }));
   };
 
-  onBeforeUnload = (e) => {
-    e.preventDefault();
-    localStorage.setItem('prevState', JSON.stringify(this.state));
-    if (hasInput(this.state)) {
-      e.returnValue = '';
-    }
-  };
+  const onClickModifier = useCallback(() => {
+    setState({
+      firstOperand: 0,
+      secondOperand: -1,
+      operation: null,
+      isError: false,
+    });
+  }, []);
+
+  return (
+    <>
+      <div>숫자는 3자리 까지만 입력이 가능합니다.</div>
+      <div className="calculator">
+        <Expression
+          isError={state.isError}
+          firstOperand={state.firstOperand}
+          operation={state.operation}
+          secondOperand={state.secondOperand}
+        />
+        <Digits onClick={onClickDigit} />
+        <Modifier onClick={onClickModifier} />
+        <Operations onClick={onClickOperation} />
+      </div>
+    </>
+  );
+};
 
-  render() {
-    return (
-      <>
-        <div>숫자는 3자리 까지만 입력이 가능합니다.</div>
-        <div className="calculator">
-          <h1 id="total">
-            {this.state.isError
-              ? '오류'
-              : `${this.state.firstOperand}
-            ${this.state.operation ?? ''}
-            ${this.state.secondOperand}`}
-          </h1>
-          <div className="digits flex">
-            <button className="digit" onClick={this.onClickDigit}>
-              9
-            </button>
-            <button className="digit" onClick={this.onClickDigit}>
-              8
-            </button>
-            <button className="digit" onClick={this.onClickDigit}>
-              7
-            </button>
-            <button className="digit" onClick={this.onClickDigit}>
-              6
-            </button>
-            <button className="digit" onClick={this.onClickDigit}>
-              5
-            </button>
-            <button className="digit" onClick={this.onClickDigit}>
-              4
-            </button>
-            <button className="digit" onClick={this.onClickDigit}>
-              3
-            </button>
-            <button className="digit" onClick={this.onClickDigit}>
-              2
-            </button>
-            <button className="digit" onClick={this.onClickDigit}>
-              1
-            </button>
-            <button className="digit" onClick={this.onClickDigit}>
-              0
-            </button>
-          </div>
-          <div className="modifiers subgrid" onClick={this.initState}>
-            <button className="modifier">AC</button>
-          </div>
-          <div className="operations subgrid">
-            <button className="operation" onClick={this.onClickOperation}>
-              /
-            </button>
-            <button className="operation" onClick={this.onClickOperation}>
-              X
-            </button>
-            <button className="operation" onClick={this.onClickOperation}>
-              -
-            </button>
-            <button className="operation" onClick={this.onClickOperation}>
-              +
-            </button>
-            <button className="operation" onClick={this.onClickOperation}>
-              =
-            </button>
-          </div>
-        </div>
-      </>
-    );
-  }
-}
 export default Calculator;

src/components/Digits.js

@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types';
+const DIGITS = [9, 8, 7, 6, 5, 4, 3, 2, 1, 0];
+
+const Digits = ({ onClick }) => {
+  return (
+    <div className="digits flex">
+      {DIGITS.map((digit) => (
+        <button className="digit" onClick={onClick(digit)} key={digit}>
+          {digit}
+        </button>
+      ))}
+    </div>
+  );
+};
+
+Digits.propTypes = {
+  onClick: PropTypes.func,
+};
+
+export default Digits;

src/components/Expression.js

@@ -0,0 +1,21 @@
+import PropTypes from 'prop-types';
+
+const Expression = ({ isError, firstOperand, operation, secondOperand }) => {
+  return (
+    <h1 id="total">
+      {isError
+        ? '오류'
+        : `${firstOperand}
+          ${operation ?? ''}
+          ${secondOperand < 0 ? '' : secondOperand}`}
+    </h1>
+  );
+};
+
+Expression.propTypes = {
+  isError: PropTypes.bool,
+  firstOperand: PropTypes.number,
+  secondOperand: PropTypes.number,
+  operation: PropTypes.string,
+};
+export default Expression;

src/components/Modifier.js

@@ -0,0 +1,18 @@
+import PropTypes from 'prop-types';
+import { memo } from 'react';
+
+const Modifier = ({ onClick }) => {
+  return (
+    <div className="modifiers subgrid">
+      <button className="modifier" onClick={onClick}>
+        AC
+      </button>
+    </div>
+  );
+};
+
+Modifier.propTypes = {
+  onClick: PropTypes.func,
+};
+
+export default memo(Modifier);

src/components/Operations.js

@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types';
+const OPERATIONS = ['/', 'X', '-', '+', '='];
+
+const Operations = ({ onClick }) => {
+  return (
+    <div className="operations subgrid">
+      {OPERATIONS.map((operation) => (
+        <button
+          className="operation"
+          onClick={onClick(operation)}
+          key={operation}
+        >
+          {operation}
+        </button>
+      ))}
+    </div>
+  );
+};
+
+Operations.propTypes = {
+  onClick: PropTypes.func,
+};
+
+export default Operations;

src/utils/index.js

@@ -0,0 +1,27 @@
+const calculateByOperation = {
+  '/': (firstOperand, secondOperand) =>
+    Math.floor(firstOperand / secondOperand),
+  X: (firstOperand, secondOperand) => firstOperand * secondOperand,
+  '-': (firstOperand, secondOperand) => firstOperand - secondOperand,
+  '+': (firstOperand, secondOperand) => firstOperand + secondOperand,
+};
+
+export const computeExpression = ({
+  firstOperand,
+  secondOperand,
+  operation,
+}) => {
+  const calculator = calculateByOperation[operation];
+  if (!calculator) throw new Error('잘못된 연산자를 입력하였습니다.');
+  return calculator(firstOperand, secondOperand);
+};
+
+export const hasInput = ({ firstOperand, secondOperand, operation }) =>
+  firstOperand !== 0 || secondOperand !== -1 || operation !== null;
+
+export const computeNextOperand = (currentOperand, digit) => {
+  currentOperand = String(currentOperand);
+  return currentOperand.length >= 3
+    ? Number(`${currentOperand.slice(0, -1)}${digit}`)
+    : Number(currentOperand + digit);
+};