TextInput 컴포넌트에서 자주 사용하는 Props

Props

value : 입력값을 설정 →  value={name}

onChangeText : 텍스트 변경 이벤트 처리 → onChangeText={setName}

placeholder : 입력 전 안내 문구 → placeholder="안내 문구"

placeholderTextColor : placeholder 색상 변경 → placeholderTextColor="gray"

secureTextEntry : 비밀번호 입력 모드 → secureTextEntry={true}

keyboardType : 키보드 타입 설정 → keyboardType"numeric"

autoCapitalize : 자동 대문자 변환 설정 → autoCapitalize="none"

multiline : 여러 줄 입력 허용 → multiline={true}

maxLength : 최대 입력 글자 수 제한 → maxLength={10}

editable : 입력 가능 여부 설정 → editable={false}

 

예제 코드

import { useState, useRef } from 'react';
import { View, TextInput, Button } from 'react-native';

export default function Ref() {
    const inputRef = useRef(null);
    const [ text, setText ] = useState('');
    const [ x, setX ] = useState(false);
    return (
        <View>
            <TextInput
                ref={inputRef}
                placeholder='이름 입력'
            />
            <TextInput
                value={text}
                placeholder='아이디 입력'
                onChangeText={setText}
            />
            <TextInput
                placeholder="비밀번호 입력"
                placeholderTextColor="blue"
                secureTextEntry={true}
                keyboardType="numeric"
                maxLength={4}
            />
            <Button
                title='입력 가능 여부 설정 버튼'
                onPress={()=>setX(!x)}
            />
            <TextInput
                value={"1234"}
                editable={x}
            />
        </View>
    );
}