HybridApp-React Native 2세대 (TextInput 입력칸에 글자 입력후 버튼으로 화면 갱신)

<최종하면> TextInput에 입력한 값을 받아서 화면에 갱신해본다.

---

예제들을  d드라이브에 HybridApp에 모아두고 있다 그래서 해당 경로까지 가서 RN03TextInput 을 만들자.

MainComponent.js가 화면에 나오도록 바꿔주자.

스타일도 적용해보자.

코드를 작성해다면, 우선 화면에 잘나오는지 확인해보자.

TextInput을 화면에 배치하고 스타일을 주자.

입력된 글씨를 보여주기 윈한 변수를 만들자.

화면이 갱신되려면 state변수를 사용하자.

입력된 글씨를 보여줄 Text에 스타일을 주자.

TextInput에 글씨가 바뀌었을때, 반응하는 onChangeText를 이용하자.

changeText의 두꺼운 화살표 함수로 state변수의 값을 변경하자. setState()메소드 이용.

위 실행 화면은 입력할때마다 자동으로 갱신된다. 그러나 입력을 다하고 버튼을 눌렀을 시 변경해보자.

onSubmitEditing을 이용해서 한번에 변경해보자. 화살표 함수가 아닐시 bind를 해줘야 알아들을 수 있다.

이제 여러줄을 입력하고 화면에 보이도록 해보자.

처음에 글씨를 작성하고 보이는 칸이 작으므로 최소 라인수를 지정해놓자.

그러나 계속해서 줄바꿈을 할때마다 TextInput의 크기가 계속 커진다. 그것을 방지하기 위해 최대 높이 값을 지정하자.

입력한 값을 저장할 변수를 만들고, 입력 완료 버튼을 눌렀을 시 해당 글씨를 화면에 갱신하자.

34번줄의 onChangeText={value=>this.inputText2=value} 볼줄 알아야한다.

Text가 바뀌면 함수를 그 안에 바로 쓴 것이다.,

번외로 state 변수를 사용할때 this.state.으로 접근한다. 하지만 현업에서는 코드가 길어지는 것을 좋아하지 않는다.

그래서 state변수를 아래 사진과 같이 사용한다. (구조분해 할당)

index.js

/**
 * @format
 */
 
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import MainComponent from './MainComponent';
 
AppRegistry.registerComponent(appName, () => MainComponent);
 

MainComponent.js

import React, {Component} from 'react';
import {Text, View, TextInput, Button, StyleSheet, Alert} from 'react-native';
 
//클래스를 만들때 따로 안쓰고 바로 export쓸 수 있다.
export default class MainComponent extends Component{
 
    constructor(){
        super();
        // 특별한 멤버변수 (화면 자동갱신되는)
        this.state={
            text:"Hello",
            msg:"",
        };
 
        // 일반 멤버변수 ( 사용자입력값을 저장하는 변수 )
        this.inputText='';
        this.inputText2='';
    }
    render(){
        const {msg}=this.state; //구조분해할당
        return(
            <View style={style.root}>
                <TextInput style={style.TextInput} onChangeText={this.changeText} onSubmitEditing={this.submitEdit.bind(this)}></TextInput>
 
                {/* 입력된 글씨를 보여주는 Text컴포넌트 */}
                <Text style={style.plaintText}>{this.state.text}</Text>
 
                {/* 버튼을 눌렀을 때 Text가 입력된 값으로 변경되도록 */}
                <View style={{marginTop:16,}}>
                    <Button title="완료" onPress={this.clickBtn}></Button>
                </View>
 
                {/* 여러줄 입력 */}
                {/* true라는 boolean값을 JS문법이므로 */}
                <TextInput onChangeText={value=>this.inputText2=value} multiline={true} numberOfLines={4} style={style.TextInput2}></TextInput>
                <Button title="입력완료" onPress={()=> this.setState({msg:this.inputText2})}></Button>
                <Text style={style.plaintText}>{msg}</Text>
                
            </View>
        );
    }
 
    // 키보드의 완료 버튼 클릭시 반응
    submitEdit= function(){
        // 익명함수 안에서 bind()로 전달된 객체가 이함수안에서 this가 됨
        this.setState({text: this.inputText});
    }
 
    // 버튼 클릭시 함수
    clickBtn=()=>{
        // 입력값을 저장하고 있는 변수 this.inputText의 값을 
        // Text컴포넌트가 보여주고 있는 state변수 text에 대임
        this.setState({text:this.inputText});
    }
 
    // TextInput의 onChangeText속성에 지정한 콜백함수
    // 이 함수는 TextInput의 글씨가 변경될때마다 발동하면서
    // 매개변수로 변경된 글씨를 전달함
    changeText= (value)=>{
        // 파라미터 : TextInput에 써져있는 글씨문자열
        //this.setState({text:vlaue});
        // Alert.alert('changed Text');
 
        //일반멤버변수에 입력값 저장
        this.inputText=value;
    }
}
 
// 스타일 객체
const style= StyleSheet.create({
    root:{
        flex:1,
        padding:16,
    },
    TextInput:{
        borderWidth:2,
        backgroundColor:'white',
        borderColor:'green',
        borderRadius:8,
        paddingLeft:16,
        paddingRight:16,
        height:40,
    },
    plaintText:{
        marginTop:16,
        fontWeight:'bold',
        paddingLeft:10,
        paddingRight:10,
    },TextInput2:{
        marginTop: 16,
        borderWidth:2,
        borderColor:'blue',
        borderRadius: 8,
        padding:16,
 
        // TextInput이 일정 사이즈 이상 되지 않도록.. 내용이 더 길어지면 자동 스크롤
        maxHeight:150,
    },
});