1. Home
  2. 리액트 네이티브[React Native] 0.4x
  3. 기본[THE BASICS]
  4. 텍스트입력 처리하기

텍스트입력 처리하기

TextInput은 사용자가 텍스트를 입력할 수 있는 기본 컴포넌트입니다. 텍스트가 변경될 때마다 호출되는 함수를 사용하는 onChangeText prop과 텍스트 제출(Submit)시 호출되는 함수를 사용하는 onSubmitEditing prop이 있습니다.

예를 들어, 사용자가 입력할 때 단어를 다른 언어로 번역한다고 가정해 봅시다. 이 새로운 언어에서는 모든 단어가 같은 방식으로 쓰여집니다: 🍕. 따라서 “Hello there Bob”이라는 문장은 “🍕🍕🍕”로 번역됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import React, { Component } from 'react';
import { AppRegistry, Text, TextInput, View } from 'react-native';

class PizzaTranslator extends Component {
  constructor(props) {
    super(props);
    this.state = {text: ''};
  }

  render() {
    return (
      <View style={{padding: 10}}>
        <TextInput
          style={{height: 40}}
          placeholder="Type here to translate!"
          onChangeText={(text) => this.setState({text})}
        />
        <Text style={{padding: 10, fontSize: 42}}>
          {this.state.text.split(' ').map((word) => word && '🍕').join(' ')}
        </Text>
      </View>
    );
  }
}

AppRegistry.registerComponent('PizzaTranslator', () => PizzaTranslator);

이 예제에서는 text가 시간이 지남에 따라 변경되기 때문에 state에 저장합니다.

텍스트 입력으로 할 수 있는 일이 많이 있습니다. 예를 들어, 사용자가 입력하는 동안 텍스트의 유효성을 검사할 수 있습니다. 보다 자세한 예제는 제어된 컴포넌트의 React 문서 또는 TextInput에 대한 레퍼런스 문서를 참조하십시오.

텍스트 입력은 아마도 state가 시간이 지남에 따라 자연스럽게 변경되는 컴포넌트의 가장 간단한 예일 것입니다. 다음으로 레이아웃을 제어하는 이 컴포넌트와 같은 다른 유형의 컴포넌트를 살펴보고 ScrollView에 대해 배웁니다.

Was this article helpful to you? Yes No

How can we help?