[React] input 태그의 왼쪽 0 제거하기

Intro

input 태그에 양수만 입력을 받으려고 한다. 그런데 백스페이스로 입력값을 지운 후 키패드로 숫자 입력시 가장 왼쪽에 최소값인 0이 그대로 존재하는 현상을 해결하려고 한다.

클릭으로 값 변경시 0 이하로 내려가지 않음 (Good!)

 

키패드로 값 입력시 왼쪽에 0 존재 (Bad...)

 

 

기존 코드

import { ChangeEvent, useState } from "react";
import styled from "styled-components";

const InputTest = () => {
  const [inputValue, setInputValue] = useState<number>(0);

  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value; // string 형태

    console.log("value : ", value, typeof value);

    const newValue = Number(value); // string을 number로 저장하여 가장 왼쪽의 0 삭제\

    console.log("newValue : ", newValue, typeof newValue);

    // 음수 값이 입력되지 않도록 제한
    if (newValue >= 0) {
      setInputValue(newValue);
    }
  };

  return (
    <>
      <div>{`현재 입력값 : ${inputValue}`}</div>
      <SInput
        min={0}
        value={inputValue} // 명시적으로 문자열로 변환
        onChange={handleInputChange}
      />
    </>
  );
};

export default InputTest;

const SInput = styled.input.attrs({ type: "number" })`
  background-color: #d1d1d1a6;
  height: 25px;
  width: 100px;
  border: transparent;
  border-radius: 5px;
  padding-left: 10px;
  margin-top: 10px;
  &:focus {
    outline: none;
  }
`;

 

input 태그에 값 변경시 입력되는 value는 string 형태이고 내가 보는 "01", "010" 이런 식으로 입력되지만 숫자로 변환한 newValue는 내가 원하는 1, 10 숫자 형태로 변환되는 것을 확인할 수 있다.

따라서 실제 setInputValue에 저장되는 값은 내가 저장하고자 하는 숫자로 잘 입력되지만 눈에 보이는 input 태그는 그렇지 않다.

 

 

 

 

 

문제 해결

value 값을 명시적으로 문자열로 변환시켜 해결할 수 있었다.

// 변경 전
value={inputValue}

// 변경 후
value={inputValue.toString()}

적용 후 키패드로 숫자 입력시 자동으로 왼쪽의 0이 없어진다.

 

개선된 코드

import { ChangeEvent, useState } from "react";
import styled from "styled-components";

const InputTest = () => {
  const [inputValue, setInputValue] = useState<number>(0);

  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value; // string 형태

    const newValue = Number(value); // string을 number로 저장하여 가장 왼쪽의 0 삭제\

    // 음수 값이 입력되지 않도록 제한
    if (newValue >= 0) {
      setInputValue(newValue);
    }
  };

  return (
    <>
      <div>{`현재 입력값 : ${inputValue}`}</div>
      <SInput
        min={0}
        value={inputValue.toString()} // 명시적으로 문자열로 변환
        onChange={handleInputChange}
      />
    </>
  );
};

export default InputTest;

const SInput = styled.input.attrs({ type: "number" })`
  background-color: #d1d1d1a6;
  height: 25px;
  width: 100px;
  border: transparent;
  border-radius: 5px;
  padding-left: 10px;
  margin-top: 10px;
  &:focus {
    outline: none;
  }
`;