Remove leading zeros from input type=number

문제상황

문제는 이미지에서 보이는 것과 같이 0을 계속해서 나타낸다는 것이다. 아이템 개수는 12로 number type이 들어갔지만, input value에는 string 타입으로 나타나진다.

<input
        type='number'
        min={1}
        ref={inputRef}
        className='cart-item-quantity'
        // defaultValue={quantity ? quantity : 1}
        value={quantity}
        onChange={(e) => {
          handleQuantityChange(Number(e.target.value), item.id);
        }}
      >
</input>

해결 노력

구글링을 해보니 zero를 없애는 다양한 방법이 존재했다.

<input type="tel" pattern="[0-9]*">
<input type="text" pattern="[0-9]*" ...

이처럼 type과 정규표현식을 조합하여 zero를 없애는 방법이다. 하지만 이 방법은 input type number의 spinner를 사용하지 못한다.

해결 방안

 <input
        type='number'
        min={1}
        ref={inputRef}
        className='cart-item-quantity'
        // defaultValue={quantity ? quantity : 1}
        value={quantity.toString()}
        onChange={(e) => {
          handleQuantityChange(Number(e.target.value), item.id);
        }}
      >
</input>

찾은 방법은 input value에 전달되는 상태 quantity를 string 타입으로 변환시켜주는 것이다.

즉, value는 string 타입으로 변화시키고,
onChange 이벤트에서 state값을 변화시킬 때는 number 타입으로 변화시켜서 넣어줘야 한다.

왜 이렇게 하면 제대로 동작하는 걸까??

우선 input value는 string 타입이며, state의 quantity는 number 타입으로 치환되어 반영된다.

0을 입력하면 input의 value는 string타입이기 때문에, 0이 그대로 표시되게 된다.

흠... 잘모르겠다. 왜 되는 건가...??