[Javascript] 금액 입력 시 자동으로 콤마 삽입

Introduction

input으로 금액을 입력받을 때, input 값에서 자동으로 콤마가 삽입되도록 하는 방법을 알아보려 한다.

 

동작 과정

1. onChange를 이용하여 현재 price 값을 갱신해야 한다.

2. price의 숫자 이외의 문자는 모두 제거한다.

3. 정규식을 이용하여 3자리마다 콤마를 삽입한다.

4. 콤마를 삽입한 값을 setPrice로 갱신한다.

 

※ price의 값은 콤마가 포함된 string이므로 콤마를 제외하고 숫자로 변환하는 과정을 거쳐야 한다.

<input

         placeholder="금액"

         value={price}

         onChange={(e) => {

                  const inputPrice = e.target.value.replace(/\D/g, '');

                  const formattedPrice = inputPrice.replace(/\B(?=(\d{3})+(?!\d))/g, ',');

                  setPrice(formattedPrice);

          

 />

 

결과