생각은 길게 코딩은 짧게

비밀번호 변경 후 재로그인을 위해 다시 로그인 창을 불러야하는 경우가 생겼다. React Native에서 page를 navigate하는 것은(this.props.navigation.navigate('Login')) stack 구조로 진행이 되기 때문에 이미 didMount된 상태의 페이지가 불러져 다시 componentDidMount가 실행 되지 않는다. 해결 전 해결 후 해결 전 문제점 : componentDidMount가 다시 실행되지 않아 이미 로그인 되어있는 창이 불러졌다 💡 this.props.navigation.addListener() 사용 componentWillUnmount 는 컴포넌트가 화면에서 사라지기 직전에 호출된다. 정보 수정 창이 화면에서 사라질 때 login 창이 포커스 되면 a..

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

Animated.View를 사용하여 구현해보았습니당 ✅ Animated 기준값을 전역변수로 지정 constructor(props) { super(props); this.AnimatedHeaderValue = new Animated.Value(0); // Animated 기준값(0,0) this.state = { goodsContent: [], indicator : false, }; } ✅ render 부분에 Animated.View 사용 render() { const Header_Maximum_Height = 120; const Header_Minimum_Height = 60; const renderHeader = this.AnimatedHeaderValue.interpolate( { inputRange..

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에..

원래는 품명으로만 검색할 수 있도록 구현해놓았는데 이번에는 부품번호, 품명, 해쉬태그 등 모두 검색이 가능할 수 있도록 통합검색 기능을 구현해보았어요. ✅ 검색을 위한 함수 구현 //부품 검색 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 ..

열어분 Happy New Year ♥ List 를 불러올 때 양이 많아서 Delay가 있기 때문에 List들을 불러올 때 동안 로딩화면이 돌아가도록 구현해보았어요 📍 ActivityIndicator 란 원형의 로딩창으로 일부 활동에서 진행상황을 나타내는데 사용됩니다 ✅ Indicator.js - 로딩화면이 필요한 곳이 있을 때마다 불러서 사용하기 위해 하나의 파일을 만들어주었습니다. import React, {Component} from "react"; import { ActivityIndicator , StyleSheet, View } from "react-native"; class Indicator extends Component{ render(){ return ( ) } } const styles ..