HybridApp-React Native 2세대 (기능 - DataArchitecture )

<최종 화면>

상위 클래스에서 값을 전달해서 화면에 보여주고, props를 이용해서 전달 받은 값을 사용한다.

( 값 전달 : Main -> First -> Second )

버튼을 누르면 Main에 changeData() 메소드를 Main에서 전달->First에서 전달->Second에서 changeData()호출하여 state 변수 값을 바꾼다. 그럼 화면에 보여주고 있던 state 변수 값이 일제히 변경된다.

---

우선 AVD를 켜놓자.

그리고 작업할 경로에서 init하자.

 

화면에 보여줄 text를 state변수로 지정하여 보여주자.

이제 First 클래스 (컴포넌트)를 만들고, 임의로 작성한 data로 데이터를 전달하자.

그 데이터는 자동으로 props에 생성된다.

First class에서 그 데이터를 보여주자.

First class와 마찬가지로 Second class (컴포넌트)를 만들어서 전달하자.

import React, {Component} from 'react';
import {View, Text, Button} from 'react-native';
 
export default class Main extends Component{
 
    // Main클래스 state에 저장된 문자열 데이터
    state={data:"Hello"};
 
    render(){
        return(
            <View style={{padding:16,}}>
                <Text>Main클래스의 state Data :{this.state.data}</Text>
 
                {/* 부모-자식->손자->증손자로 data를 전달하는 구조 */}
                {/* Main의자식 컴포넌트 추가하면서 데이터 전달 */}
                <First data={this.state.data}></First>
            </View>
        );
    }
}//Main class..
 
// Main의 자식 컴포넌트
class First extends Component{
    render(){
        return (
            <View style={{padding:16,backgroundColor:'lightgreen'}}>
                <Text>Main으로 부터 받은 Data : {this.props.data}</Text>
 
                {/* Main에게 받은 데이터를 First의 자식에게 전달하기 */}
                <Second data={this.props.data}></Second>
            </View>
        );
    }
}//First class..
 
// First의 자식(Main의 손자) 컴포넌트
class Second extends Component{
    render(){
        return (
            <View style={{padding:16,backgroundColor:'blue'}}>
                <Text style={{color:'white'}}>First로 부터 받은 Data : {this.props.data}</Text>
            </View>
        );
    }
}
 
 

이제 전달 받은 값을 변경해보자.

에러가 난다. 이유는 state 변수와 달리 props는 상수이다. 변경이 불가능하다.

임의로 state 변수를 만들어서 변경한다면 그 당시 값만 변경되고 First, Main 값에 영향을 주지 않는다.

이를 위해 메소드를 전달하자. Main의 state를 변경해주는 역할을 전달해서 Second에서 사용하면 된다.

---

<복붙용 코드>

Main.js

import React, {Component} from 'react';
import {View, Text, Button} from 'react-native';
 
export default class Main extends Component{
 
    // Main클래스 state에 저장된 문자열 데이터
    state={data:"Hello"};
 
    // state를 변경하는 메소드를 만들고 이를 자식엣 사용할 수 있도록 전달
    chageData=(data)=>{
        // this.setState({data:data}); //키값과 벨류가 같은면 생략 가능
        this.setState({data});
    }
 
    render(){
        return(
            <View style={{padding:16,}}>
                <Text>Main클래스의 state Data :{this.state.data}</Text>
 
                {/* 부모-자식->손자->증손자로 data를 전달하는 구조 */}
                {/* Main의자식 컴포넌트 추가하면서 데이터 전달 */}
                <First data={this.state.data} onPress={this.chageData}></First>
            </View>
        );
    }
}//Main class..
 
// Main의 자식 컴포넌트
class First extends Component{
    render(){
        return (
            <View style={{padding:16,backgroundColor:'lightgreen'}}>
                <Text>Main으로 부터 받은 Data : {this.props.data}</Text>
 
                {/* Main에게 받은 데이터를 First의 자식에게 전달하기 */}
                <Second data={this.props.data} onPress={this.props.onPress}></Second>
            </View>
        );
    }
}//First class..
 
// First의 자식(Main의 손자) 컴포넌트
class Second extends Component{
 
    state= {data:this.props.data}
 
    render(){
        return (
            <View style={{padding:16,backgroundColor:'blue'}}>
                <Text style={{color:'white'}}>First로 부터 받은 Data : {this.props.data}</Text>
 
                {/* 전달받은 값 변경하는 버튼 */}
                {/* 변경할 데이터를 state멤버로 보유하고 있는 Main에서 변경하는 코드 작성해야하며 이를 이 Second에서 호출해야만 함 */}
                <View style={{marginTop:8}}>
                    <Button color="orange" title="changeData" onPress={()=>this.props.onPress("Nice")}></Button>
                </View>
            </View>
        );
    }//render method..
 
    clickBtn=()=>{
        this.setState({data:"Nice"});
    }
}//Second class..