[React-Native] 페이지 이동 시 자동 새로고침

배송완료 신청할 경우 페이지를 이동하면서 자동으로 새로고침이 되어 배송등록완료 표시가 뜨도록 구현하였습니다.

---

✅ 로그인 되어있는 userID를 기반으로 판매목록을 불러오는 함수입니다.

판매목록 정보는 만들어둔 callGetSellsAPI를 사용하여 서버에서 가지고 옵니다.

goSellGoods = () => {
        this.getUserID().then((value) => {
            this.callGetSellsAPI(value).then((response) => {
                this.setState({ soldoutContents: response });
            })
        });
    }

 

✅ 여기서 봐야 할 부분은 DeliveryInfoList(배송정보입력) class로 goSellGoods함수를 goSellGoodsListener으로 보내주는 것입니다!

{this.state.shippingbarclicked == true && (<FlatList
    data={this.state.soldoutContents}
    renderItem={({ item, index }) => <DeliveryInfoList navigation={this.props.navigation} item={item} id={item.goodsID} goSellGoodsListener={this.goSellGoods} />}
    scrollEventThrottle={16}
/>)}

**Listener개념 간단 정리**

관리하고 있는 변수는 본 class에서 관리를 하는데

하위 class에서 본 class에서 관리하고 있는 변수의 정보를 사용하고자 할 때 쓰는 개념!!

주로 java에서 Listener라는 용어를 많이 쓰고 , react나 react-native에서는 callback 용어를 사용한다.

마치 하위 class에서 함수를 실행하는 것 처럼 보이나, 실제로는 본 class에서 함수가 실행되는 거나 마찬가지이다.

 

✅ status 값이 1일 때 = 구매자가 결제를 완료한 경우

배송정보입력 하는 페이지로 이동하며 props를 통해 받은 goSellGoodsListener을 refresh 로 보내줍니다

{item.status == 1 && <TouchableOpacity style={styles.productInfoRight} onPress={() => this.props.navigation.navigate('AddDelivery', { id: item.id, navigation:this.props.navigation, refresh : this.props.goSellGoodsListener })}>
    <Text style={[styles.itemDistanceText, { color: "blue" }]}>배송등록</Text>
</TouchableOpacity>}

**주의!! **

여기서 Listener라고 이름을 붙이지는 않았지만 AddDelivery class로 보내주는 refresh 함수도 Listener 입니다!!

정리해보자면 총 3개의 class가 있고 본 class에 있는 함수를 전달 전달 하는 꼴이 된다.

본 class(sales_list)-> 하위 class(DeliveryInfoList)->하위 class(AddDelivery) 

 

✅ 배송완료신청 버튼을 눌렀을 경우 deliveryCompleteButtonClicked 함수가 호출 되면서 배송신청완료 API 호출 후

페이지 이동이 되며 새로고침이 됩니다

deliveryCompleteButtonClicked =() =>{
        this.callSetDeliveryAPI().then((response)=>{
            console.log("배송신청완료", response);
            this.props.route.params.navigation.navigate("SalesList");
            this.props.route.params.refresh();
        })
    }

<View style={styles.bottomContainer}>
    <TouchableOpacity onPress={this.deliveryCompleteButtonClicked} activeOpacity={0.8} style={styles.okbtn} >
        <Text style={styles.btn_text}>배송완료신청</Text>
    </TouchableOpacity>
</View>