[React Native] TextInput

카테고리 : Development
태그: development · reactnative · TextInput
등록일: 2023년 10월 02일
최근 업데이트: 2023년 10월 02일

---

• TextInput
  • 🤳🏻 주요 특징:
  • 🤳🏻 사용 방법:
  • 🤳🏻 속성 :

TextInput

사용자로부터 텍스트를 입력받을 수 있는 입력 필드를 생성

🤳🏻 주요 특징:

• 텍스트 입력: TextInput은 사용자가 텍스트를 입력할 수 있는 입력 필드를 제공합니다.
• 다양한 옵션: TextInput은 다양한 옵션을 통해 텍스트 입력의 동작을 커스터마이징할 수 있습니다. 이전 답변에서 설명한 속성을 사용하여 텍스트 입력을 제어할 수 있습니다.
• 이벤트 처리: onChangeText, onSubmitEditing, onFocus, onBlur 등의 이벤트를 활용하여 사용자의 입력에 반응할 수 있습니다.
• 다중 줄 입력: multiline 속성을 활성화하면 여러 줄의 텍스트 입력을 처리할 수 있습니다.
• 키보드 제어: keyboardType을 사용하여 다양한 키보드 유형을 설정할 수 있으며, secureTextEntry를 사용하여 비밀번호 입력을 처리할 수 있습니다.
• 텍스트 스타일링: style 속성을 사용하여 입력 필드의 스타일을 지정할 수 있습니다.
• 플레이스홀더 텍스트: placeholder 속성을 사용하여 입력 필드에 플레이스홀더 텍스트를 표시할 수 있습니다.

🤳🏻 사용 방법:

FlatList를 사용하기 위해서는 다음 단계를 따릅니다:

1. TextInput 컴포넌트 임포트:

import { TextInput } from "react-native";

1. TextInput 컴포넌트 사용

import React, { useState } from "react";
import { View, TextInput } from "react-native";

function MyTextInput() {
  const [text, setText] = useState(""); // 상태를 통해 텍스트 값을 관리합니다

  const handleChangeText = (newText) => {
    setText(newText); // 텍스트가 변경될 때 상태를 업데이트합니다
  };

  return (
    <View>
      <TextInput
        value={text}
        onChangeText={handleChangeText}
        placeholder="텍스트를 입력하세요"
      />
    </View>
  );
}

export default MyTextInput;

1. 상태 관리: TextInput의 값을 변경하려면 상태(state)를 사용합니다. 위 예제에서는 this.state.text를 통해 현재의 텍스트 값을 관리하고 있습니다.
2. 이벤트 처리: onChangeText, onSubmitEditing, onFocus, onBlur 등의 이벤트를 사용하여 사용자 입력에 반응하거나 특정 동작을 수행할 수 있습니다.
3. 키보드 제어: keyboardType 속성을 사용하여 원하는 키보드 유형을 선택하고, secureTextEntry를 사용하여 비밀번호 입력을 활성화합니다.
4. 다중 줄 입력: multiline 속성을 true로 설정하여 여러 줄의 텍스트 입력을 처리할 수 있습니다.
5. 스타일링: style 속성을 사용하여 입력 필드의 스타일을 지정합니다. 예를 들어, 폰트 크기, 색상, 배경색 등을 설정할 수 있습니다.

🤳🏻 속성 :

1. value (string):
   • 현재 텍스트 입력 필드의 값을 제어하는 데 사용됩니다. 이 값을 설정하면 입력 필드의 내용이 변경됩니다.
2. defaultValue (string):
   • 초기 텍스트 입력 필드의 값을 설정할 때 사용됩니다. 사용자가 입력하는 동안 이 값은 변경되지 않습니다.
3. placeholder (string):
   • 입력 필드에 아무 값도 없을 때 표시되는 플레이스홀더 텍스트를 설정합니다.
4. placeholderTextColor (string):
   • 플레이스홀더 텍스트의 텍스트 색상을 설정합니다.
5. editable (boolean):
   • 사용자 입력을 허용할지 여부를 결정합니다. false로 설정하면 입력 필드가 읽기 전용 상태가 됩니다.
6. maxLength (number):
   • 입력 필드에 입력할 수 있는 최대 문자 수를 제한합니다.
7. keyboardType (string):
   • 키보드의 종류를 설정합니다. 예를 들어, ‘numeric’, ‘email-address’, ‘phone-pad’ 등이 있습니다.
8. autoCapitalize (string):
   • 자동 대문자 변환을 설정합니다. ‘none’, ‘sentences’, ‘words’, ‘characters’ 등의 값을 가질 수 있습니다.
9. autoCorrect (boolean):
   • 자동 수정을 활성화 또는 비활성화합니다. 사용자가 입력하는 동안 맞춤법 교정을 수행할지 여부를 결정합니다.
10. secureTextEntry (boolean):
    • 비밀번호 입력 필드를 만들 때 사용되며, 입력한 텍스트를 마스킹하여 보호합니다.
11. onChangeText (function):
    • 입력 필드의 텍스트가 변경될 때 호출되는 콜백 함수를 정의합니다.
12. onSubmitEditing (function):
    • 사용자가 입력을 완료하고 “완료” 또는 “다음” 버튼을 눌렀을 때 호출되는 콜백 함수를 정의합니다.
13. onFocus (function):
    • 입력 필드가 포커스를 받았을 때 호출되는 콜백 함수를 정의합니다.
14. onBlur (function):
    • 입력 필드가 포커스를 잃었을 때 호출되는 콜백 함수를 정의합니다.
15. style (object):
    • 입력 필드의 스타일을 지정하는데 사용됩니다. 폰트 크기, 색상, 배경색 등을 설정할 수 있습니다.
16. multiline (boolean):
    • 여러 줄의 텍스트 입력을 가능하게 합니다.
17. numberOfLines (number):
    • multiline이 활성화된 경우 표시할 줄 수를 설정합니다.