HybridApp-React Native 2세대 (Button눌렀을때 텍스트,이미지 변경)

<최종 화면>

버튼을 눌러서 텍스트를 변경한다. ( setState() 메소드를 이용해서 state변수 값 변경 )

 

버튼을 눌러서 이미지를 변경한다. (이번에는 화살표 함수가 아닌, 익명함수를 이용했다.)

---

플랫폼에 종속적이지 않는 cmd로 실행시키자.

만든 RN02Button 폴더로 들어가서 실행을 시키자.

run이 잘 됐다면 node창이 새로 열릴것이다.

작업할 새로운 파일을 만들자. ( MainComponent.js )

화면에 보이도록 index.js에서 사용하자.

우선 버튼을 만들고, 버튼을 누르면 알림창이 나오도록 해보자.

그러나, alert()는 웹에서 쓰이는 형식이다. 앱에 알맞는 것은 Alert클래스의 alert()를 사용하자.

함수를 익명 함수로 변경 가능하다.

두꺼운 화살표 함수로 변경 가능하다.

전역 지역에 따로 만들지 않고, onPress에 바로 사용 가능하다.

보통은 멤버 메소드로 사용한다. 이제 멤버 메소드로 사용하고, 버튼을 눌렀을 시 Text를 바꿔보자.

 

(결론, 이미지나, 텍스트를 바꿔주려면 State로 선언하여 State 변수를 바꿔야 된다.)

우선 안된다는 것을 확인해보자.

멤버 메소드로 함수를 정의한다.

이제 다시 새로 버튼을 만들어보자. (그 전에 내용은 주석)

React Native에서는 전역함수를 사용하는 것을 권장하지 않는다.

버튼을 누르면 함수를 호출하여 text 변수의 값을 바꿔보자.

text 변수의 값은 바뀌었다. 하지만 화면에 보이는 글씨는 변경되지 않았다.

멤버 변수로 선언하여, 제어해보자.

그러나 안된다.

익명 함수로 해보자. 안된다.

두꺼운 화살표 함수로 만들어 보자.

우선 text의 값은 변경된다.

그러나 화면 갱신이 안돈다. 화면 갱신을 되도록 해보자. 그러나 forceUpdate()는 권장하지 않는다.

화면 갱신이 된다.

화면의 갱신에 영향을 주는 state멤버 변수를 이용하자.

기존 내용을 주석 처리하고, 새로 다시 만들어서 연습해보자.

값 변경을 하고 , 자동 갱신이 되려면 state의 변수값을 변경해주자. setState()메소드 이용

이미지도 변경해보자.

 

이미지를 배치해보자.

지금까지 화면을 갱신하기 위해 뚜꺼운 화살표 함수를 이용했다. 

이유는 this의 매개체가 다르기 때문이다. 하지만 만약 다른 사람이 함수를 만들어 줬다면?

익명 함수도 화면을 갱신하도록 할 수 있다.

index.js

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

MainComponent.js

import React, { Component } from 'react'; //Component을 구조분해 할당으로 사용 
import {Text, View, Button, Alert, Image} from 'react-native';
 
class MainComponent extends Component{
 
    // 멤버 변수 만들기
    // let name; //ERROR
    // 멤버변수는 가급적 생성자 함수 안에서 this키워드로 생성 및 지정
    constructor(){
        //상속받은 클래스는 반드시 생성자를 만들때 명시적으로 부모생성자를 호출해야 만 함
        super();
        // 멤버변수 선언
        this.text= "Hello";
 
        // 화면의 갱신을 자동으로 해주는 데 영향을 주는 state멤버변수(객체 참조변수)
        this.state= {
            text: "Hello",
            img: require('./images/ms17.png'),
        };
    }
 
