[RN] CoreComponents - TextInput 속성
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 이벤트에 구독하는 것입니다. 또한, onSubmitEditing 및 onFocus와 같은 다른 이벤트도 구독할 수 있습니다. 그밖에 다양한 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
- 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