본문 바로가기
Frontend/React Native

[React Native] 리액트 네이티브 AsyncStorage 앱 종료해도 데이터 유지하기

by couque 2023. 6. 16.
반응형

앱 개발을 할 때, 앱 실행중에 데이터를 유지하는 방법이 여러가지가 있는데

앱을 종료했을때에도 데이터를 유지할 수 있는 방법이 있다.

AsyncStorage를 사용하는 방법인데 앱 실행시에 로그인 유무 체크에도 활용할 수 있어 유용하며

아래와 같이 사용할 수 있다.


# AsyncStorage import 하기

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

 

# AsyncStorage 데이터 저장하기

AsyncStorage.setItem('sampleData', JSON.stringify({'sampleId':id}), () => {
    console.log('AsyncStorage setItem');
});

 

# AsyncStorage 데이터 불러오기

AsyncStorage.getItem('sampleData', (err, result) => {
    const resultData = JSON.parse(result);
    console.log(resultData.sampleId);
});

 

앱 종료했을때 유지해야하는 데이터를 저장하는 경우에 유용하게 사용되고

종료가 아닌 앱 실행중에도 DB나 세션에 저장하지 않고 AsyncStorage를 사용하여

로컬저장소에 저장하여 사용할 수 있어서 유용하게 사용할 수 있는 저장소이다.

 

데이터가 단건인 경우 값만 저장할 수 있고,

AsyncStorage.setItem('sampleData', 'sampleId', () => {
    console.log('AsyncStorage setItem');
});

 

다건인경우 JSON 형태로 저장하는데, string으로 변환하여 저장하면 된다.

저장된 값을 불러올때는 다시 JSON 변환하여 사용할 수 있다.

 

앱을 실행 했을때

로그인이 되어 있는 경우, 회원가입 화면이 아닌 앱 메인화면으로 이동하고

로그인이 안되어 있는 경우, 회원가입 또는 로그인 화면으로 이동시키는 로직에 활용할 수 있다.

 

반응형

댓글