React.js material-ui: 텍스트 필드를 금액으로 포맷하는 방법
React.js에서 material-ui Textfield 컴포넌트를 사용할 때, 천 단위 구분 기호와 소수점이 있는 금액으로 입력을 포맷하는 필요성이 발생할 수 있습니다. 이 튜토리얼에서는 이러한 포맷을 달성하기 위한 두 가지 접근 방법을 살펴보겠습니다: react-number-format 라이브러리 및 toLocaleString() 메서드를 사용하는 방법입니다.
react-number-format 사용
react-number-format 라이브러리는 다양한 숫자 형식으로 입력 필드를 포맷하는 간편한 방법을 제공합니다. 시작하기 전에 다음 명령을 실행하여 라이브러리가 설치되어 있는지 확인하세요:
npm install react-number-format설치가 완료되면 라이브러리에서 NumberFormat 컴포넌트를 import하고 코드에 추가하세요:
import NumberFormat from 'react-number-format';이제 react-number-format을 material-ui TextField 컴포넌트와 통합할 수 있습니다. 다음은 예시입니다:
<NumberFormat
customInput={TextField}
onValueChange={(values) => setNumberFormatState(values.value)}
value={numberFormatState}
variant="outlined"
/>여기서는 TextField 컴포넌트를 customInput으로 NumberFormat에 전달합니다. onValueChange 이벤트를 사용하여 포맷된 값을 캡처하고 상태 변수인 numberFormatState에 저장할 수 있습니다.
toLocaleString() 사용
텍스트 필드를 금액으로 포맷하는 또 다른 방법은 JavaScript에서 제공하는 toLocaleString() 메서드를 사용하는 것입니다. 이 메서드는 지역 설정에 따라 숫자를 포맷된 문자열로 변환합니다.
이 포맷팅을 적용하기 위해 코드를 다음과 같이 수정하세요:
const handleInputChange = (e) => {
const inputValue = e.target.value.replace(/,/g, '');
const formattedValue = parseFloat(inputValue).toLocaleString('en', {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
});
setDebitAmount(formattedValue);
};
...
<TextField
variant="outlined"
margin="normal"
required
fullWidth
type="text"
id="debitAmount"
label="Amount"
value={debitAmount}
onChange={handleInputChange}
InputProps={{
classes: { input: classes.textfield1 },
}}
/>이 예시에서는 Textfield 값이 변경될 때 handleInputChange 함수가 호출됩니다. 해당 함수는 입력에서 기존 쉼표를 제거하고 값을 숫자로 변환한 다음 toLocaleString() 메서드를 사용하여 숫자를 소수점이 있는 금액으로 포맷합니다(소수점 이하 2자리까지).
결론
이 튜토리얼에서는 material-ui Textfield를 금액으로 포맷하는 두 가지 다른 접근 방식을 살펴보았습니다. react-number-format 라이브러리는 이러한 포맷팅을 편리하게 달성할 수 있는 방법을 제공하며, toLocaleString() 메서드는 JavaScript의 내장 기능을 사용하여 더 간단한 솔루션을 제공합니다.
react-number-format 또는 toLocaleString() 중 어느 것을 선택하든 이제 천 단위 구분 기호와 소수점이 있는 금액으로 Textfield 입력을 포맷하는 도구를 갖추게 되었습니다. 프로젝트 요구 사항에 가장 적합한 방법을 선택하고 사용자 친화적인 입력 필드를 만들기 시작하세요.
