[REFACTOR] review & refactor requests

리뷰

이렇게까지 아이폰 계산기랑 비슷하게 만드실 줄은 몰랐습니다..!!! 진짜 대박인 부분 같아요
사소한 디테일을 놓치지 않으려고 이슈에 계속 코멘트와 커밋을 달아 가면서 스스로 고치려고 하시는 점은.. 이미 인포팀 내에서도 상위권이라고 느꼈습니다. 스스로 하려고 하시는 의지나 깃허브를 다루시는 거나 여러 측면에서 보았을 때 정말 훌륭하십니다.
발생할 수 있는 에러 상황을 잘 핸들링하신 부분도 인상적입니다. (Zero Division을 Infinity로 표시)

개선점

리팩토링만 잘 하시면 세최개 쌉가능 (세계 최고의 개발자라는 뜻)
전체적으로 코드 분리를 해야 할 것으로 보여요. 몇몇 케이스가 보이는데, 자세히 설명드리겠습니당

1. 렌더링 로직과 연산 로직 분리

_App.tsx_에서 실제로 연산을 담당하는 부분이랑 렌더링한 걸 보여주는 부분을 같이 담당하다 보니, 파일이 커지고 조금 알아보기 힘들게 되었어요. 이러한 문제점을 해결하기 위해 코드를 각 코드가 수행하는 역할에 맞게 별개의 파일로 분리하는 작업을 해야 할 것 같아요!
예를 들어볼게요. src 디렉토리 밑에 _app.ts_를 만들고, 원래 _App.tsx_에 존재하던 연산 함수를 이렇게 옮겨 와볼까요?
```
import { Dispatch, SetStateAction } from "react";
```

interface OperationProps { setNumbers: Dispatch<SetStateAction<number[]>>; numbers: number[]; setOperation: Dispatch<SetStateAction>; }

export const division = ({ setNumbers, numbers, setOperation, }: OperationProps) => { setNumbers([...numbers, NaN]); setOperation("division"); };

- 이렇게 작성한 뒤에 App.tsx에서 적용시킬 때 다음과 같이 적용시켜주면 됩니당
```tsx
...
<OrangeButton
    onClick={() => division({ setNumbers, numbers, setOperation })}
>
    /
</OrangeButton>
...

이런 식으로 계산을 담당하는 함수나, 여러 처리 로직들을 _App.tsx_와 별개로 분리하면 코드가 훨씬 깔끔해질 것 같습니다.
getNumber()나, result()같은 것들도 비슷한 방식으로 잘 옮겨 보면 어떨까요?!

2. Enum 사용

지금 operation 모드를 선택할 때 string으로 관리해 주고 있는데, 몇 개의 가능한 연산 모드들만이 있으니까 Enum으로 관리해 주는 게 어떨까요?
```
export enum OperationMod {
PERCENT,
MULTIPLICATION,
SUBTRACTION,
ADDITION,
}
```

function App () { const [operation, setOperation] = useState<OperationMod | null>(); }

```ts
const multiplication = () => {
    setNumbers([...numbers, NaN]);
    setOperation(OperationMod.MULTIPLICATION);
};

3. NaN 대신 null 사용

두 번째 수가 입력되었는지를 감지하기 위해 NaN을 쓰고 있는데, 사실 NaN은 자바스크립트가 내뱉는 오류적인 값이라서, 초기 설정값과 실제로 NaN이 나온 경우를 구분해야 할 필요가 있는 것 같아요. 그래서 numbers의 타입을 (number|null)[]로 바꾸고, 초기값을 [null]로 준 다음 null인지 아닌지 검사하는 방식으로 가면 어떨까요?

Yejin-02 / practice-calc