input type="number"의 값은 String

HTML의 input type="number"에서 가져온 값은 항상 문자열(string)로 반환된다.
이는 DOM API의 특성 때문인데

// input type="number"에서 "70.5"를 입력하면
console.log(typeof weight); // "string"
console.log(weight); // "70.5" (문자열)
console.log(weight + 10); // "70.510" (문자열 연결)

React의 onChange 이벤트에서 e.target.value는 항상 문자열이므로, 수치 계산을 위해서는 반드시 숫자로 파싱해야한다.

(DB에서 int나 float형 자료를 원하는데 nuber로 input type 했으니까 그냥 보내면 되겠지
-> string 날라가서 오류 발생)

방법

간단하게 parseFloat(), parseInt() 를 사용하면 된다.

parseFloat("70.5")    // 70.5
parseFloat("70")      // 70
parseFloat("70.5kg")  // 70.5 (숫자 부분만 파싱)
parseFloat("")        // NaN
parseFloat("abc")     // NaN

parseInt("70.5")      // 70 (소수점 이하 버림)
parseInt("70")        // 70
parseInt("70kg")      // 70
parseInt("08", 10)    // 8 (10진법 명시)
parseInt("")          // NaN

하지만 더 엄격한 변환 또한 존재한다.

Number()

다른 변환 함수들과 달리 전체 문자열이 유효한 숫자여야만 변환을 성공시켜준다.

Number("70.5")        // 70.5
Number("70")          // 70
Number("")            // 0 (빈 문자열은 0으로 변환)
Number("70kg")        // NaN (숫자가 아닌 문자 포함 시 NaN)
Number("   70.5   ")  // 70.5 (공백 무시)

아니면 간단한 방법으로는

단항 연산자 (+)

+"70.5"               // 70.5
+"70"                 // 70
+""                   // 0
+"70kg"               // NaN

+를 붙여주기만 해도 된다.

정리

• input type="number"의 값은 항상 문자열
• 수치 계산 전에 반드시 parseFloat(), parseInt(), Number() 등으로 변환
• parseFloat(): 소수점 포함 숫자, 부분 파싱 가능
• parseInt(): 정수만, 진법 지정 가능
• Number(): 가장 엄격한 변환
• 단항 연산자 +: 간단하고 빠른 변환
• 항상 NaN 체크와 유효성 검사 수행
• 사용자 경험을 위해 실시간 피드백 제공