React 세미나 1 가격 입력 시 쉼표 생성 관련

[Day Ahn]

리액트 과제 관련하여 아무리 구글링 해도 해답을 찾지 못해 질문 드립니다ㅠㅠ

모달 내에서 가격 입력 시 자동으로 쉼표가 생성되게 하는 스펙을 구현하라고 하셨는데, 이를 구현하고 보니 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만 이하의 가격을 입력하고 추가하는 스펙은 별다른 오류 없이 작동합니다.

왜 이런 현상이 발생하는지 도움 주시면 감사하겠습니다 ㅠㅠ

[안중원]

콘솔에 로그 찍어보니까 이렇게 뜨네요.

console.log(
  e.target.value,
  "->",
  e.target.value.replace(",", ""),
  "->",
  parseInt(e.target.value.replace(",", ""))
);

9,0000 -> 90000 -> 90000 
90,0000 -> 900000 -> 900000
900,0000 -> 9000000 -> 9000000
9,000,0000 -> 9000,0000 -> 9000

replace 함수가 가장 처음에 등장하는 것만 바꿔서 생기는 문제입니다. 가장 간단한 해결책은 replaceAll 함수입니다. 또는 패턴으로 문자열 대신 regex /,/g를 넣어주는 방법도 있습니다.
참고로 복붙할 때만 잘 되는 이유도 로그 찍어보면 알 수 있습니다.

123456789 -> 123456789 -> 123456789

[Hyunmin Woo (Hanul)]

좀 딴소리지만 Web API 인 Intl 을 사용하는 것도 추천드립니다.

new Intl.NumberFormat().format(12341234); // '12,341,324'

브라우저 호환성도 좋습니다.

다만 너무 편해서 ps 공부에 별 도움이 되지 않을 수는 있습니다.