리액트 계산기

1. 리액트 없이 작성한 버전

HTML 부분

<input id="num1" type="number" placeholder="숫자1" style="width : 100px" value="0" min="0" max="10">
<input id="num2" type="number" placeholder="숫자2" style="width : 100px" value="0" min="0" max="10">

<select id="op">
  <option value="0">+</option>
  <option value="1">-</option>
  <option value="2">*</option>
  <option value="3">/</option>
</select>

<button id="bt_cal">계산</button>
<div>계산결과는 <span id="rs">?</span>입니다.</div>

CSS 부분

공백

JS 부분

console.clear();

const btcal = document.querySelector("#bt_cal");

function App() {
  const num1 = document.querySelector("#num1").valueAsNumber;
  const num2 = document.querySelector("#num2").valueAsNumber;
  const Op = document.querySelector("#op").value;

  let rs = 0;

  if (Op == 0) {
    rs = num1 + num2;
  } else if (Op == 1) {
    rs = num1 - num2;
  } else if (Op == 2) {
    rs = num1 * num2;
  } else {
    rs = num1 / num2;
  }

  const divRS = document.querySelector("#rs");

  divRS.innerText = rs;
}

btcal.onclick = App;

수정하기 위해서 id를 지정 해주었다. 물론 처음에는 쉽지만 점점 요구가 복잡해짐에 따라 리액트를 썼을때와 안썼을 때의 복잡도는 매우매우 차이가 발생한다.

 

 

-결과물-

https://codepen.io/denist2322/pen/MWQmPrX

계산기

 

---

2. 리액트 버전

연습장 : https://codepen.io/jangka44/pen/qBPgROX

HTML

수정 없음

CSS 부분

body,
input,
button,
select {
  font-size: 3rem; /* 임시 */
}

JS 부분

console.clear();

import React, { useState, useEffect } from "https://cdn.skypack.dev/react";
import ReactDOM from "https://cdn.skypack.dev/react-dom";


let App__callCount = 0;
function App() {
  console.log(`App__callCount : ${++App__callCount}`);

  const [num1, setNum1] = useState(0);
  const [num2, setNum2] = useState(0);
  const [op, setOp] = useState(0);
  const [rs, setRs] = useState(0);

  const calc = () => {
    if (op == 0) {
      setRs(num1 + num2);
    } else if (op == 1) {
      setRs(num1 - num2);
    } else if (op == 2) {
      setRs(num1 * num2);
    } else {
      setRs(num1 / num2);
    }
  };

  return (
    <>
      <input
        type="number"
        placeholder="숫자1"
        style={{ width: 100 }}
        value={num1}
        min="0"
        max="10"
        onChange={(e) => setNum1(e.target.valueAsNumber)}
      />
      <input
        type="number"
        placeholder="숫자2"
        style={{ width: 100 }}
        value={num2}
        min="0"
        max="10"
        onChange={(e) => setNum2(e.target.valueAsNumber)}
      />

      <select value={op} onChange={(e) => setOp(e.target.valueAsNumber)}>
        <option value="0">+</option>
        <option value="1">-</option>
        <option value="2">*</option>
        <option value="3">/</option>
      </select>
      <button onClick={calc}>계산</button>
      <div>{rs}</div>
      <div>
        계산결과는 <span>{rs}</span>입니다.
      </div>
    </>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

위에서 말한 것 처럼 기하급수적으로 단순해지지는 않지만 사용의 유무에 따라 후에는 차이는 크게 발생한다.

 

 

-결과물-

See the Pen 리액트 계산기 by 소망 (@denist2322) on CodePen.

 

https://codepen.io/denist2322/pen/QWQvZaO

리액트 계산기