$$config title: [리액트 React] 리액트 적용 계산기 keywords: - IT - 리액트 $$ # 1. 리액트 없이 작성한 버전 ## HTML 부분 ``` html

계산결과는 ?입니다.

``` ## CSS 부분 공백 ## JS 부분 ```js console.clear(); const btnCalc = document.querySelector("#btn-calc"); function calculate() { const inputNum1 = document.querySelector("#num1"); const inputNum2 = document.querySelector("#num2"); const num1 = inputNum1.valueAsNumber; const num2 = inputNum2.valueAsNumber; const inputOp = document.querySelector("#op"); let rs = 0; if (inputOp.value == 0) { rs = num1 + num2; } else if (inputOp.value == 1) { rs = num1 - num2; } else if (inputOp.value == 2) { rs = num1 * num2; } else { rs = num1 / num2; } const divRs = document.querySelector("#rs"); const divRs2 = document.querySelector("#rs2"); divRs.innerText = rs; divRs2.innerText = rs; } btnCalc.onclick = calculate; ``` 수정하기 위해서 id를 지정 해주었다. 물론 처음에는 쉽지만 점점 요구가 복잡해짐에 따라 리액트를 썼을때와 안썼을 때의 복잡도는 매우매우 차이가 발생한다. # 2. 리액트 버전 (연습장 : https://codepen.io/jangka44/pen/qBPgROX) ## HTML 수정 없음 ## CSS 부분 ```html body, input, button, select { font-size: 3rem; /* 임시 */ } ``` ## JS 부분 ```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 ( <> setNum1(e.target.valueAsNumber)} /> setNum2(e.target.valueAsNumber)} />

{rs}

계산결과는 {rs}입니다.

); } ReactDOM.render(, document.getElementById("root")); ``` 위에서 말한 것 처럼 기하급수적으로 단순해지지는 않지만 사용의 유무에 따라 후에는 차이는 크게 발생한다.