기본 형식 통화 반응

이 튜토리얼에서는 React Native를 사용할 때 숫자를 통화 형식으로 지정하는 방법을 살펴봅니다. React Native를 사용하면 react-number-format 라이브러리를 사용하여 숫자를 통화 형식으로 지정할 수 있습니다.

기본 형식 통화 반응

먼저 react-number 형식을 사용하려면 이 라이브러리를 설치해야 합니다. 다음 명령을 사용하여 이 라이브러리를 설치할 수 있습니다.

npm i react-number-format

라이브러리를 설치한 후 React 애플리케이션의 react-number-format에서 NumberFormat을 가져와야 합니다.

import NumberFormat from 'react-number-format';

그런 다음 다음 코드를 작성하여 사용하십시오.

import * as React from 'react';
import {Text, View} from 'react-native';
import NumberFormat from 'react-number-format';

export default function App() {
  return (
    <View>
      <NumberFormat
  value = {12345} displayType = 'text'
  thousandSeparator
  prefix = '$'
  renderText = {(value) => <Text>{value}</Text>}
      />
    </View>
  );
}

위의 코드에서 기본 기능에 다른 구성 요소가 있음을 알 수 있습니다.

‘NumberFormat’은 입력 또는 텍스트의 숫자 형식을 지정하는 추가 기능으로 구성됩니다. 일부 부분은 value, displayType, thousandSeparator, prefix 등입니다.

value는 형식을 지정할 숫자로 사용됩니다. 준비된 텍스트 또는 플로트 숫자일 수 있습니다.

isNumericString prop은 값이 숫자(포맷되지 않음)의 문자열 표현인 경우 적절해야 합니다.

‘displayType’은 형식이 지정된 숫자가 렌더링되는 방식을 지정합니다. 입력이 제공되면 문자가 입력될 때 서식이 적용되는 입력 요소가 생성됩니다. ‘텍스트’인 경우 표준 텍스트와 같은 범위에서 제공된 값의 형식을 지정합니다.

thousandSeparator는 천 단위와 같이 자릿값을 기준으로 숫자를 구분하는 데 사용됩니다. 한편 ‘접두사’는 통화기호를 일반화하기 위해 숫자 바로 앞에 붙는다.

span 이외의 요소에서 formattedValue를 렌더링하려는 경우 유용할 수 있는 renderText 기능이 있습니다. 또한 구성 요소에 추가된 모든 사용자 지정 소품을 반환하여 렌더링된 요소에 전달할 수 있습니다.

출력:

위의 프로그램에서 값을 숫자로 입력했습니다. 출력에서 통화가 꽤 좋은 형식임을 알 수 있습니다.

따라서 React Native를 사용하면 react-number-format 라이브러리를 사용하여 숫자를 통화 형식으로 지정할 수 있습니다.