React Native : AsyncStorage 쉽게 사용해보기.

앱 개발을 할때 데이터를 저장할때 저장소에 대해서 고민을 많이 합니다.

 

보통 Component 내부의 State에 저장을 하거나 Component의 데이터의 State를 중앙집중적으로 관리하기 위해서 Redux를 사용하기도 하죠 ㅎㅎ

 

 

하지만 React-Native에서는 Screen의 Component의 State등에 데이터를 담아서 저장하면 문제점이 조금 있습니다.

 

State는 앱이 꺼지거나, Screen의 이동이 일어나면 값이 보장되지 않고 사라질수 있기 때문입니다.

 

따라서 앱이 꺼져도 써야하는 데이터의 경우 Local 데이터베이스에 저장하여야하는데요, 보통 유저정보를 저장한다거나, JWT토큰저장, 유저가 기록한 메모를 저장 하는데에 사용했었습니다.

 

 

React Native에서 Local Database를 사용하기위해서는 방법이 2가지정도 있는데요, 하나는 Sqlite를 이용하여 저장하는 방법과 두번째로 이번에 설명해드릴 AsyncStorage를 이용하는 방법이 있습니다.

 

sqlite를 사용하는 방법은 아래 react-native-sqlite-storage 를 통해 사용하실 수 있습니다.

 

https://github.com/andpor/react-native-sqlite-storage

 

 

 

 

AsyncStorage를 사용하기위해서는 다음과 같이 설치를 진행하여 줍니다.

npm i @react-native-community/async-storage

 

이후 우리는 AsyncStorage를 이용하여 데이터를 LocalStorage에 저장하거나 사용할수가 있게 됩니다.

 

기본적인 사용방법은 아래와 같습니다.

 

// 유저 닉네임 저장
AsyncStorage.setItem('nickname','User1', () => {
  console.log('유저 닉네임 저장 완료')
});

// 유저 닉네임 불러오기
AsyncStorage.getItem('nickname', (err, result) => {
  console.log(result); // User1 출력
});

 

 

하지만 제가 AsyncStorage를 쓰면서 불편했던점은 AsyncStorage는 String값의 Key-Value 체인으로 되어있기 때문에 JSON이나 Array와 같은 데이터 형식을 저장하는데에는 조금 불편한 점이 있었습니다.

 

이와 같은 형식을 저장할때는 아래와 같이 JSON.parse와 JSON.stringify로 항상 Object나 Array를 String으로 바꾸어서 저장하고 가져와야합니다.

 

// 유저정보 (nickname, phonenumber) 저장
AsyncStorage.setItem('nickname',JSON.stringify({'nickname': 'User1', 'phonenumber','010-xxxx-xxxx'}), () => {
  console.log('유저정보 저장 완료')
});

AsyncStorage.getItem('nickname', (err, result) => {
  const UserInfo = Json.parse(result);
  console.log('닉네임 : ' + UserInfo.nickname); // 출력 => 닉네임 : User1 
  console.log('휴대폰 : ' + UserInfo.phonnumber); //  출력 => 휴대폰 : 010-xxxx-xxxx
});

 

그런데 위와같이 사용하면 코드의 길이가 길고 지저분해지므로 AsyncStroage 사용에 대한 Helper 비슷하게 모듈화 하여서 사용하는 것도 좋은 방법중에 하나입니다.

 

아래는 제가 만든 AsncStroage의 get, set 모듈입니다. 필요하신분은 참고하셔서 잘 사용하시면 편리하게 사용하실수 있을거라고 생각합니다 :)

 

const isEmpty = function (value) {
  if (value === '' || value === null || value === undefined || (value !== null && typeof value === 'object' && !Object.keys(value).length)) {
    return true;
  } else {
    return false;
  }
};

// AsyncStorage get 함수 모듈
export const getItemFromAsync = (storageName) => {
  if (isEmpty(storageName)) {
    throw Error('Storage Name is empty');
  }
  
  return new Promise((resolve, reject) => {
    AsyncStorage.getItem(storageName, (err, result) => {
      if (err) {
        reject(err);
      }
      
      if (result === null) {
        resolve(null);
      }
      
      resolve(JSON.parse(result));
    });
  });
};

// AsyncStorage set 함수 모듈
export const setItemToAsync = (storageName, item) => {
  if (isEmpty(storageName)) {
    throw Error('Storage Name is empty');
  }

  return new Promise((resolve, reject) => {
    AsyncStorage.setItem(storageName, JSON.stringify(item), (error) => {
      if (error) {
        reject(error);
      }
      
      resolve('입력 성공');
    });
  });
};

 

get 함수 모듈은 storageName(key)을 입력받고 해당 key값에 해당하는 결과값을 JSON.parse를 사용하여 반환합니다. 

 

key값이 공백이거나 null일경우에는 Error를 throw하고, 만약 key값에 해당하는 value가 아무것도 없으면 null을 반환합니다.

 

 

set 함수 모듈은 storageName(key)와 해당 key에 저장될 value를 입력받습니다. 

 

value는 배열, 객체, String 모두 가능합니다. 

 

AsyncStroage에 저장할때 해당 value(item)을 JSON.stringify로 스트링으로 변환한뒤에 저장합니다.

 

 

한번 사용해보시고 오류가 있으면 알려주세요~.

 

이상으로 ReactNative의 AsyncStroage에 대한 내용을 마치겠습니다.