React Native - Handling Text Input

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={text => setText(text)}
        defaultValue={text}
      />
      <Text style={{padding: 10, fontSize: 42}}>
        {text.split(' ').map((word) => word && '🍕').join(' ')}
      </Text>
    </View>
  );
}

export default PizzaTranslator;

 

react native 공식문서에 있는 textinput을 다루는 코드이다. 
공백으로 구분하여 한 단어당 피자를 출력해 준다.

<TextInput> 태그에 placeholder라는 속성은 입력이 없을 때, 기본적으로 출력되는 text를 지정할 수 있다.
onChangeText라는 속성은 <TextInput> 태그에 입력이 있을 때, 변화를 감지하여 명시한 함수를 처리한다.
text => setText(text)라는 함수를 처리하는데 이는 입력받은 text를 받아와 state인 text의 값을 변화시킨다.

<TextInput> 아래 <Text> 태그에는 출력되는 값에 text를 ' '(공백) 단위로 끊어 피자를 mapping 시키는 함수를 적용시켰다. 따라서 공백을 기준으로 피자를 출력한다. 다음은 출력 화면이다.

 

초기 화면

2 단어를 입력했을 때

3 단어를 입력했을 때