React 세미나 1 가격 입력 시 쉼표 생성 관련 #221
Description
리액트 과제 관련하여 아무리 구글링 해도 해답을 찾지 못해 질문 드립니다ㅠㅠ
모달 내에서 가격 입력 시 자동으로 쉼표가 생성되게 하는 스펙을 구현하라고 하셨는데, 이를 구현하고 보니 8번째 자리에서 짤리는 현상을 발견했습니다.
123,456 → 1,234,567 → 8 입력 → 1,234
999,999 → 9,999,999 → 9 입력 → 9,999
이런 식으로 앞에 네 자리만 남기고 뒤에 네 자리만 남습니다.
더 큰 수를 복사 붙여넣기 하여 input 안에 집어넣어도 한자리 더 입력하면 뒤에 네 자리가 사라집니다.
123456789 붙여넣기 → 123,456,789 로 표시됨 → 0 입력 → 123,456
그런데 또 열 자리 수를 붙여넣기 하고 한자리 더 입력하면 일곱 자리가 사라집니다.
1234567890 붙여넣기 → 1,234,567,890 으로 표시됨 → 0 입력 → 1,234
아래는 가격을 입력하는 input 태그입니다. onChange 이벤트 발생 시 value 문자열에 쉼표를 다 뗀 후 parseInt 하여 price 에 저장합니다.
<input type="text" className="modal-input-bar" placeholder="5,000"
value={ insertCommas(input.price) }
onChange={ e => {
setInput({...input, price: parseInt(e.target.value.replace(",", ""))});
}}
/>
아래는 insertCommas 함수입니다.
function insertCommas(n) {
if(!n){ return ""; }
let s = n.toString();
for (let i = s.length - 3; i > 0; i -= 3)
s = s.slice(0, i) + ',' + s.slice(i);
return s;
}
Invalid Input일 경우 alert를 띄우는 함수는 추가 버튼을 눌렀을 때만 실행되므로 이 오류와는 무관한 것으로 보입니다.
100만 이하의 가격을 입력하고 추가하는 스펙은 별다른 오류 없이 작동합니다.
왜 이런 현상이 발생하는지 도움 주시면 감사하겠습니다 ㅠㅠ