생각은 길게 코딩은 짧게

앱을 제작하면서 정해진 함수를 이 페이지 저 페이지 쓰는 경우가 생겼다 ( 택배사, 가격 자릿수 등등 ) 이때 유지보수가 쉽도록 관리해줄 수 있는 소스를 짜면 편하다는 것을 배웠다! 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_fu..

Home에서 뒤로가기를 눌렀을 경우 앱을 종료할 수 있도록 BackHandler을 통해 구현해보았습니다. ✅ 안드로이드에서 뒤로가기 버튼을 사용하기 위해 BackHandler를 import import { BackHandler } from 'react-native'; ✅ 이벤트 리스너가 필요한 부분에 구현 componentDidMount() { BackHandler.addEventListener("hardwareBackPress", this.backPressed); } componentWillUnmount() { BackHandler.removeEventListener('hardwareBackPress', this.backPressed); } BackHandler.addEventListener : 이벤트..

배송완료 신청할 경우 페이지를 이동하면서 자동으로 새로고침이 되어 배송등록완료 표시가 뜨도록 구현하였습니다. ✅ 로그인 되어있는 userID를 기반으로 판매목록을 불러오는 함수입니다. 판매목록 정보는 만들어둔 callGetSellsAPI를 사용하여 서버에서 가지고 옵니다. goSellGoods = () => { this.getUserID().then((value) => { this.callGetSellsAPI(value).then((response) => { this.setState({ soldoutContents: response }); }) }); } ✅ 여기서 봐야 할 부분은 DeliveryInfoList(배송정보입력) class로 goSellGoods함수를 goSellGoodsListener으로 ..

RadioButton에 이어 CheckBoxButton을 구현해보았답니다! - 자동로그인 부분만 포스팅해보겠습니다 ! ✅ Icon import 시켜주기 import IconRadio from 'react-native-vector-icons/MaterialIcons'; ✅ state 값 this.state = { companyNo: '', //사업자번호 passwd: '', //비밀번호 id: '', //userID validForm: false, //유효성 검사 detailLogin: 0, //0->자동로그인X, 아이디기억 X, 1->자동로그인, 2->아이디 기억 autoLoginChecked: false, rememberIdChecked: false } detailLogin : AsyncStorage에..

RadioButton으로 최신순, 가나다순으로 정렬될 수 있도록 sorting을 구현해보았습니다 ✅ import RadioButton Icon - MaterialIcon을 사용하였습니다 import IconRadio from 'react-native-vector-icons/MaterialIcons'; ✅ ComponentDidMount ( 최신순 ) componentDidMount() { this.setState({indicator : true}); //ActivityIndicator this.callGetGoodsAPI().then((response) => { this.Contents = response; this.setState({ goodsContent: response }); //최신순 this...

원래는 품명으로만 검색할 수 있도록 구현해놓았는데 이번에는 부품번호, 품명, 해쉬태그 등 모두 검색이 가능할 수 있도록 통합검색 기능을 구현해보았어요. ✅ 검색을 위한 함수 구현 //부품 검색 search = (value) => { this.setState({ goodsContent: this.dataFiltering(value) }) }; //필터링 (부품번호, 부품명 동시 검색) dataFiltering = (value) => { let goodsContent = this.Contents; goodsContent = goodsContent.filter((content) => { if(value==='') return true; else { if(content.number===value) return ..

TextInput에 모든 값이 입력되지 않았을 경우에 버튼을 비활성화 TextInput에 모든 값이 입력되었을 경우엔 버튼을 활성화 시켜보았습니다. 글자 수 제한을 구현했을 때 사용했던 삼항연산자를 사용하여 처리해주었습니다. 삼항연산자에 대해 자세한 설명이 필요하시면 요 포스팅을 보시면 됩니다 [React-Native] 글자 수 제한하기 리스트의 값들을 뿌려주는 중 해시태그의 길이가 늘어나면서 글이 레이아웃을 침범해버리는 현상이 나타났다 ! ✅ slice 함수 사용하기 배열로부터 특정 범위를 복사한 값들을 담고 있는 새로운 sayhee.tistory.com ✅ 삼항연산자 사용 {/* 상품 등록하기 버튼 부분*/} {this.state.number.trim() != 0 && this.state.name.t..

상품 리스트를 보다 상품등록을 원할 때 바로 갈 수 있게 플로팅 버튼을 구현해보았습니다! ✅ Plus 아이콘 ( AntDesign) 사용 import Icons from 'react-native-vector-icons/AntDesign'; ✅ stack class에 이동할 페이지 선언 ( AddGoods) class Stack extends Component { render() { return ( ); } } ✅ 버튼 클릭 시 상품등록 페이지로 이동 {this.props.navigation.navigate("AddGoods")}}> 💡 onpress={this.props.navigation.navigate("AddGoods"} 방식으로 할 경우 Warning: Cannot update a componen..