[React Native -19] Navigation Callback함수 전달

navigation.navigate() 함수로 페이지 이동을 할 때 두번째 인자에 Params를 전달할 수 있었다

 

<기존 코드>

add_goods.js

componentDidUpdate(prevProps,prevState){
    if(prevProps.route.params.imageURLs !=this.props.route.params.imageURLs){
        this.setState({imageURLs: this.state.imageURLs.concat(this.props.route.params.imageURLs)r});
    }
}

this.props.navigation.push("Gallery", { imageLength: this.state.imageURLs.length });

 

gallery.js

this.props.navigation.navigate('AddGoods',{imageURLs:this.state.imageURLs});

 

gallery의 imageURLs값을 add_goods로 넘겨 줄 수있지만 this.props.route.params.imageURLs로 받기 때문에 state변수를 변경해주려면 componentDidUpdate를 사용할 수 밖에 없었다. 

Params로 함수를 보낼 수 있지 않을까를 생각해보았고, 이벤트 리스너의 개념을 적용해보기로 하였다

 

이벤트 리스너 (event listener)
이벤트가 발생했을 때, 그 처리를 담당하는 함수 
즉, 이벤트 리스너를 이용하면 특정 DOM에 이벤트가 발생할 때 특정 함수를 호출할 수 있다

 

 

<변경 코드>

add_goods.js

//이미지URLs 받아오는 함수
getImageURL=(imageURLs)=>{
    this.setState({ imageURLs: this.state.imageURLs.concat(imageURLs) });
}

  this.props.navigation.navigate("Gallery", { imageLength: this.state.imageURLs.length, callback:this.getImageURL });

 

gallery.js

this.props.route.params.callback(this.state.imageURLs)
this.props.navigation.navigate('AddGoods');

 

 

 

add_goods에서 구현한 콜백함수를 Params로 전달해줌으로써, gallery에서 받아온 imageURLs을 setState해줄 수 있었다