Q.
구현 기능 중에 금액을 입력하는 부분이 있었고, 우선적으로 입력 제한을 숫자에 대해서 제한을 해두었었는데 다음과 같은 요구가 추가 되었다.
입력되는 금액은 1000원 단위여야 한다.
해당 기능은 input의 onBlur시에 입력된 value 값이 1000으로 나누었을 때의 나머지를 처리하여 해결 했다.
// 궁금하신 분들을 위해 코드 추가
const validateMoney = () => {
if (money === 0) return;
if (money >= 1000 && money % 1000 === 0) return;
openModal({
id: "ALERT",
args: {
title: "금액 설정",
msg: "1000원 단위의 금액만 설정 가능합니다.",
okBtnLabel: "확인",
},
});
setMoney(0);
};
단순히 이게 끝이었다면, 해당 글은 작성되지 않았을 것이다.
먼저 작성해 두었던 코드를 같이 보자
<Styled.Input
type="number"
inputMode="numeric"
pattern="[0-9]*"
onChange={handleOnChange}
value={money === 0 ? "" : money}
placeholder={placeHolder}
/>
모바일에서 사용될 것을 고려하여 가상 키보드 설정을 해주는 inputMode 속성을 적어 주었고, 입력 과정에서 숫자만 입력될 수 있도록 pattern에 정규식도 추가했다.
또한 input 태그의 종류를 지정해주는 type 또한 number로 지정해주었다.
type, inputMode와 pattern에 대해 익숙하지 않다면 다음 링크를 잠깐 보고 오자
- type="number"
- 사용 시 input 옆에 화살표 모양의 기본 클릭으로 값을 조정할 수 있는 UI가 제공된다. - inputMode
- 유의할 부분은 해당 속성이 데스크탑의 Safari에서는 가상 키보드 지원이 안된다고 한다. (모바일에서는 가능) - pattern
- 정규식을 통해 입력되는 value를 match 해준다.
여기서 만난 문제는 다음과 같다.
해당 상태에서 영어를 입력하면 문제 없이 입력 제한이 되지만, 한/영 전환을 해서, 한글을 입력하게 되면 화면에 값이 자꾸 입력 되어 보였다.
해결
결론부터 말하면 원인은 셋 중에 type="number"해당 속성 때문이다. 해당 버그는 심지어 링크에서도 한글로 입력해보면 재현 할 수 있다. 링크를 타고 가서 "ㅁ" 을 입력해보자
영어는 입력 안되고 숫자만 입력이 되는데, 한글 자음이 입력되는 현상을 발견할 수 있을 것이다.
내 케이스는 type="number"를 사용하지 않음으로 문제를 해결 했다.
기존 코드에서 이미 inputMode 와 예시에는 적진 않았지만 onChange의 e.target. value가 숫자인지 내부적으로 이미 검증하고 있었다.
마무리
해결 하면서 느낀 코드의 문제점은 정확히 어떤 속성인지 모르고 여러 개를 동시에 설정해둔 것이 가장 큰 것 같다.
비슷한 것 같은 속성을 여러 개 사용하니 정확히 어떤 부분에서 문제인지 확인을 하는데도 오래 걸렸다.
심지어 위에서 언급은 안 했지만 pattern 속성은 내 코드에서 아무런 역할을 해주고 있지 않았다.
추가
- type="number"의 장점은 별 다른 구현 없이 숫자 외의 입력을 막아 준다. 다만
- 주의 위에서 처럼 한글이 입력되었을 때 실제로 "" 값이 전달 되면서 원하지 않는 값이 전달 될 수 있다는 것이다.
- 주의 위의 한글 상태에서는 onChange로 전달 되는 e.target.value가 "" 으로 처리되어서 정규식 또한 작동 하지 않는다.
- 장점 해당 속성을 사용 했을 때 자체적으로 step , max , min 등을 활용하여 좀 편하게 제한을 둘 수 도 있다.
- 다만 내 경우는 해당 속성을 설정 했을 때 자동으로 표시되는 ui 가 마음에 들지 않았고 실용성도 떨어졌다. - 한글이 입력되는 버그는 type="number" 속성을 주고 onChange 에서 e.nativeEvent.data를 활용하면 한글 자음도 값이 전달되어 내부적으로 정규식 처리를 하면 처리 할 수 있다고 한다.
- 결국 내부적으로 onChange에서 처리를 해야 하는데 이러면, 자체적으로 제한 해주는 이점이 많이 사라지는 것 같다.
Reference
