[타입스크립트] <HTMLInputElement>는 string만 된다구??? (초보주의 !!)

조회수 714회

리덕스툴킷에 타입스크립트를 적용하는 공부를 하고 있습니다.

저의 카운터 컴포넌트 입니다.

import React, {useState} from 'react'
import {useAppSelector, useAppDispatch} from '../app/hook'
import {decrement,increment,incrementByAmount} from '../modules/counterSlice'

export default function Counter() {
    const count = useAppSelector(state => state.counterSlice.value)
    const dispatch = useAppDispatch();

    const onIncrease = () => dispatch(increment())
    const onDecrease = () => dispatch(decrement())

    const [input, setInput] = useState<number>(0)

    const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        // setInput(e.target.value)
    }

    const onSubmit = (e: React.MouseEvent<HTMLButtonElement>) => {
        e.preventDefault()
        dispatch(incrementByAmount(input))
        setInput(0);
    } 
    return (
        <div>
            <h1>{count}</h1>
            <div>
                <button onClick={onIncrease}>+1</button>
                <button onClick={onDecrease}>-1</button>
            </div>
            <div>
                <input type="number" value={input} onChange={onChange}/>
                <button onClick={onSubmit}>더하기</button>
            </div>
        </div>
    )
}

여기서 onChange 함수의 setInput(e.target.value)에서 에러가 발생했는데요 !!

에러의 내용은 다음과 같습니다.

Argument of type 'string' is not assignable to parameter of type 'SetStateAction'.ts(2345)

이말은 즉슨.. onChange의 매개변수의 타입이(e: React.ChangeEvent<HTMLInputElement>)

string 이어서 number가 들어갈수 없다는 건데옹??

어떻게 하면 input태그에 number타입을 넣을수 있을까옹 ㅠㅠ

도와주세요 선배님들 !!

충성충성 ^^7

1 답변

  • 아주 높은 확률로, typeof e.target.value === 'string'이기 때문에, 타입스크립트가 튕겨내는 겁니다. 테스트

    HTML5에는 분명 number type input이 있긴 하지만, 이건 본질적으로는 일반 input과 차이가 없고, 마크업의 내용상 개선과 클라이언트 구현 코스메틱을 위해 도입된 부가적인 옵션이라고 생각하셔야 합니다. input type="email"과 같은 거라고 보시면 좋을 것 같네요. 오늘날 대다수 모던 브라우저가 email type input에 꽤 많은 부가적 기능을 제공합니다만, 그렇다고 타입스크립트나 JS가 Email 타입을 제공하진 않죠. 이메일 주소라는 건 걍 문자열이거든요(근데 이제 입력 받을 때의 규칙이 좀 까다로운). input type="number"도 사실은 이와 사정이 크게 다르지 않은 것입니다.

    그런 의미에서, 그냥 변환해서 쓰시면 될 거 같습니다.

    setInput(parseFloat(e.target.value)); // parseInt 하지 않은 이유는 input 속성에 step=1이 없기 때문
    

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)