정신과 시간의 방

하나의 파일에 상태 변화 변수, 함수들과 View 부분이 혼재 하면, 유지 보수가 어렵다.

그래서 상태 변화 변수, 함수들은 다른 파일로 빼주고, 그 파일 return 값에 태워서 View part 파일에게 건네다 주는 식으로 해야지 가독성이 좋다.

우리는 우리가 만들었던 Hook들을 모아 나만의 Hook file을 만들 것이다.

**주의점**

Hook은 무조건 use라는 이름으로 시작해야함. Custom Hook (우리가 만들려는 Hook) file 도 예외 없음

이번엔 계산기 만드는데 썼던 Hook 이니까 useCalculator라고 쓰자.

이 안에 내용 다 넣고 return {} (객체) 안에 태워 보낸다. ()는 하나의 값 밖에 못 보내기 때문에 {}를 사용해야 한다.

()는 아무 의미 없고 그냥 여러 줄에 걸친 긴 하나의 명령문을 하나로 묶어주는 역할을 할 뿐이다.

값을 2개 이상 보낼 때는 {} 로 보내준다!

import { useState } from "react";

export default () => {
  const [input, setInput] =useState(0); // 사용자가 첫 번째로 입력한 값
  const [currentOperator, setCurrentOperator] =useState(null); // 사용자가 첫번째로 입력한 연산자 
  const [result, setResult] =useState(null); // 사용자가 두 번째로 입력한 값
  const [tempInput, setTempInput] =useState(null); // 뒤로 사용자가 값을 더 안 넣고, =만 누를시 최근 입력한 값이 사용될 수 있게 임시 저장
  const [tempOperator, setTempOperator] =useState(null); // 사용자가 =만 누를 시 최근 입력한 연산자가 사용될 수 있게 임시 저장
  const [isClickedOperator, setIsClickedOperator] = useState(false)
  const [isClickedEqual, setIsClickedEqual] = useState(false)

  const hasInput = !!input;

  const onPressNum = (num) => {

    if (currentOperator && isClickedOperator) {
      setTempInput(num);
      setResult(input);
      setInput(num);
      setIsClickedOperator(false);

    } else{
      const newInput = Number(`${input}${num}`);
      setInput(newInput);
      setTempInput(newInput);
    }
  }

  const OnPressOperator = (operator) => {
    if(operator !== "="){
      setCurrentOperator(operator);
      setTempOperator(operator);
      setIsClickedOperator(true);
      setIsClickedEqual(false);
    }
    else{
      let finalResult = result;
      let finalInput = isClickedEqual? tempInput : input;
      let finalOperator = isClickedEqual? tempOperator : currentOperator;
      switch (finalOperator){
        case "+":
          finalResult = result + finalInput;
          break;    
        case "-":
          finalResult = result - finalInput;
          break;    
        case "*": 
          finalResult = result * finalInput;
          break;    
        case "/":
          finalResult = result / finalInput;
          break;    
        default:
          break;       
        }
      setResult(finalResult);
      setInput(finalResult);
      setIsClickedEqual(true);
      setCurrentOperator(null);
    }
  }

  const onPressReset = () => {
    if(hasInput){
      setInput(0);
    }else{
      setInput(0);
      setCurrentOperator(null);
      setResult(null);
      setTempInput(null);
      setTempOperator(null);
    }
  }

  return {
    input,
    currentOperator,
    result,
    tempInput,
    tempOperator,
    hasInput,
    onPressNum,
    OnPressOperator,
    onPressReset
  }
}

!받아올 때 주의점!

return을 {}으로 했으니까, 받아 쓸 때도 {} 로 해야한다.

우리가 항상 useState 바로 만들 때 [ ] (배열)을 이용하던 것과 다름을 인지 하자.