생초보 react native로 App 만들기 도전 04 텍스트 입력처리

텍스트 입력 처리

TextInput은 사용자가 텍스트를 입력할 수 있는 Core Component입니다. 텍스트가 변경될 때마다 호출되는 함수를 사용하는 ChangeText prop과 텍스트를 제출할 때 호출되는 함수를 사용하는 SubmitEditing prop이 있습니다.

 

예를 들어, 사용자가 입력할 때 다른 언어로 단어를 번역한다고 가정해 보겠습니다. 이 새로운 언어에서는 모든 단어가 동일한 방식으로 쓰여집니다: 🍕. 그래서 "Hello There Bob"이라는 문장은 "🍕 🍕 🍕"로 번역됩니다.

 

Handling Text Input

 

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

const PizzaTranslator = () => {
  const [text, setText] = useState('');
  return (
    <View style={{padding: 10}}>
      <TextInput
        style={{height: 40}}
        placeholder="Type here to translate!"
        onChangeText={newText => setText(newText)}
        defaultValue={text}
      />
      <Text style={{padding: 10, fontSize: 42}}>
        {text
          .split(' ')
          .map(word => word && '🍕')
          .join(' ')}
      </Text>
    </View>
  );
};

export default PizzaTranslator;

 

이 예에서는 시간이 지남에 따라 텍스트가 변하기 때문에 텍스트를 상태로 저장합니다.

 

순서대로 정리하면

 

TextInput에 placeholder내용을 보여주고 TextInput에 글을 입력하면 onChangeText함수 호출 하여 text를  setText에 저장
<Text> Component의 속상값은 text를 setText 값으로 변경하여 출력한다.

 

App만들때 완전 필수 component이니 완전히 습득해야함.

텍스트 입력을 사용하면 훨씬 더 많은 작업을 수행할 수 있습니다. 예를 들어 사용자가 입력하는 동안 내부 텍스트의 유효성을 검사할 수 있습니다. 더 자세한 예는 제어된 구성 요소에 대한 반응 문서 또는 텍스트 입력에 대한 참조 문서를 참조하십시오.

텍스트 입력은 사용자가 앱과 상호 작용하는 방법 중 하나입니다. 다음으로, 다른 유형의 입력을 보고 터치를 다루는 방법에 대해 알아보겠습니다.