본문 바로가기
Coding/Etc

React Native 로컬저장소(LocalStorage) 사용하는 방법

by Hide­ 2018. 3. 11.
반응형

리액트 네이티브로 어플을 개발하고 있고 최근에 앱스토어에 출시를 했다.

그런데 사용하던 도중 권한 관련하여 수정할 필요성을 느끼고 어떻게 구성할까 고민하다가

API서버에서 발급받은 토큰을 Local Storage에 저장하는 형태로 구성했다.

로컬 저장소에 저장해놓기 때문에 토큰이 존재한다면 로그인이 된 상태이고

존재하지 않는다면 로그아웃 된 상태로 판단할 수 있다.

크게 어려운 점은 없다.

먼저 단일 값을 저장하는 방법은 아래와 같다.


import { AsyncStorage} from 'react-native';

_saveData = () => {

const data = "testdata";

AsyncStorage.setItem('data', data);

}


Key, Value쌍으로 저장을 하는 형태로 setItem을 통해 저장할 수 있다.

물론 여러개의 값들을 한번에 저장할수도 있다.


import { AsyncStorage } from 'react-native';

_saveData = () => {
    const obj = {

'name':'hide',

'phone':'010-1234-5678',

'dept':'computer'

}

AsyncStorage.setItem('obj', JSON.stringify(obj));

}


하나의 값을 저장할때와 다른점은 JSON.stringify()로 JSON화 시켜주는 것 밖에 없다.

저장한 값을 불러올때는 아래와 같은 방법을 쓰면 된다.


_loadData = async () => {

try {

const data = await AsyncStorage.getItem('data');

alert(data);

} catch(error) {

alert(error);

}

}