    // 이 컴포넌트 클래스가 화면에 보여줄 내용을 그려내는 함수[컴포넌트를 리턴하는]
    render(){
        //뷰(컴포넌트)를 리턴
        return (
            // <View style={ {padding:16, flex:1} }>
            //     {/* 1) 기본 버튼 필수속성 title - 버튼의 글씨지정 */}
            //     {/* 버튼클릭이벤트 처리 onPress속성 : 버튼 클릭시 발동할 콜백함수 지정 */}
            //     {/* <Button title="button" onPress={clickBtnFunction}></Button> */}
 
            //     {/* 익명함수를 변수에 대입하지 않고 곧바로 사용 가능 */}
            //     {/* <Button title="button" onPress={()=>{Alert.alert('click~');}}></Button> */}
 
            //     {/* 2) 콜백함수는 멤버메소드로 만드는 것을 권장 */}
            //     {/* 멤버사용할때는 반드시 this. 키워드가 있어야함 */}
            //     <Button title="button" onPress={this.clickBtn}></Button>
            // </View>
 
            // 3)버튼을 클릭시에 텍스트 변경하기
            // 방법은 기존 방식과 완전히 다름..
            // 기존에는 버튼을 클릭하면 글씨를 가지고 있는 TextView를 참조해서
            // 그 글씨를 변경했었음.
            // <View style={{padding:16, flex:1}}>
            //     <Button title="button" onPress={this.changeTextByArrow}></Button>
            //     {/* Text컴포넌트가 보여줄 글씨를 고정된 글씨가 아니라 */}
            //     {/* 변수로 설정하기 - 우선 전역 변수로 */}
            //     {/* <Text style={textStyle}>{text}</Text> */}
            //     {/* 4)멤버변수로 테스트 값 지정해보기 */}
            //     <Text style={textStyle}> {this.text}</Text>
            // </View>
 
            <View style={{flex:1, padding:16}}> 
                <Button title="change text" onPress={this.changeText}></Button>
                <Text style={textStyle}>{this.state.text}</Text>
 
                <View style={{marginTop:16, width:150}}>
                    <Button title="change image" color="orange" onPress={this.changeImage.bind(this)}></Button>
                </View>
                
                <Image source={this.state.img} style={imgStyle}></Image>
            </View>
 
 
        );
    } // render method..
 
    //화살표 함수가 아닌데도 바꿀 수 있는 방법
    changeImage= function(){
        // bind()로 전달된 this 객체가 이 함수 안에서의 this로 연결됨
        this.setState({img: require('./images/ms19.png')});
    }
 
    changeText= ()=>{
        this.state.text="nice to meet you.";
        // 자동갱신이 되려면 state의 변수값을 반드시 setState()메소드를 사용해야만 함.
        this.setState( {text:"nice to meet you."} );
    }
 
    // 3)실습에 사용할 메소드
    changeTextByClickBtn(){
        // Text컴포넌트가 보여주는 전역변수 값을 변경
        // text="Nice to meet you";
        // Alert.alert(text);
 
        // 4)멤버 변수 값 변경
        //일반 함수 안에서의 this는 함수(객체) 자체를 의미함
        // 그래서 this.text는 에러임
        // this.text="Nice to meet you";
    }
 
    // 함수를 만드는 다른 방법
    changeTextByAnounymous= function(){
        // 익명함수도 this는 본인객체를 의미함
        // 그래서 아래의 this.text가 MainComponent의 text변수가 아니었음
        this.text="Good"; //ERROR
    }
 
    // 4.3) 두꺼운 화살표함수로 만드는 방법
    changeTextByArrow= ()=>{
        this.text="Nice to meet you.";
        Alert.alert(this.text);
        // 어찌되었든 화면 갱신은 안됨
        // 화면을 갱신하라는 별도의 명령이 없어서..
        // 화면을 갱신하라는 메소드는 존재함 - 권장하지 않음
        this.forceUpdate(); // re-render()호출 함수
    }
 
    // RN에서는 화면을 갱신을 자동으로 이루어지는 것을 권장함
    // 그래서 Component클래스안에 아주 특별한 멤버변수를 이미 만들어 놓았음.
    //그 멤버의 이름은 state라고 부름
    // 이 state의 값을 변경하면 자동으로 화면이 갱신되도록 시스템되어 있음
    // 즉, 이 컴포넌트 클래스가 상태값(state)을 저장하고 있고
    // 이 state값을 화면에 보여준다는 개념을 형상화 하였음
 
    
 
    // 2)실습에 사용할 멤버메소드
    clickBtn(){
        Alert.alert('clicked button!!');
    }
 
} // MainComponent class..
 
// 1)실습에 사용할 버튼 클릭콜백 함수
// function clickBtnFunction(){
//     // alert('clicked'); //웹용 alert()
//     Alert.alert('clicked!');
// }
 
// 1.1) JS에서는 함수도 객체이므로 객체를 참조하듯이 함수를 변수에 넣을 수 있음
// 익명함수
// let clickBtnFunction= function(){
//     Alert.alert('press button');
// }
 
// 1.2) 두꺼운 화살표 함수
let clickBtnFunction=()=>{
    Alert.alert('press button!');
}
 
// RN에서는 전역함수를 사용하는 것을 권장하지 않음
// 객체지향이므로.. 객체의 버튼 이벤트는 그 객체안에 처리 메소드가 있는 것이 좋음
 
// 3)실습에서 사용할 전역변수
let text="Hello";
 
// 스타일 변수
const textStyle={
    marginTop:16,
    fontWeight:'bold',
    paddingLeft:10,
    paddingRight:10
}
 
const imgStyle={
    marginTop:8,
    flex:1,
    width:null,
    resizeMode:'cover',
}
 
// 다른 문서에서 이 클래스를 알아듣도록(import 하도록) export
export default MainComponent;