[리액트 따라하며 배우기] 아이폰계산기 프로젝트 React+typescript, styled-components

 

이번 프로젝트는 아이폰계산기를 디자인한 피그마파일을 보며 리액트로 개발을 진행했습니다.

 

컴포넌트는 버튼을 클릭하면 출력하는 Screen부분과 모든 버튼들이 모여있는 ButtonBox로 나누어 개발을 진행했습니다.

 

 

Screen.tsx 컴포넌트

아이폰 계산기에서와 같이 숫자가 길어지면(예를들어 1억단위의 숫자보다 커지면) font-size를 줄여주는 식으로 아이폰 계산기를 따라했습니다.

 

위 코드를 보듯이 numberLen이 길어지면 그 길이에 따라 font-size가 수정되는 것을 확인할 수 있습니다.

 

또한 1000단위마다 쉼표를 찍어주는 기능 또한 구현했는데요.

이는 정규식을 이용해 간단히 구현했습니다.

 

 

ButtonBox.tsx 컴포넌트

버튼들의 나열을 css로 구현할때 grid를 사용했습니다. gird를 사용한 이유는 버튼0이 2열을 차지하기 때문에 grid로 쉽게 구현할 수 있다고 생각했습니다.

모든 버튼들은 mapping처리하기 위해 allButton이라는 리스트에 입력했습니다.

실제로 Button이라는 컴포넌트를 불러 allButton의 각각의 내용을 props로 전달하며 코드의 가독성을 높여줬습니다.

 

그리고 Button컴포넌트에서 각 버튼에 대한 기능들을 집어넣고 개발을 마무리했습니다.

const calculator = (operation: string, prevSum: number, calcSum: string) => {
  const nowSum = parseFloat(calcSum);
  if (operation === "plus") {
    return prevSum + nowSum;
  }

  if (operation === "minus") {
    return prevSum - nowSum;
  }

  if (operation === "mul") {
    return prevSum * nowSum;
  }

  if (operation === "div") {
    return prevSum / nowSum;
  }

  return 0;
};

const clickButton = () => {
    if (numbers.includes(img)) {
      setCalcSum((calcSum) => String(parseFloat(calcSum + img)));
      return;
    } else if (oper.includes(img)) {
      setPrevSum(() => parseFloat(calcSum));
      setCalcSum("0");
      switch (img) {
        case "plus":
          setOperation("plus");
          break;
        case "minus":
          setOperation("minus");
          break;
        case "mul":
          setOperation("mul");
          break;
        case "div":
          setOperation("div");
          break;
      }
    } else {
      switch (img) {
        case "AC":
          setOperation("");
          setCalcSum("0");
          setPrevSum(0);
          break;

        case "plusminus":
          setCalcSum(String(parseFloat(calcSum) * -1));
          break;

        case "percent":
          setCalcSum(String(parseFloat(calcSum) / 100));
          break;

        case "dot":
          calcSum.includes(".") ? setCalcSum(calcSum) : setCalcSum(calcSum + ".");
          break;

        case "equal":
          setCalcSum(String(calculator(operation, prevSum, calcSum)));
          break;
      }
    }
  };

 

위 코드를 보면 계산기의 기능구현을 확인하실 수 있습니다.

ButtonBox.tsx의 가독성을 위해 mapping을 하여 코드를 줄일 수 있었지만 반대로 Button.tsx의 코드길이가 길어지는 상황이 됐습니다.

 

이 부분은 리팩토링을 통해 문제를 잡아야할 것 같습니다.

 

위코드 작성하는 모습을 따라하고 싶다면 아래 영상을 보면 도움이 많이 될 것입니다.