$$config title: [리액트]value, valueAsNumber keywords: - IT - 리액트 $$ # 문제현상 - 리액트 if(opNo == 0) {setRs(num1 + num2);} 실행한 결과 value로 하게되면 2+2 가 22가 나오고 valueAsNumber 로 하게되면 4 가 나와서 두 함수의 차이점을 확인해보기로함 # 차이점 - value = type(number)가 아닌 것들도 전부 가능하지만 +할때 문자로 인식되어 덧셈이 안됨 - valueAsNumber = type(number)에만 쓸 수 있지만 + 할때 숫자로 변환하여 인식되어 덧셈이 됨 # 예시(num1 + num2 시 덧셈이 잘됨) ```js 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" /> <`select value={opNo} onChange={(e) => setOpNo(e.target.value)}>

{rs}

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

); } ``` # 예시(num1 + num2 시 덧셈이 안됨) ```js 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.value)} /> setNum2(e.target.value)} min="0" max="10" /> <`select value={opNo} onChange={(e) => setOpNo(e.target.value)}>

{rs}

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

); } ```