React Native X Expo 데이터 영구관리 AsyncStorage 로컬스토리지 저장 사용법

AsyncStorage란?

웹에서 로컬 스토리지랑 비슷한 앱 내부에서 저장하는 라이브러리가

바로 그 것입니다

 

이 라이브러리를 사용하게 되면

로그인 후 앱을 꺼지고 나서도

로그인을 유지할 수 있도록 하는 기능입니다

 

 

React Native 사용 설치와 Expo 설치는 아래와 같이 하시길 바랍니다

yarn add @react-native-async-storage/async-storage

expo install @react-native-async-storage/async-storage

 

 

우선 로그인 기능에 

AsyncStorage함수를 사용하여

로그인 후 로컬 스토리지에 저장합니다

 

 

import * as firebase from "firebase";
import "firebase/firestore";
import { Alert } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { confirmAlert } from '../item/alertPopup'

export async function registration(nickName, email, password, navigation) {
  try {
    console.log(nickName, email, password);
    await firebase.auth().createUserWithEmailAndPassword(email, password);
    const currentUser = firebase.auth().currentUser;
    const db = firebase.firestore();
    db.collection('users').doc(currentUser.uid).set({
      email: currentUser.email,
      nickName: nickName,
    });
    Alert.alert('회원가입 성공!');
    await AsyncStorage.setItem('session', email);
    navigation.push('TabNavigator');
  } catch (err) {
    Alert.alert('무슨 문제가 있는 것 같아요! => ', err.message);
  }
}

export async function signIn(email, password, navigation) {
  try {
    await firebase.auth().signInWithEmailAndPassword(email, password);
    await AsyncStorage.setItem('session', email);
    navigation.push('TabNavigator');
  } catch (err) {
    Alert.alert('로그인에 문제가 있습니다! ', err.message);
  }
}

export function logout(navigation) {
  try {
    confirmAlert('로그아웃을 진행하시겠습니까?', async () => {
      const currentUser = firebase.auth().currentUser;
      console.log(currentUser)
      await AsyncStorage.removeItem('session');
      await firebase.auth().signOut();
      navigation.push("SignInPage")
    })
  } catch (err) {
    Alert.alert('로그 아웃에 문제가 있습니다! ', err.message);
  }
}

 

위와 같이 로그인과 로그아웃, 회원 가입할 경우

로컬 스토리지에 저장을 하게 됩니다 

 

아래는 함수의 사용법을 입니다

 

 

 

반응형

 

 

 

로컬 스토리지에서 특정값 가져오기

AsyncStorage.getItem('session', (err, result) => {
  console.log(result);
})

 

 

로컬스토리지에서 특정값 저장하기

AsyncStorage.setItem('session', email, ()=>{
  console.log('저장 완료')
});

 

 

로컬스토리지에서 특정값 삭제하기

AsyncStorage.removeItem('session');

 

 

하지만 이 라이브러리는 

약간의 단점이 존재한다

AsyncStorage는 저장할 당시 

String값의 Key-Value 체인으로 되어있기 때문에

JSON이나 Array와 같은 형식의 데이터를 저장하는데 

JSON.parse와 JSON.stringify로 Object형식으로 변경하여 저장해야 합니다

 

 

AsyncStorage.setItem('session',JSON.stringify({'email': 'https://tantangerine.tistory.com/' }), () => {
  console.log('저장 완료')
});

AsyncStorage.getItem('session', (err, result) => {
  const MbInfo = Json.parse(result);
  console.log('email : ' + MbInfo.email);
});

 

 

위와 같이 데이터를 저장하고 가져와야 합니다

 

조금 불편 하지만 위의 코드를 함수나 모듈화로 

보다 쉽게 사용할 수 있을 것입니다

 

 

// AsyncStorage getItem 함수
export const getItemFromAsync = (storageName) => {
  let resultData
  AsyncStorage.getItem(storageName , (err, result) => {
    resultData = JSON.parse(result)
  });
  
  return resultData
};

// AsyncStorage setItem 함수 
export const setItemToAsync = (storageName, item) => {
  let isSuccess = false
  AsyncStorage.setItem((storageName, ,JSON.stringify(item)), (error) => {
    if(error){
      return isSuccess 
    }
  });
   return isSuccess
};

 

 

조금 엉성하지만 위와 같이 만들어 보았습니다

앱에서도 로컬 스토리지에 저장할 수 있는 방법을 알아보았습니다

 

 IT 개발자로 당당해지는 그날까지 계속 나아갑시다

대모험은 아직 끝나지 않았으니까요!!

그럼 열공하시고!

 

다음 포스팅은 파이어 베이스의 Cloud Firestore에 대해

데이터 저장 읽기 이미지 저장 등을 알아보겠습니다

 

한걸음 나아갑시다!!