[React-Native] CheckBox 구현

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에 저장해줄 값 ( 0이면 자동로그인 X , 1이면 자동로그인 O )

 

✅ CheckBox 체크 유무 확인 후 AsyncStorage에 저장

loginButtonClicked = () => { // 로그인 버튼 눌렀을 때 호출되는 함수
        this.loginInfo.companyNo=this.state.companyNo;
        this.loginInfo.passwd=this.state.passwd;
        this.callLoginAPI(this.loginInfo).then((response) => {
            if (response.id == "0") { //회원정보가 없을 경우 
                //this.passwordRef.clear();
                Alert.alert('아이디 비밀번호를 확인해주세요', '',);
                return false;
            }
            else {
                const obj = {
                    companyNo: this.state.companyNo, //사업자번호
                    id: response.id, //userId
                    passwd: this.state.passwd, //비밀번호
                    detailLogin:this.state.detailLogin //자동로그인 체크유무
                }
                AsyncStorage.setItem('obj', JSON.stringify(obj));
                this.props.navigation.navigate('TabHome');
            }
        })
    }

obj에 detailLogin ( 자동로그인 체크 유무 ) 추가

❗ 변경 된 코드

loginButtonClicked = () => { // 로그인 버튼 눌렀을 때 호출되는 함수
        //this.loginInfo.companyNo = this.state.companyNo;
        //this.loginInfo.passwd = this.state.passwd;
        
        this.callLoginAPI(false).then((response) => {
            if (response.id == "0") { //회원정보가 없을 경우 
                //this.passwordRef.clear();
                Alert.alert('아이디 비밀번호를 확인해주세요', '',);
                return false;
            }
            else {
                const obj = {
                    companyNo: this.state.companyNo, //사업자번호
                    id: response.id, //userId
                    passwd: this.state.passwd, //비밀번호
                    detailLogin: this.state.detailLogin
                }
                console.log("로그인 성공");
                AsyncStorage.setItem('obj', JSON.stringify(obj));
                console.log('storage=',obj);
                console.log(response);
                this.props.navigation.navigate('TabHome');
            }
        })
    }

 

✅ 재로그인을 위한 코드 ( LogIn Page )

componentDidMount() {
    this.availableLogIn().then(() => {
    });
}
    
async availableLogIn() {
    const obj = await AsyncStorage.getItem('obj');
    if (obj !== null) {
        const loginInfo = JSON.parse(obj);
        this.parsed = loginInfo;
        this.loginInfo.companyNo = loginInfo.companyNo;
        this.loginInfo.passwd = loginInfo.passwd;
        if (this.parsed.detailLogin == 1) {
            this.callLoginAPI(this.loginInfo).then((response) => {
                console.log("재로그인 성공", response);
                this.props.navigation.navigate('TabHome');
            })
        }
        if (this.parsed.detailLogin == 0) {
            retrun false;
        }
    }
    else {
        return false; //null 값일 경우 false
    }
}

obj로 저장하였던 정보들을 가져와 CheckBox의 유무를 확인

Login정보가 1일 경우 재로그인 ( 자동로그인 )

Login정보가 0일 경우 return false로 로그인 화면에 머물기

❗ 변경 된 코드

componentDidMount() {
        SplashScreen.hide();

        this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this.keyboardDidShow);
        this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this.keyboardDidHide);

        //퍼미션 설정되었는지 확인
        this.requestPermission();
        //알림메시지 처리
        this.handleFCMMessage();
        //자동 로그인 처리되는지 확인
        this.availableLogin().then((response) => {
            if(response==true) {
                //this.setState({companyNo:companyNo,passwd:passwd,detailLogin:detailLogin});
                //this.autiLoginCheckButtonClicked();
                this.callLoginAPI(true).then((response) => {
                    console.log("자동 로그인 성공", response);
                    this.props.navigation.navigate('TabHome');
                });
            }
        });
    }
     //로그인 정보가 앱에 저장되어 있다면...(자동로그인,id기억 관리)
    async availableLogin() {
        const obj = await AsyncStorage.getItem('obj');
        if(obj !== null) {
            const {companyNo,passwd,detailLogin} = JSON.parse(obj);  
            console.log(companyNo,passwd,detailLogin);        
            if (detailLogin == 0) {         //로그인 방법을 아무것도 선택하지 않았을 경우
                return false;
            }
            else if (detailLogin == 1) {    //자동 로그인일 경우
                this.setState({companyNo:companyNo,passwd:passwd,detailLogin:detailLogin});
                this.autiLoginCheckButtonClicked();
                return true;
            }
            else {                          //id 기억일 경우
                this.setState({ companyNo: companyNo, detailLogin:detailLogin });
                this.rememberIdRadioButtonChecked();
                return false;
            }
        }
        else {
            return false; //null 값일 경우 false (저장되어 있는 로그인 정보가 없다면)
        }
    }

