$$config title: [React] onChange, onClick을 통한 변수의 값 바꾸기 keywords: - React - onChange $$ # 사칙연산 예제를 통해서 본 onChnage와 onClick - 기본 변수 설정 및 시스템 설정 - `onClick`이나 `onChange`를 했을 때 실행되는 함수 설정 - onChange 나 onClick의 변수 e는 `event`를 뜻함. - onChange를 통해서 num1, num2 의 변수의 값을 바꿈! - `onChange={()=>setNum1(15)}` ( 함수의 짧은 표현 : {() => ()} ) - onChange로 setOpNo의 사칙연산 연산자(+, -, *, /) 값을 바꾸기 - `button` 은 onClick을 활용함. --- ```js console.clear(); import React, { useState, useEffect } from "https://cdn.skypack.dev/react"; import ReactDOM from "https://cdn.skypack.dev/react-dom"; /*리액트로 바꾸기 1. 리액트 방식이 아닌 것을 리액트로 바꾸기(설정 : JS를 바벨로 바꾸기) 2. 리액트 방식으로 바꾸면 새로 다 갈아엎으면 되기 때문에 id 들이 필요가 없어짐. 3. 리액트에서는 싱글태그 엘리먼트들을 확실히 닫아야함. 4. 리액트에서 스타일은 html 방식으로 사용불가 -> {{ 자바스크립방식 }} 으로 써야 함.*/ function App() { //일반변수 : 수정 후 사용자가 직접 리로드 //const num1 = 10; //state 변수 : 수정 후 자동으로 리로드(다시 갈아 엎는 거) const [num1, setNum1] = useState(0); /*onChange에서 바뀌어 리로드 될 때 이전 턴의 num1을 기억함. 이 외에 모두 그대로 복사!! useState()에 있는 값은 처음에만 지정됨.*/ const [num2, setNum2] = useState(0); const [opNo, setOpNo] = useState(0); const [rs,setRs] = useState(0); const calc = () => { 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 ( /*<> : JSX(자바스크립트의 문법)의 시작 => 이 안에서는 HTML을 쓸 수 있음.*/ <> setNum1(e.target.valueAsNumber)} /* onChange 되어서 setNum1이 다시 실행될 때 이전 값을 기억하고 리로드할 때 초기값으로 설정함.*/ /> setNum2(e.target.valueAsNumber)} />

{rs}

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

); } /*리액트 필수 사항 2*/ ReactDOM.render(, document.getElementById("root")); ```

게시글 상세