사소한 삽질(천 단위로 "," 찍기)

과제에서 input태그의 입력값에 천 단위로 ","를 찍어야 하는 부분이 있었다. 처음에는 자체적으로 로직을 적용해서 구현하려고 했었다.

로직이 생각보다 복잡했는데 그 이유인 즉슨 이랬다.
쉼표가 찍히는 구간이 input의 event.target.value를 inputPrice라고 한다면 inputPrice에 쉼표가 찍히는 구간은

• inputPrice가 1자리, 2자리, 3자리 수일 때, ","는 0번 찍히고
• inputPrice가 4자리, 5자리, 6자리 수일 때, ","는 1번 찍히고
• inputPrice가 7자리, 8자리, 9자리 수일 때, ","는 2번 찍히고
  ...

i = 1부터 Math.floor((priceStr.length - 1) / 3)일 때까지 특정 작업을 반복해야 하는데
1. 원본에서 뒷자리 세자리를 끊어서 ","를 붙인다.
2. 원본에서 뒷자리 세자리를 제외한 숫자들만 남긴다.
3. 1번의 작업을 반복한 결과와 2번의 작업의 결과를 붙인다.

단계로 나누면 굉장히 짧지만, 기본적으로 event.target.value가 string형 데이터로 들어오고, 대부분의 작업은 배열의 메서드로 이뤄지기 때문에 string과 number와 array를 계속적으로 왔다갔다해야하는 작업이었다.
그래서 꽤 길게 작업을 했음에도 원치 않는 결과가 나오던 차에 페어분이 진행하신 작업을 보게 되었다.

const priceHandler = (event) => {
    const priceStr = event.target.value;
    const priceNum = Number(priceStr.replaceAll(",", ""));
    setPrice(priceNum.toLocaleString());
  };

1. event.target.value를 변수에 담아온다.
2. event.target.value가 네자리 숫자가 되기 전까지는 "priceStr.replaceAll(",","")" 이 부분이 필요가 없다. 하지만 네자리부터는 이미 value에 쉼표가 찍힌 결과값을 가져와서 이 함수가 진행되기 때문에 쉼표를 다시 없애주기 위해 해당 작업이 필요하다. 그리고 3번의 작업을 위해서 number형으로 파싱시켜준다.
3. .toLocaleString() 메서드는 문자열 데이터를 this로 삼아 세자리마다 ","를 찍어주는 메서드다.

지금쯤부터는 모든 함수의 로직을 손수 구현할 필요는 없다는 생각이 든다. 일견 어렵지 않아보이는 작업도 실상은 생각보다 손이 훨씬 더 많이 가는 경우가 많다. 이정도로 흔한 기능에 대해서는 메서드가 이미 구현되어 있는 경우가 많기 때문에 과제에 들어가기 전에 한번쯤 검색해볼 필요를 느낀다.