[React Native] react-native-masked-text 사용법

 

안녕하세요 모리스입니다.😊

이번 포스트에서는 react-native-masked-text 라는 라이브러리에 대해서 작성해보려고 해요.

 

 

사용자가 앱에 운전면허 번호를 입력한다고 가정해볼게요.

일반적으로는 React Native의 TextInput 태그를 이용해 입력을 받아요.

국내 면허증의 운전면허 번호는 xx-xx-xxxxxx-xx 형태로 구성되어 있는데요,

일반 TextInput 안에서는 사용자가 직접 -를 입력하지 않는 이상 xxxxxxxxxxxx처럼 붙어서 입력되죠.

 

저는 사용자가 -를 직접 입력하지 않아도 자동으로 포맷팅되길 원했어요.

물론 TextInput으로도 로직을 구현할 수 있지만... UI라이브러리 사용하는거 별로 안좋아 하지만... 그래도 귀찮...으..니..까...ㅎㅎ

설치

해당 라이브러리는 npm을 통해 설치할 수 있어요. 설치 방법은 아래와 같아요:

npm install react-native-masked-text --save

 

사용법

운전면허증 번호를 입력받는 예제로 돌아가서, 이를 기준으로 사용법을 설명해볼게요.

import { TextInputMask } from 'react-native-masked-text';
					.
                    .
                    .
<TextInputMask 
	type={'custom'}
	options={{ mask: **-**-******-** }}
    onChangeText={(text) => {
      changeText(text);
    }}
/>

 

나머지 옵션들은 기존 React Native의 TextInput과 유사하니 placeholder, style 등을 그대로 적용할 수 있어요.
여기서 type은 'custom'으로, 입력받는 형태를 자유롭게 지정할 수 있어요.

options의 mask는 입력받는 텍스트의 형식을 정해주는 부분이에요.

더 자세한 사용법과 옵션은 공식 문서에 잘 정리되어 있어요.

위 코드처럼 적용하면, 사용자가 면허증 번호를 입력할 때 자동으로 -이 삽입되는 걸 확인할 수 있어요.

 

그런데 문제가 하나 있었어요. onSubmitEditing을 이용해서 TextInput에서 TextInputMask로 이동하려고 했는데, 에러가 발생했어요.

폭풍 구글링을 해보니, 일반적인 TextInput끼리는 onSubmitEditing 옵션에서 다음 TextInput의 ref를 참조해 focus() 함수를 사용해 이동하면 되지만, TextInput에서 TextInputMask로 이동할 때는 조금 다르게 ref.getElement().focus()를 사용해야 하더라고요.

아래처럼 코드를 수정하면 키보드의 next 버튼으로도 정상적으로 다음 입력창으로 이동할 수 있어요:

import { TextInputMask } from 'react-native-masked-text';
						.
                        .
                        .
<TextInput 
	placeholder={'text'}
	style={{...}}
    onChangeText={(text) => {ChangeText(text);}}
    				.
                    .
    onSubmitEditing={() => {
      maskedTextInputRef.current.getElement().focus();
    }}
    blurOnSubmit={false}
/>
<TextInputMask 
	ref={maskedTextInputRef}
/>

공식 문서를 잘 참고해서 사용하면, 운전면허번호뿐만 아니라 다양한 입력 형식에도 유용하게 활용할 수 있을 것 같아요.

참조 및 인용

react-native-masked-text