React Native 쿠키 저장하기(Asyncstorage 사용하기)

앱에서도 웹처럼 인증기능을 구현하기 위해 유저의 정보를 저장해 두어야 할 것이다.

이 기능을 제공하기 위해 react native에서 제공하는 모듈이 바로 Asyncstorage 이다.

 

해당 모듈은 사실 사용하기 매우 매우 쉽다. 

사용할때 기억해둬야 할 점은 이름에서 알 수 있듯이 async/await 함수로 구현해야 한다.

 

저장소를 읽거나 저장하는 과정이 종료되기까지는 다음 코드가 실행되지 않아야, 분기가 적절하게 잘 이루어 질수 있기 때문이다. 

 

expo 에서 제공하는 모듈을 설치해서 사용했으며, 공식문서를 참고했다.

 

 

설치하기

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

 

인터넷에는 react-native 자체에서 asyncstorage를 불러와서 사용하는 것에 대한 설명이 있는데, 이제는 해당 기능은 제공되지 않고, 

위의 코드로 별도 설치를 한 후에 사용해야 한다.

 

 

사용하기

설치외에 asyncstorage에 대한 사용 코드는 변하지 않았으므로, 더 설명이 잘 되어있는 react native의 공식문서를 참고했다.

import { AsyncStorage } from '@react-native-community/async-storage';
 
//저장하기
_storeData = async () => {
  try {
    await AsyncStorage.setItem(
      '키값',
      저장하고자 하는 데이터값
    );
  } catch (error) {
    // Error saving data
  }
};
 
 
//읽어오기
_retrieveData = async () => {
  try {
    const value = await AsyncStorage.getItem('키값');
    if (value !== null) {
      console.log(value);
    }
  } catch (error) {
    // Error retrieving data
  }
};
 
 
 
 

 

사실 진짜 간단하다...

좀 더 민감한 데이터를 저장하고자 하면 SecureStorage 모듈을 사용하면 된다,

expo 공식문서를 참고하면, 전반적인 코드 사용은 라이브러리의 이름말고는 asyncstorage와 유사하나, 웹에서는 사용이 불가하므로 개발시에 테스트 할때는 무조건 에뮬레이터나 디바이스를 써야 한다.

 

 

실제 코드 구현

실제로 분기를 위해서 asyncstorage를 사용할때 나는 해당 모듈 내에서 useasyncstorage를 가지고와서 사용해주었다.

굳이 추가 모듈을 설치할 필요 없이 하나의 모듈에서 다른 라이브러리만 가지고 오면 되는것에 비해서 코드가 훨씬 간결하고 사용하기 좋았기 때문이다. 

 

LoadingScreen/index.js

import React, { Component } from 'react';
 
import { useAsyncStorage } from '@react-native-community/async-storage';
const { getItem } = useAsyncStorage('키값');
 
export default class LoadingScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isAuthorized: false,
    };
  }
 
  read = async () => {
    try {
      const value = await getItem();
      if (value) {
        this.setState({ isAuthorized: true });
      }
    } catch (e) {
      console.log(e);
    }
  };
 
  async componentDidMount() {
    await this.read();
    if (this.state.isAuthorized === true) {      
      this.props.navigation.replace('TabNavigator');
    } else {
      this.props.navigation.replace('LoginScreen');
    }  }
});
 
 
 
 

-> useAsyncStorage를 import 해준 후에, 그 다음 코드에 바로 getItem이나 setItem처럼 사용해줄 함수를 불러오고 키값을 바로 지정해준다. 따라서 하단의 코드에서는 키값을 별도로 기재해주지 않아도 된다. 

-> react의 라이프 사이클을 활용해서, 해당 페이지가 렌더링 되자마자 저장소를 읽고, 값이 있다면 isAuthorized state 값을 변경해주고, 해당 함수가 종료되자마자 state 값을 점검하여 화면 분기를 해준다. 

따라서 한번 로그인한 유저의 경우 별도로 로그아웃하여서, 값을 저장소에서 지우지 않는 다면 해당 화면에서 항상 메인 화면으로 넘어간다.

 

LoginScren/index.js

import React, { Component } from 'react';
 
import { useAsyncStorage } from '@react-native-community/async-storage';
const { getItem} = useAsyncStorage('');
 
 
export default class LoginScreen extends Component {
 
  constructor(props) {
    super(props);
  }
 
  read = async () => {
    try {
      const value = await getItem();
      if (value) {
        this.props.navigation.replace('TabNavigator');
      }
    } catch (e) {
      console.log(e);
    }
  };
 
  componentDidMount = async () => {
    await this.read();
  };
 
 
 

-> 로그인 화면에서의 분기는 더 간단하다. 로그인 화면으로 넘어온 경우 바로 저장소를 확인하고, 값이 있으면 바로 메인 화면으로 넘어간다. 이는 소셜로그인을 중점으로 이루어진 분기이며, 아마 일반 로그인의 경우 read 함수를 활용하되 componentDidMount 라이프 사이클 함수를 거치진 않을 것이다.

 

storage에 값 저장

store = async (event) => {
    console.log(JSON.parse(event.data));
    let result = JSON.parse(event.data);
    let success = result.message;
    if (success) {
      let userToken = result.Authorization;
      try {
        await setItem(userToken);
      } catch (e) {
        console.log(e);
      }
    }
  };