예전에는 로그인정보가 앱에 저장되어있는지 관리하는 함수에서 detailLogin이 1일경우( 자동로그인 체크)

Login API를 불러와 처리하여 componentDidMount에서 그냥 호출하였다면

변경된 코드에서는 함수를 호출하면 리턴되는 값이 무엇인지 확인하는 작업은 꼭 필요한 것이라는 것을 깨닫고

리턴 받은 값이 true일 경우에 로그인 API를 불러와 재로그인이 될 수 있도록 구현하였다.

 

✅ 자동로그인 체크버튼 체크 시 실행되는 함수

//아무것도 체크안한 상태 --0, 자동로그인 체크 --1, id기억 체크 --2
    autoLoginCheckButtonChecked = () => {
        if(this.state.autoLoginChecked==true){
            this.setState({autoLoginChecked:false,detailLogin:0});
        }else{
            this.setState({autoLoginChecked:true, detailLogin:1})     
        }
        if(this.state.rememberIdChecked==true){
            this.setState({autoLoginChecked:true,rememberIdChecked:false,detailLogin:1})
        }  
    }

    rememberIdCheckButtonChecked = () => {
        if(this.state.rememberIdChecked==true){
            this.setState({rememberIdChecked:false,detailLogin:0}); //아무것도 체크안한 상태
        }else{
            this.setState({rememberIdChecked:true, detailLogin:2}) //id 기억 체크    
        }  
        if(this.state.autoLoginChecked==true){
            this.setState({rememberIdChecked:true,autoLoginChecked:false,detailLogin:2})
        }  
    }

<autoLoginCheckButtonClicked>

* 자동로그인 체크 시 -> 자동로그인

* 자동로그인 체크 해제 시 -> 아무것도 체크 안한 상태

* id기억이 체크되어 있을 시 자동로그인 버튼을 누르면 id기억은 체크 해제되고 자동로그인은 체크표시가 됨

 

<rememberIdCheckButtonChecked>

* id기억 버튼 체크 시 -> 로그아웃 시 id 기억 상태

* id기억 체크 해제 시 -> 아무것도 체크 안한 상태

* 자동로그인이 체크되어 있을 시 id기억 버튼을 누르면 자동로그인은 체크 해제되고 id기억은 체크표시가 됨

 

✅ render

<View style={{ flexDirection: 'row', marginTop: "-5%" }}>
    <TouchableOpacity style={{ flexDirection: 'row' }} activeOpacity={0.8} onPress={this.autoLoginCheckButtonChecked}>
        <IconRadio name={this.state.autoLoginChecked ? "check-circle" : "panorama-fish-eye"} size={20} color={'lightgrey'} style={{ paddingTop: 5 }} />
        <Text style={[styles.default_text, styles.radio_btn_text]}> 자동로그인  </Text>
    </TouchableOpacity>
    <TouchableOpacity style={{ flexDirection: 'row' }} activeOpacity={0.8} onPress={this.rememberIdCheckButtonChecked}>
        <IconRadio name={this.state.rememberIdChecked ? "check-circle" : "panorama-fish-eye"} size={20} color={'lightgrey'} style={{ paddingTop: 5 }} />
        <Text style={[styles.default_text, styles.radio_btn_text]}> id기억  </Text>
    </TouchableOpacity>
</View>