$$config title: [리액트] 응용 - 사칙연산 계산기 코드와 분석 keywords: - IT - 리액트 $$ # 리액트를 활용한 사칙연산 계산기 ## 자바스크립트 사용 코드 및 분석 ### [ html ] ```html

계산결과는 입니다.

``` ### [ 자바스크립트 ] ```js console.clear(); // btn-calc을 btnCalc 변수에 넣음 // .querySelector()는 CSS 선택자로 요소를 선택하게 해줍니다. 주의할 점은 선택자에 해당하는 첫번째 요소만 선택한다는 것입니다. // id가 btn-calc 인 것을 선택 #btn-calc == 계산 버튼 const btnCalc = document.querySelector('#btn-calc'); // 계산 버튼을 클릭할 때마다 실행 되는 함수 function calculate(){ const inputNum1 = document.querySelector('#num1'); // 첫번째 input 접근 const inputNum2 = document.querySelector('#num2'); // 두번째 input 접근 // input에 접근해서 데이터(값)을 얻음 const num1 = inputNum1.valueAsNumber; // inputNum1의 값을 가져와서 num1에 넣음 const num2 = inputNum2.valueAsNumber; // inputNum2의 값을 가져와서 num2에 넣음 // 연산자 버튼(#op)에 접근 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 if(inputOp.value == 3){ rs = num1 / num2; } // 연산자에 따른 결과값 == rs // #rs, #rs2에 접근 후 rs 값을 넣어 줌 const divRs = document.querySelector('#rs'); const divRs2 = document.querySelector('#rs2'); divRs.innerText = rs; divRs2.innerText = rs; } // btnCalc == 계산 버튼 // btnCalc을 클릭(onclick)하면 calculate 함수 실행해! btnCalc.onclick = calculate; ``` --- ## 리액트 사용 코드 및 분석 ### [ html ] ```html

``` ### [ react ] ```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; // html에서 만든 id값 다 삭제 해 줌 function App() { console.log(`App_callCount : ${++App__callCount}`); // 일반변수 -> 값이 바뀌지 않음 // 일반변수 수정 후 사용자가 직접 리로드 //const num1 = 10; // state 변수 -> 리액트에서 바뀌는 수는 state로! // state 변수 수정 후 자동으로 리로드 const [num1, setNum1] = useState(0); const [num2, setNum2] = useState(0); const [opNo, setOpNo] = useState(0); const [rs, setRs] = useState(0); // () => {}는 function(){}의 줄임표현 const calc = () => { if(opNo == 0){ setRs(num1 + num2); } else if(opNo == 1){ setRs(num1 - num2); } else if(opNo == 2){ setRs(num1 * num2); } else if(opNo == 3){ setRs(num1 / num2); } }; // <> == jsx 문법의 시작과 끝 return ( <> setNum1(e.target.valueAsNumber)} // value -> 문장으로 들어감 // valueAsNumber -> parseInt로 들어감 /> setNum2(e.target.valueAsNumber)} />

{rs}

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

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

게시글 상세