<input type="number" />에서 leading zero 제거하기

문제

<input type="number" />에 키보드로 숫자를 입력하면 입력값 앞에 0이 남아있는 문제가 발생했다.

문제 코드

const [totalCount, setTotalCount] = useState(1);

const changeCount = (e: ChangeEvent<HTMLInputElement>) => {
  const count = +e.currentTarget.value;
  if (count > 100) {
    return;
  }
  setTotalCount(count);
};

return (
  <input type="number" value={totalCount} onChange={changeCount} />
)

원인 분석 & 시행착오

input의 속성 value의 자료형은 문자열이므로 "033"이 그대로 totalCount에 할당되는 게 원인일 거라 생각했다.
하지만 setTotalCount에 "033"를 넘겨줄 때 +연산자를 이용해 숫자 33으로 형변환해서 넣어주므로 앞자리에 0이 없는 채로 할당되어야 한다.

혹시 문자열에 0이 남은 상태로 형변환 한 것이 문제인가 의심이 들어 정규표현식으로 문자열에서 0을 제거한 후 숫자로 형변환 해봤다.

const count = +e.currentTarget.value.replace(/^0+/, '');

하지만 해결되지 않았다.

이번엔 형변환 하는 방식이 틀린 건가 싶어 parseInt()를 사용해봤다.

const count = parseInt(e.currentTarget.value.replace(/^0+/, ''), 10);

지울 수 없던 0을 지울 수 있게 되었고 0이 앞자리에 남는 것도 해결됐지만,
0을 지웠을 때는 총 수량과 금액이 NaN을 뱉는 문제가 생겼다.

0은 지울 수 없지만 숫자를 입력했을 때 앞자리에서 0이 사라지는 해결책을 찾아야했다.
input의 value의 자료형은 문자열이라는 것에 착안하여 input의 value에 넣어주는 숫자형 상태값 totalCount를 문자열로 형변환 해보았다.

해결

input의 value에 넣어주는 상태값 totalCount를 toString()을 사용해 문자열로 변환해서 넣어주니,
input의 0은 지울 수 없지만 0이 아닌 숫자를 입력하면 앞자리에서 0이 사라지면서 의도한대로 정상 작동하게 되었다.

const [totalCount, setTotalCount] = useState(1);

const changeCount = (e: ChangeEvent<HTMLInputElement>) => {
  const count = +e.currentTarget.value;
  if (count > 100) {
    return;
  }
  setTotalCount(count);
};

return (
  <input type="number" value={totalCount.toString()} onChange={changeCount} />
)