[React Native] 텍스트 입력 처리하기(Text Input) 사용법

TextInput은 사용자가 텍스트를 입력할 수 있게 해주는 Core Component입니다. 이 컴포넌트는 텍스트가 변경될때마다 호출되는 함수를 받는 onChangeText prop과 텍스트가 제출될때 호출되는 함수를 받는 onSubmitEditing prop을 가지고 있습니다.

예를 들어 사용자가 입력할 때 그들의 단어를 다른 언어로 변역한다고 가정해 보겠습니다. 이 새로운 언어에서는 모든 단어가 동일하지 🍕로 쓰입니다. 따라서 Hello there Bob이라는 문자을 🍕 🍕 🍕로 번역됩니다.

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

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

export default PizzaTranslator

예제에서는 시간이 지남에 따라 변경되는 텍스트를 state에 저장합니다. 텍스트 입력을 통해 할 수 있는 일은 훨씬 더 많습니다. 예를 들어, 사용자가 입력하는 동안 텍스트를 검증할 수도 있습니다.