HybridApp-React Native 2세대 (CustomComponent)

<최종 화면> 임의로 Component를 상속받은 클래스를 만들어서 태그문을 안에 넣고 편하게 화면에 보일 수 있다.

---

init하기 전에 AVD를 켜놓자.

 

MainComponents.js 에있는 changeMessage 메소듣 onPress로 전달하자.

MyComponent2.js에서 받은 메소드는 해당 버튼을 누르면 실행하게 된다. 

새로운 파일을 추가하여 새로운 Component를 만들어보자.

만약 값을 전달할때 값을 누락해서 보내면 어떻게 될까?

결론, color,onPress는 상관없다.. 그러나 title을 쓰지 않으면 에러

onPress가 없는 버튼은 눌러도 함수호출이 되지 않는다.

값을 전달되지 않았을시 에러를 막기 위해, 값이 없을시 해당 값을 우선 초기화 할 수 있다.

아까 title이 없는 버튼의 주석을 풀고 실행해보자. 에러가 나지 않는다. title이 없어도 defaultProps에서 값을 주었다.

새로 파일을 추가하여 MyComponent4.js를 만들자.

만약 전달하는 속성이 여러개라면 받을때 해당 속성을 일일히 쓸 것인가? 한번에 받자.

우선 title, color, onPress를 전달하였다.

받을때 ...this.props만 사용하면 자동으로 값이 받아진다.

---

<복붙용 코드>

MainComponent.js

import React, {Component} from 'react';
import {View, Text, StyleSheet, Button} from 'react-native';
import MyComponent2 from './MyComponent2'
import MyComponent3 from './MyComponent3';
import MyComponent4 from './MyComponent4';
 
export default class MainComponent extends Component{
 
    //특별한 멤버변수
    state={
        msg:"Hello world"
    };
    render(){
        return(
            <View style={style.root}>
                <Text>{this.state.msg}</Text>
 
                {/* 나만의 Component를 만들어 보여주기 */}
                {/* property(속성)를 이용해서 값을 전달할 수 있음 */}
                <MyComponent name="sam" title="click me"></MyComponent>
                <MyComponent name="robin" title="button"></MyComponent>
 
                {/* 별로의 .js의 컴포넌트 사용 : import필요 */}
                {/* 버튼 콜백함수를 전달할 수 있음 */}
                <MyComponent2 onPress={this.changeMessage} aaa="kim" title="press" color="orange"></MyComponent2>
 
                <MyComponent3 onPress={this.changeMessage} title="hong" color="indigo"></MyComponent3>
                <MyComponent3 onPress={this.changeMessage} title="hong"></MyComponent3>
                
                {/* title은 버튼의 필수속성이어서 전달 안하면 에러 */}
                <MyComponent3 onPress={this.changeMessage} ></MyComponent3>
                <MyComponent3 title="hong" color="indigo"></MyComponent3>
 
                {/*  */}
                <MyComponent4 title="press me" color="green" onPress={this.changeMessage}></MyComponent4>
                
 
            </View>
        );
    }
 
    // state msg를 변경하는 메소드
    changeMessage= ()=>{
        this.setState({msg:"nice"});
    }
}// MainComponent class ...
 
 
//나만의 컴포넌트 클래스
class MyComponent extends Component{
    // 이 컴포넌트를 사용하면서 전달한 속성들은 모두 특별한 멤버변수에 저장됨
    // 그 특별한 멤버변수 this.props
    render(){
        return(
            <View style={{marginTop:16,}}>
                <Text style={{marginBottom:8,}}>Hello {this.props.name}</Text>
                <Button title={this.props.title}></Button>
            </View>
        );
    }
}
 
 
// 스타일 객체
const style= StyleSheet.create({
    root:{
        flex:1,
        padding:16,
    }
});

MyComponent2.js

import React, {Component} from 'react';
import {View, Text, Button} from 'react-native';
 
class MyComponent2 extends Component{
    render(){
        return(
            <View style={{margin:16}}>
                <Text> {this.props.aaa} </Text>
                <Button onPress={this.props.onPress} title={this.props.title} color={this.props.color}></Button>
            </View>
        );
    }
 
    clickBtn=()=>{
        alert('clicked!!');
    }
}
 
// 다른 문서에서 이 컴포넌트를 알수 있도록 export
export default MyComponent2;
 

MyComponent3.js

import React, {Component} from 'react';
import {View, Button} from 'react-native';
 
export default class MyComponent3 extends Component{
 
    // props가 전달되지 않았을 때를 대비하기 defaultProps
    // defaultProps 는 정해진 이름임
    static defaultProps= {
        title : "untitled",
        color : 'orange',
        onPress : ()=>{},
    }
 
    render(){
        return(
            <View style={{margin:16}}>
                <Button title={this.props.title} color={this.props.color} onPress={this.props.onPress}></Button>
            </View>
        );
    }
}

MyComponent4.js

import React,{Component} from 'react';
import {View, Button} from 'react-native';
 
export default class MyComponent4 extends Component{
    render(){
        return(
            <View style={{margin:16}}>
                {/* 전달 받은 속성을 한방에 적용하기 */}
                {/* 스프레드 연산자 : ...  */}
                <Button {...this.props} ></Button>
            </View>
        );
    }
}