아직 내용 수정 안함 HybridApp-React Native 2세대 (기능 - Stateful(extends),Stateless(함수형) Component)

state 변수를 변경하면 화면 갱신

props는 상수이므로 전달 받은 값을 변경 불가. 전달한 부모에서 변경 가능

 

자바 객체 만드는 방법

1. 리터럴 {name:"sma", age:20}

2. 함수로 객체 생성

 

Mian class에 화면에 보이는 것들을 배치 시킬 수 있지만, 다로 컴포넌트를 만들어서 Main에서는 그 컴포넌트 <>만 쓰면 된다. 예) 함수도 내용은 밑에 함수안에 쓰고 Main에서는 함수 호출만 하듯이...

<최종 화면>

---

우선 AVD를 실행시켜놓자.

작업할 경로로 접근하여 init하자.

Main class에 <Text>를 놓지 않고, 임의의 컴포넌트를 만들어서 배치하자.

임의로 만든 Mycomponent는 Component이기 때문에 extends로 Component로 상속받자.

import React, {Component} from 'react';
import {View, Text, Button} from 'react-native';
 
export default class Main extends Component{
    render(){
        return(
            <View style={{flex:1, padding:16}}>
                {/* 새로운 Custom Component를 만드는 2가지 방법 */}
                {/* 1. stateful Component : state멤버변수보유 [extends Component] */}
                <MyComponent></MyComponent>
 
            </View>
        );
    }//render method..
}//Main class..
 
// stateful component
class MyComponent extends Component{
    render(){
        return(
            <View>
                <Text style={{margin:8, padding:8}}>Hello MyComponent</Text>
            </View>
        );
    }
}