[TIL]React useState를 활용한 Calculate만들기

오늘 공부한것 & 기억하고 싶은 내용

1.input 컴포넌트 만들기

    function InputBox({ name, value, placeholder, onChange }) {
      return (
        <input
          type="number"
          name={name}
          value={value}
          placeholder={placeholder}
          onChange={onChange}
        />
      );
    }

2. useState로 관리할게 많기에 하나의 useState에 객체형식으로 값을 넣어주고 구조분해할당으로 값을 꺼내쓸 수 있도록 한다.

    function App() {
      //관리할 input이 많다면 useState안에 객체 형식으로 관리할 name값을 넣어준다.
      const [calculateValue, setCalculateValue] = React.useState({
        firstInput: '',
        secondInput: '',
        selectedOption: '',
      });
      //값을 담을 변수 useState에 할당
      const [result, setResult] = React.useState('');
      //구조분해 할당으로 각각 이름을 꺼내쓸 수 있도록 함
      const { firstInput, secondInput, selectedOption } = calculateValue;

3. 하나의 onChange이벤트를 만들어 여러개 동시에 컨트롤 가능하게 e.target값을 구조분해할당으로 쓸 수 있게 만들고 setCalculateValue안에 원본 객체를 복사한 후 새롭게 추가될 값을 넣어준다.
   [name]: value name을 대괄호로 감싸준 이유는 key값을 받아오기 위함이다.

	const onChange = (e) => {
        //e.target안에 있는 value, name값 쓸 수 있음
        const { value, name } = e.target;
        setCalculateValue({
          //원본 객체를 복사한 후 새롭게 추가될 값을 넣어준다
          ...calculateValue,
          [name]: value, //대괄호는 name이라는 key값을 받아오기 위해 적어준다
        });
      };

4. selectbox선택에 맞게 연산을 하도록 if문 사용하였고 result값에 따라 결과값을 보여주기 위해 삼항연산자를 사용하여 결과값에 따라 문구가 생기거나 노출되도록 작업했다.

      const onSubmit = (e) => {
        const first = parseInt(firstInput);
        const second = parseInt(secondInput);

        e.preventDefault();

        if (firstInput === '' || secondInput === '') {
          alert('값을 채워주세요');
          return;
        } else if (selectedOption === '') {
          alert('연산자를 선택해주세요');
          return;
        }
        if (selectedOption === '0') {
          setResult(first + second);
        } else if (selectedOption === '1') {
          setResult(first - second);
        } else if (selectedOption === '2') {
          setResult(first / second);
        } else if (selectedOption === '3') {
          setResult(first * second);
        }
      };
      return (
        <div className="container">
          <h1>🔥 Calculator 🔥</h1>
          <form onSubmit={onSubmit}>
            <InputBox
              name="firstInput"
              value={firstInput}
              placeholder="Write a number"
              onChange={onChange}
            />
            <InputBox
              name="secondInput"
              value={secondInput}
              placeholder="And another one"
              onChange={onChange}
            />
            <select
              name="selectedOption"
              value={selectedOption}
              onChange={onChange}
            >
              <option value="" disabled>
                Select Operation
              </option>
              <option value="0">+</option>
              <option value="1">-</option>
              <option value="2">/</option>
              <option value="3">*</option>
            </select>
            <button>Calculate</button>
          </form>
          {result !== '' ? <h1>The result is : {result}</h1> : null}
        </div>
      );
    }

배운점 & 느낀점

if문보다 간결한 작업방식으로 하고 싶었으나 적절한 대안을 찾지 못해 추후 스터디 팀원들과 작업물을 공유해서 저부분을 어떻게 작업하였는지 봤는데 swich문을 써서 작업한게 괜찮아보였다.

select의 option이 선택됐을때 value값에 따라 작업을 하고 break으로 종료 선언을 한점이 메모리 효율에 더 좋은거 같다.
대신 여기서는 result값을 변경할때 setCalculateValue의 원본값을 복사해줘야한다.

const onSubmit = (e) => {
        e.preventDefault();
        switch (selectedOption) {
          case '+':
            setNumberObj({
              ...numberObj,
              result: parseInt(number1) + parseInt(number2),
            });
            break;
          case '-':
            setNumberObj({
              ...numberObj,
              result: parseInt(number1) - parseInt(number2),
            });
            break;
          case '*':
            setNumberObj({
              ...numberObj,
              result: parseInt(number1) * parseInt(number2),
            });
            break;
          case '/':
            setNumberObj({
              ...numberObj,
              result: parseInt(number1) / parseInt(number2),
            });
            break;
        }
      };

그리고 result도 여기서 한번에 추가를 하셨던데 이부분이 더 좋은거 같다.
여기다 추가할까 고민하다가 복잡해 보여서 따로 코드를 작성하였던건데 한번에 작성하는게 코드를 읽기 가독성이 좋은거 같다.

const [calculateValue, setCalculateValue] = React.useState({
        firstInput: '',
        secondInput: '',
        selectedOption: '',
  		result:''
      });