[RN] TextInput 속성

리액트 네이티브에서 input 태그로는 TextInput이 있다.
이 태그는 키보드를 이용해 텍스트를 입력할 때 사용한다.

TextInput 태그는 다양한 속성을 갖고 있는데, 대표적인 몇 가지를 정리할 것이다.

 

style
: borderWidth와 borderRadius 등 스타일을 지정할 수 있다.

- text

 

value
: 텍스트 input에 표시할 값이다.
(React의 input 태그에서 value와 동일하다.)

- string

 

 

defaultValue
: 사용자가 입력을 시작할 때 변경되는 초기값을 제공한다.
- string

 

editable
: text 편집 가능 유무로, 기본 값은 true이다.
- boolean

 

 

maxLength
: 입력할 수 있는 최대 문자 수를 제한한다.

- number

 

multiline
: 여러 줄을 입력할 수 있으며 기본 값은 false이다.

- boolean

 

 

onChange, onChangeText
: 입력하는 텍스트가 변경될 때 호출되는 콜백 함수이다.
onChange는 onChange의 event 안에 eventCount, target, text 값을 반환하지만,
onChangeText는 오직 text만 반환한다.

 

placeholder, placeholderTextColor
: 왼쪽은 TextInput 입력 전에 미리 보여질 문구이고,
오른쪽을 사용해 placeholder의 글자 색을 바꿀 수 있다.

 

autoCapitalize

: TextInput이 특정 문자를 자동으로 대문자로 표시하도록 한다.- characters: 모든 문자
- words: 각 단어의 첫 글자
- sentences: 각 문장의 첫 글자 (기본 값)
- none: 자동으로 대문자 변환 X

 

autoFocus

: true인 경우 componentDidmount나 useEffect가 실행될 때 초점을 맞춘다.
(기본값은 false이다)
- boolean

 

blurOnSubmit

: 한 줄인 경우 기본 값이 true이고, multiline일 때는 기본 값이 false이다.
multiline일 때 blurOnSubmit이 false면 return(enter)키를 눌렀을 경우
onSubmit이 되지 않고 줄바꿈이 된다.

 

keyboardType
: 텍스트 입력 시 열리는 키보드를 설정할 수 있다.
(종류는 리액트 네이티브 공식 문서에서 확인할 수 있다.)

 

textAlign
: 입력 텍스트를 입력 필의 왼쪽, 가운데 또는 오른쪽에 맞춰준다.

- left, center, right

textAlign="left"

textAlign="center"

textAlign="right"

textContentType
: 사용자의 입력에 대해 예상되는 키보드 및 시스템 정보를 제공한다.

 

(종류는 리액트 네이티브 공식 문서에서 확인할 수 있다.)