[React-Native] 자동 로그인 구현

로그인을 한번 했다면 다시 앱에 들어갔을 때 자동 로그인이 되어야

User들이 로그인을 계속 해야되는 귀찮음을 덜어드릴 수 있겠죠?! 그래서 구현해보았습니다.

---

✅ AsyncStorage에 대하여

AsyncStorage는 리액트 네이티브에서 사용할 수 있는 key-value 형식의 저장소다.

웹에서 사용하는 LocalStorage와 같은 기능을 한다고 생각하면 편한데,

localstorage와 차이점은 AsyncStorage는 비동기적으로 작동한다는 것이다.

쉽게 말하면 React Native에서 어떤 값을 오프라인에(디바이스 자체) 저장하고 싶을 때 쓰는 패키지이다.

 

✅ AsyncStorage Install 

Installation | Async Storage

나는 npm으로 설치했음

 

✅ AsyncStorage 라이브러리 사용

import AsyncStorage from "@react-native-async-storage/async-storage";

 

✅ 아이디 비밀번호를 AsyncStorage에 저장

this.callUploadAPI().then((response) => {
    if(response.id == "0" )
    {
         this.setState({ confirmreg : false });
         this.passwordRef.clear();

         return false;  
     }
     else{
         const obj = {
              companyNo:this.state.companyNo,
              passwd:this.state.passwd,
         }
         AsyncStorage.setItem('obj', JSON.stringify(obj));
         console.log(response);
         this.props.navigation.navigate('TabHome');
    }
})

AsyncStorage.setItem 으로 정보를 저장해줍니다.

AsyncStorage는 String값의 Key-Value 체인으로 되어있기 때문에 JSON.stringify로 항상 Object나 Array를 String으로 바꾸어서 저장하고 가져와야합니다.

 

회원가입이 되어있는 정보로 로그인이 되었을 경우 그 정보가 AsyncStorage에 저장이 되는 것입니다.

 

✅ AsyncStorage에 저장되어 있는 값 가져오기

componentDidMount() {
        this.availableLogIn().then(() => {
            console.log("자동로그인 성공");
        });
    }
    async availableLogIn() {
        const obj =await AsyncStorage.getItem('obj');
        if(obj!== null){
            this.props.navigation.navigate('TabHome');
            console.log(obj);
        }
        else{
            return false;
        }
    }

AsyncStorage.getItem()으로 obj안에 있는 정보를 가져와서 안에 정보가 있을 경우 로그인이 될 수 있도록 구현해주었습니다. componentDidMount로 앱이 실행되었을 때 storage에 정보가 있는지 비교하여 있을 경우 자동으로 로그인이 됩니다.

 

✅ 로그아웃

logout = async () => {
    try {
        AsyncStorage.clear();
        console.log("로그아웃 완료 다시 로그인");
        this.props.navigation.navigate('Login');

      } catch (error) {
        console.log(error);
      }
  };

render() {
    return (
      <>
        <TouchableOpacity activeOpacity={0.8} style={styles.btn} onPress={this.logout}>
          <Text style={styles.btn_text}>로그아웃</Text>
        </TouchableOpacity>
      </>


    );
  }

 

AsyncStorage.clear(); 를 사용하여 데이터 전체를 지워줍니다.