toLocaleString 사용에 있어서

문제점 파악

인풋에서 3자리 수 마다 ,를 찍어서 보여주기 위해
toLocaleString 메서드를 사용했다. 그런데 얘가
숫자.toLocaleString => SyntaxError 뜬다.
숫자를 문자열로 바꿔주기 위해서는 변수에 담은 숫자를 사용해야 한다고 함.

그래서

const handleChange = (e) => {
    const { id, value } = e.target;
    let price = id === "price" ? Number(value) : value;
    // toLocaleString은 변수에 담긴 값을 사용할 수 있는 메서드
    price = id === "price" ? price.toLocaleString() : price;
    setData((data) => ({
      ...data,
      [id]: price,
    }));
  };

이렇게 코드를 작성해서 인풋에 숫자를 입력하면 3자리 이상부터는 입력되지 않고 콘솔에 이런 부분이 뜬다.

파싱될 수 없다고 나온다. 어디서 잘못된거냐!
아 내가 price의 value를 price.toLocaleString()으로 저장하기 때문에 얘는 지금 문자열이고 '121,211'이런 형태의 ㅇㅇ 이 상태로
let price = id === "price" ? Number(value) : value;로 들어갔을때 일케되는것
Number('121,211') => NaN 가 되기 때문에 저렇게 뜨는 것이다.

해결방법

이것저것 생각해보다가 일단 내가 정착한 방법은 이것이다.

1. input의 type을 text로 바꾼다
2. input 속성 중 pattern에 정규표현식을 사용해서 text 중 문자열에 대한 입력을 제한해줌
3. event.target.id가 price면 input의 value에서 ,를 제거하고 숫자로 변경함 price아니면 걍 value로 반환
4. id가 price면 숫자로 형변환 시킨 value에서 ,를 넣어줘야하기 때문에 toLocaleString 사용
5. setData에 전부 넣어서 바뀐 값으로 렌더링

자 일단 이렇게만 보면 3번에서 왜 , 제거하고 숫자로 만든다음에 다시 , 붙여주냐고 물어볼 수 있다.

일단 3번을 빼고 진행하면 ,가 안생기는데 그 이유는 !!
애초에 input type이 text라서 입력받는 값이 string인데 toLocaleString() 메서드는 string에 사용하면 별 다른 포매팅을 진행하지 않는다. 따라서 ,가 들어가지 않게된다!!!!

const handleChange = (e) => {
    const { id, value } = e.target;
    let price = value;
    if (id === "price") {
      price = id === "price" ? parseFloat(value.replace(/,/g, "")) : value;
      price = price.toLocaleString();
    }
    setData({ ...data, [id]: price });
  };

순서대로 해석해보자면
id가 "price"라면, price의 값을 value에서 replace(/,/g,"")를 통해서 ,를 없앤다. 그리고 숫자로 변환해주기 위해 parseFloat을 쓴다. parseInt가 아닌 parseFloat을 쓰는 이유는 사용자 입력값이 소수점일 수도 있기때문에 그렇게 했다.

그 다음, 숫자로 변환한 price에 toLocaleString() 메서드를 사용해서 최종적으로 ,가 추가된 문자열로 반환해주고 그것을 setData에 넣어 현재의 state를 업데이트해준다.

느낀점

toLocaleString을 쓸 때는 숫자일때만!!! 꼭 문자열로 어떤 포매팅을 시켜준다는 점을 잊지말아야겠다
그리고 정규표현식으로 replace 하는 부분은 앞으로도 자주 써봐야겠다.