[AsyncStorage] 리액트 네이티브로 앱을 만들때 , localStorage같은 역할을 할 수 있는 애가 있을까?!

 

리액트 네이티브를 배우면서, AsyncStorage를 사용하는 법을 배우게 되었는데

튜터님이 이 AsyncStorage는 localStorage같은 역할을 해주는 아이라고 하셨었다.

 

생각해보니 이건 웹이 아니니, 핸드폰에 localStorage가 없지 않은강?!

따라서 웹 프로젝트를 만들때, state나 서버에 저장하지 않고 임시로 새로고침이 되어도 데이터를 가지고 있을 수 있는

데이터저장소가 필요한 것 

 

앱이 꺼지더라도 데이터를 가지고 있을 수 있는 아이가 필요한 거시당

 

** 예전에는 AsyncStorage가 리액트 네이티브 프로젝트에 자체 내장되어 있어서 별도로 설치할 필요가 없었지만, 해당 기능을 커뮤니티에서 유지보수하면서 라이브러리로 분리되었다고 한다. 따라서 사용하려면 따로 설치를 해주어야 함!!

 

먼저 install을 해주어야게찌

 

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

 

설치가 끝나면 프젝에서 import를 해주장

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

 

 

AsyncStorage의 메소드를 안에서 사용하려면 비동기로 사용을 해주어야 함

const setCat = async (cat) => {
  	setCategory(cat);
    await AsyncStorage.setItem("category", cat);
  };

 

 

AsyncStorage.setItem('변수이름','변수 데이터', () => {
  console.log('데이터 저장')
});

AsyncStorage.getItem('변수이름', (err, result) => { 
  console.log(result); // result에 담기고, 불러온 데이터 출력
});

 

 

만약, 객체나 배열데이터라면?!?!

==> 저장할땐 stringify를 해주고,  꺼내올땐 stringify되있던 넘을 퐐씡~~~ 작업 필요

AsyncStorage.setItem('객체 이름',JSON.stringify({'id': 'id1', 'name':'hongkildong'}), () => {
  console.log('객체 타입저장') //JSON 형식을 stringify 해주어야 한다. 
});

AsyncStorage.getItem('객체 이름', (err, result) => {
  const 전체객체이름 = Json.parse(result); //string화 된 result를 다시 파싱해주기
  console.log('아이디는' + 전체객체이름.id);        
  console.log('name은: ' + 전체객체이름.name); 
});