react input에 숫자만 쓸 수 있게 하는법

• 프론트 작업을 하다보면 input에 숫자만 적을 수 있게 해야하는 경우가 종종 있다.
  • 회원가입의 비밀번호
  • 이벤트 등록시 물품의 금액을 적음
• 이런 경우 크게 두가지 방법이 있어 정리해보고자 한다.

input의 type:number 를 사용하는 방법

• 아주 간단하고 심플한 방법이다.

<input type="number" min="1" max="5" />

• 이 방법의 장점은 추가로 최소값과 최대값도 손쉽게 설정할 수 있다는 점이다.
• 다만 이렇게 할 경우 input 창에 불필요하게 화살표가 나오게 되는데
• 간단한 해결방법은 css를 추가하는 것이다.

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

• 나의 경우 styled-components였는데 input이 div안에 있었기 때문에

const testDiv = styled.div`
	input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  input[type="number"] {
    -moz-appearance: textfield;
  }
`

• 이런식으로 작성했다.

따로 함수를 만드는 방법

import {useState} from 'react';

const App = () => {
  const [value, setValue] = useState('');

  const handleChange = event => {
    const result = event.target.value.replace(/\\D/g, '');

    setValue(result);
  };

  console.log(value);
  console.log(typeof value);
  console.log(Number(value));

  return (
    <div>
      <div>!Hello 123 World 456?___</div>
      <input
        type="text"
        placeholder="Your fav number"
        value={value}
        onChange={handleChange}
      />
    </div>
  );
};

export default App;

• 이 방법은 함수를 따로 커스텀했기 때문에 추가로 여러 설정들을 붙이거나 수정할 수 있다는 점이다.

const handleChangeDiscountValue = event => {
    const result = event.target.value.replace(/\\D/g, "");
    if (result < 0 || result > 99) setDiscountValueLimit(true);
    else setDiscountValueLimit(false);
    setDiscountValue(result);
};

• 이런식으로 state를 하나 설정해주면 이 값을(여기서는 0보다 작거나 99보다 클 경우)

<div>
    <div>!Hello 123 World 456?___</div>
    <input
      type="text"
      placeholder="Your fav number"
      value={value}
      onChange={handleChange}
    />
		<ErrText>
      {discountValueLimit ? (
          <span>1부터 99까지의 숫자만 입력할 수 있습니다.</span>
      ) : null}
    </ErrText>
</div>

• 이렇게 조건부 렌더링을 걸어서 에러메시지를 출력할 수도 있다.(여기서는 styled-components를 사용했다.)

출처

https://curryyou.tistory.com/356

https://melonicedlatte.com/web/2017/05/18/165344.html

https://wellsw.tistory.com/27

https://bobbyhadz.com/blog/react-only-number-input