React Native/CoreComponents

[RN] CoreComponents - TextInput 속성

foo_bar.oh 2024. 4. 2. 13:09
 

TextInput · React Native

A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad.

reactnative.dev


TextInput

앱 내에서도 웹의 Input 태그처럼 텍스트를 입력하기 위해 사용하기 위해서 React Native에서 제공하는 CoreComponents들 중 TextInput 이 있습니다. 

React Native를 통해서 앱 내에서도 키보드를 이용해
텍스트를 입력하기 위해 사용되는 기본 컴포넌트입니다.

Props 

TextInput은 가장 기본적인 사용 사례는 text를 input에 삽입하고 사용자 입력을 읽기 위해 onChangeText 이벤트에 구독하는 것입니다. 또한, onSubmitEditingonFocus와 같은 다른 이벤트도 구독할 수 있습니다. 그밖에 다양한 Props들을 갖는데, 대표적으로 다음과 같이 있습니다.  

 

allowFontScaling  

공식문서 바로가기

 

이 Props 속성은 텍스트 크기 접근성 설정을 고려하여 글꼴 크기를 조정할지 여부를 지정하는 기능을합니다. 

type boolean
기본값 true

autoCapitalize

공식문서 바로가기

 

이 Props 속성은 TextInput의 특정 문자를 자동 대문자화하도록 하는 기능을 합니다. 이 속성은 일부의 키보드 유형에서는 지원이 되지 않습니다. ex) name-phone-pad

  • characters: 모든 문자를 대문자화합니다.
  • words: 각 단어의 첫 글자를 대문자화합니다.
  • sentences: 각 문장의 첫 글자를 대문자화합니다 (기본값).
  • none: 아무 것도 자동으로 대문자화하지 않습니다."
type enum('none', 'sentences', 'words', 'characters')

autoComplete

공식문서 바로가기

 

이 Props 속성은 시스템에 자동 완성 힌트를 지정하여 자동 채움을 제공할 수 있도록 하는 기능입니다. 안드로이드에서는 시스템이 콘텐츠 유형을 식별하기 위해 휴리스틱을 사용하여 항상 자동 완성을 제공하려고 합니다. 자동 완성을 비활성화하려면 autoComplete를 off로 설정하십시오.

  • additional-name
  • address-line1
  • address-line2
  • birthdate-day (iOS 17+)
  • birthdate-full (iOS 17+)
  • birthdate-month (iOS 17+)
  • birthdate-year (iOS 17+)
  • cc-csc (iOS 17+)
  • cc-exp (iOS 17+)
  • cc-exp-day (iOS 17+)
  • cc-exp-month (iOS 17+)
  • cc-exp-year (iOS 17+)
  • cc-number
  • country
  • current-password
  • email
  • family-name
  • given-name
  • honorific-prefix
  • honorific-suffix
  • name
  • new-password
  • off
  • one-time-code
  • postal-code
  • street-address
  • tel
  • username

autoCorrect

공식문서 바로가기

 

이 Props 속성은 자동 수정의 기능입니다. 만약 false이면, 자동 수정을 비활성화합니다. 기본값은 true입니다.

type boolean
기본값 false

autoFocus

공식문서 바로가기

 

이 Props 속성은 만약 true 일 경우, componentDidMount 시점 또는 useEffect에서 입력에 초점을 맞추도록 합니다.
기본 값은 false입니다. 

type boolean
기본값 false

blurOnSubmit

공식문서 바로가기

 

이 Props 속성은 만약 true일 경우, 텍스트 필드는 제출할 때 blur처리를 하게 됩니다. 기본 값은 한줄의 경우 true이고, 여러 줄 필드에 대해 false입니다.

여러 줄의 필드의 경우 blurOnSubmit을 true로 설정하면, 리턴 키를 누르면 필드가 블러 처리되고 onSubmitEditing 이벤트가 트리거됩니다. 

type boolean
기본값 true

caretHidden

공식문서 바로가기

 

이 Props 속성은 캐럿이 숨겨지도록 하는 기능입니다. 기본 값은 false 입니다.

type boolean
기본값 false
"캐럿"이란
입력 위치를 나타내는 깜박이는 세로 막대

clearButtonMode 

공식문서 바로가기

 

이 Props 속성은 텍스트 보기의 오른쪽에 지우기 버튼이 나타나는 시점을 결정합니다. 이 속성은 단일 행 TextInput 구성 요소에만 지원이 됩니다. 기본 값은 never입니다.

type enum('never', 'while-editing', 'unless-editing', 'always')

onChange

공식문서 바로가기

이 Props의 속성은 입력하는 텍스트가 변경이 될 때 호출이 되어지는 콜백함수입니다. 다음과 같이 함께 호출이 됩니다. 

 
type ({nativeEvent: {eventCount, target, text}}) => void

onChangeText

공식문서 바로가기
텍스트 입력의 텍스트가 변경될 때 호출되는 콜백 함수입니다. 변경된 텍스트는 단일 문자열 인수로 콜백 핸들러에 전달됩니다.
onChange는 onChange의 event 안에 eventCount, target, text 값을 반환하지만,
onChangeText는 오직 text만 반환한다.

onFocus

공식문서 바로가기

 

이 Props 속성은 텍스트 입력이 포커스될 때 호출되는 콜백 함수입니다. 

type ({nativeEvent: LayoutEvent}) => void

예시 코드

import { TextInput } from 'react-native';

const MyComponent = () => {
  const handleFocus = () => {
    console.log('텍스트 입력이 포커스되었습니다.');
  };

  return (
    <TextInput onFocus={handleFocus}  />
  );
};

 

onKeyPress

공식문서 바로가기

 

이 Props 속성은 키가 눌렸을 때 호출되는 콜백입니다. 이 콜백은 keyValue가 각각 'Enter' 또는 'Backspace'인 경우와, 스페이스를 포함한 다른 입력된 문자인 경우에 호출됩니다. onChange 콜백보다 먼저 발생합니다.

type ({nativeEvent: {key: keyValue} }) => void

 

onLayout

공식문서 바로가기

 

이 Props 속성은 마운트될 때와 레이아웃 변경 시 호출됩니다. 

type ({nativeEvent: LayoutEvent}) => void

 

onScroll

공식문서 바로가기

 

이 Props 속성은 콘텐츠를 스크롤시 호출되는 이벤트입니다. Android에서는 contentSize가 제공되지 않으며, ScrollEvent로부터 다른 속성도 포함될 수 있습니다.

type ({nativeEvent: {contentOffset: {x, y} }}) => void

 

 

 


혹시, TextInput을 사용할때, 키보드의 위치가 하단에 고정이 안된다면? 
여기를 참고해주세요.
 

[RN] 키보드 화면 고정하는 방법

⚠️ 이슈 내용 앱을 사용하면서, TextInput창에 텍스트를 입력하는 순간이 있다. 상황에따라 다르지만, 키보드가 올라올 때, 버튼이나 텍스트도 같이 밀려올라와야 하는 경우도 있지만, 대게의 경

tkolab.tistory.com