[React-Native] 전역 함수 사용하기

앱을 제작하면서 정해진 함수를 이 페이지 저 페이지 쓰는 경우가 생겼다 ( 택배사, 가격 자릿수 등등 )

이때 유지보수가 쉽도록 관리해줄 수 있는 소스를 짜면 편하다는 것을 배웠다!

 

<가격 자릿 수>

export default class FunctionUtil {
    static getPrice(data){
       return data.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    }
}

 

가격 자릿수를 메겨줄 때 사용하는 함수이다. util 폴더 안에 FunctionUtil.js를 생성 후

받은 데이터를 조작해준 뒤 값을 return 시켜준다.

 

함수를 써줄 class 페이지에 import를 시켜주고

import FunctionUtil from '../../../util/libraries_function';

 

data에는 item.price(가격)를 넘겨주면 끝!

<Text style={styles.itemName_text}>{FunctionUtil.getPrice(item.price)}{"원"}</Text>

 

---

<택배사>

export default class Constant {
    static serviceURL = "http://203.241.251.177/wparts";
    static externalServiceURL = "http://lab.pyunhan.co.kr";
    
    static getInvoiceNames() {
        return ["CJ대한통운","우체국택배","편의점택배","로젠택배","한진택배"];
    }
}

 

Constant에서  getInvoiceNames()에 저장하였던 택배사를 가져온다

//Constant에서 미리 정의한 택배사 리스트 가져오기
this.invoiceName=Constant.getInvoiceNames();

import { Picker } from '@react-native-picker/picker'; 을 사용하여 택배사를 DropDownList 형식으로 보여줄 것인데

모든 택배사를 보여주기 위해 map 함수를 사용해주었다.

<View style={styles.textInput}>
    <Text>택배사 선택</Text>
    <Picker
        selectedValue={this.state.invoiceKind}
        onValueChange={(value, index) => { this.setState({ invoiceKind: value }) }}>
        {this.invoiceName.map((item,i)=> <Picker.Item label={item} key={i} value={i}/>)}
    </Picker>
</View>