[React-Native] 텍스트입력 받기(TextInput)

 

로그인, 회원가입등등 여러곳에서 사용되는

사용자로부터 input Text받아오는 법을 알아보도록 하겠습니다.

 

새로운 프로젝트 react_native_03을 만들었습니다.

 

초기설정

진행하기 전에 초기화면을 설정합니다.

input을 받는 것을 따로 관리해주기 위해 input.js페이지를 만듭니다.

App.js에 임포트하고 다음과 같이 변경해줍니다.

 

App.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React, {Component} from 'react';
import {View, Text, StyleSheet} from 'react-native';
import Input from './src/input';

class App extends Component {
  render() {
    return (
      <View style={styles.mainView}>
        <Input />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  mainView: {
    flex: 1,
    backgroundColor: 'white',
    paddingTop: 50,
    alignItems: 'center',
    //justifyContent: 'center',
  },
  subView: {
    backgroundColor: 'yellow',
    marginBottom: 10,
  },
  anotherSubView: {
    flex: 2,
    backgroundColor: 'yellow',
    marginBottom: 10,
    width: '100%',
    alignItems: 'center',
    justifyContent: 'center',
  },
  mainText: {
    fontSize: 20,
    fontWeight: 'normal',
    color: 'red',
    padding: 20,
  },
});

export default App;

 

 

TextInput

 

TextInput IMPORT

import { TextInput } from 'react-native';

먼저 텍스트 인풋을 받아볼 input.js 페이지에 TextInput을 임포트해옵니다.

 

State생성 및 TextInput태그 사용 

입력받은 텍스트를 저장해둘 State를 생성합니다.

여기서 State를 사용하므로, input은 클래스형으로 만들어 주어야 한다는 사실을 알 수 있습니다.

 

input.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

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

class Input extends Component {
  state = {
    myTextInput: 'asdfasdf',
  };
  render() {
    return <TextInput value={this.state.myTextInput} style={styles.input} />;
  }
}

const styles = StyleSheet.create({
  input: {
    width: '100%',
    backgroundColor: '#cecece',
    marginTop: 20,
  },
});

export default Input;

 

결과)

참고로 안드로이드와 ios의 보여지는 UI가 다르다고합니다.

보통 클릭하면 텍스트를 작성할 수 있게되는데, 클릭해도 반응이 없습니다.

이밴트함수를 만들어야합니다.

 

 

onChangeText Property

텍스트가 입력될 때 마다 이밴트를 발생시켜주는 Property 를 추가 

텍스트가 입력될 때 마다 이벤트가 발생하면서 -> 입력된 텍스트를 이용해 state값을 업데이트하는 함수를 실행시켜야함

 

input.js

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

class Input extends Component {
  state = {
    myTextInput: '',
  };

//변경된 텍스트로 state를 변경하는 함수 
  onChangeInput = event => {
    this.setState({
      myTextInput: event,
    });
  };
  
  
  render() {
    return (
      <View style={styles.mainVeiw}>
        <TextInput
          value={this.state.myTextInput}
          style={styles.input}
          onChangeText={this.onChangeInput}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  input: {
    width: '100%',
    backgroundColor: '#cecece',
    marginTop: 20,
    fontSize: 25,
    padding: 10,
  },
  mainVeiw: {
    width: '100%',
  },
});

export default Input;

다음과 같이 텍스트가 변경될 때마다, state를 업데이트 시키는 함수를 불러옵니다.

(변경된 텍스트 를)event라는 이름의 인자로 받아 받은 인자를 setState를 이용하여, state를 업데이트 하는데 사용하였습니다.

 

결과)

텍스트 입력이 가능해졌습니다.

 

 

Property

자세한 사항은 공식문서를 참고

https://reactnative.dev/docs/textinput

TextInput · React Native

이름	기능
multiline={true/false}	키보드 입력값이 많아지면, 개행을 해줌 (true일 때)
maxLength={n}	최대 n자의 글자만 입력이 가능함
autoCaptialize={'none'}	첫문자를 대문자로 바꾸는 것을 막아줌 (none일 때, 보통 로그인에 사용 )
editable={true}	입력불가