$$config title: [React] 리액트 사칙연산 복습 keywords: - IT - 리액트 $$ ## 리액트 없이 작성 html -- ```html

계산결과는 ?입니다.

``` 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; ``` ## 리액트 버전 html -- ```html

``` css -- ```css 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 = 10; = >일반 변수(수정 후 사용자가 직접 리로드) //state 변수(수정 후 자동으로 리로드) const [num1, setNum1] = useState(0); const [num2, setNum2] = useState(0); const [opNo, setOpNo] = useState(0); const [rs, setRs] = useState(0); const calc = () => { console.log(opNo); if(opNo == 0){ setRs(num1 + num2); } else if(opNo == 1){ setRs(num1 - num2); } else if(opNo == 2){ setRs(num1 * num2); }else{ setRs(num1 / num2); } }; return ( <> setNum1(e.target.valueAsNumber)} /> setNum2(e.target.valueAsNumber)} min="0" max="10" />

{rs}

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

); } ReactDOM.render(, document.getElementById("root")); ```