React에서 input에 숫자만 입력되도록 하는 방법

회원 정보를 입력할 때 전화번호를 입력하는 인풋 창에 숫자만 입력할 수 있도록 만들어야 했습니다.

<input type="number"/>

로 input의 타입을 number로 지정하면 숫자만 입력되긴 하지만 인풋창 내부에 수량을 조정하는 화살표 버튼이 생기며 -, e 가 입력되는 상황이 발생합니다. css로 버튼을 없앨 수 있었으나 -, -e 가 입력되는 것은 막을 수 없었으므로 type='text' 로 지정하고 함수를 전달하여 문자를 입력하면 지워버리는 방식을 선택했습니다.

React를 사용하고 있으므로 전화번호 입력란에 숫자만 입력하게 하려면, onKeyUp 이벤트 핸들러를 문자열이 아닌 함수로 제공해야 합니다. 따라서 onKeyUp에 함수를 할당하고, 그 함수 내에서 사용자 입력을 확인하여 숫자가 아닌 문자를 제거하는 로직을 구현했습니다.

const getNumberOnly = (event:React.KeyboardEvent<HTMLInputElement>) => {
  const input = event.target as HTMLInputElement;
  input.value = input.value.replace(/[^0-9]/g, '');
};

	<input type="text" onKeyUp={handleKeyUp}/>

이렇게 되면 인풋 창에 문자를 입력하자 마자 지워지게 됩니다.