React에서 금액 입력하기

[React] React에서 금액 입력하기

개발하다보면 금액 입력할 때가 있다. 이때 1000자리마다 ,를 입력해주어야 하는데 이게 여간 귀찮은 일이 아니다. 이럴 때 빨리 해결하는 방법이 만들어진 npm package를 사용하는 것이다. 이번 시간에는 react-number-format package를 설치하여 NumberFormat 컴포넌트를 사용하여 금액을 입력받아보자. 우선 해당 npm 모듈을 설치하자. 명령어 : yarn add react-number-format or npm install react-number-format 해당 package만 설치하였으면 사실상 끝났다. 코드는 아래 참고해보자.

import NumberFormat from "react-number-format";
import React, { useCallback } from "react";

const NumberFormatPayment = props => {
  const { inputRef, onChange, ...other } = props;

  const isAllowed = useCallback(values => {
    const { value } = values;
    if (String(value).includes(".")) return false;
    return true;
  }, []);

  const onHandleChange = useCallback(
    e => {
      e.target.value = e?.target?.value.replaceAll(",", "") || "";
      onChange(e);
    },
    [onChange]
  );

  return (
    <NumberFormat
      {...other}
      getInputRef={inputRef}
      onChange={onHandleChange}
      thousandSeparator
      displayType={"input"}
      allowNegative={false}
      isAllowed={isAllowed}
    />
  );
};

export default NumberFormatPayment;

보면 크게 어렵지 않다. NumberFormat 컴포넌트에 props 값만 잘 넘겨주면 된다. 우선 thousandSeparator로 1000자리마다 구분점을 넣어주었다. 그리고 금액 입력이니 allowNegative로 음수는 막아주었고, isAllowed에는 소수점이 들어간 경우 처리하지 않도록 isAllowed 함수를 구현하여 넘겨주었다. onHandleChange 함수에서는 실제 value 값에서는 ,가 필요 없으므로 ,가 있는 경우 제거 하고 onChange 함수에 넘겨주었다. 위 함수를 보면 크게 어려운 내용이 하나도 없다. 한번 읽어보면 쉽게 이해할 수 있을 것이다.

마지막

해당 내용은 틀릴 수도 있다는 것을 감안하여 봐주세요. 틀린 내용 및 오탈자 수정 요청 환영입니다.