안녕하세요.
쌩광부입니다.
이번 시간에는 RN에서 데이터를 파일로 저장하는 방법을 배워 보겠습니다.
간단하게 파일 입출력 함수를 이용해서 데이터를 저장할 수도 있겠지만 모바일에서는 보안 관련 문제가 많기 때문에 파일 입출력시 제한사항이 좀 있을 수 있습니다.
그래서 저희가 만드는 모바일 지갑에서는 AsycStorage 패키지를 이용해 PrivateKey와 지갑 주소들을 저장합니다.
오늘은 바로 그 AsycStorage에 대해서 설명하도록 하겠습니다.
#5. React Native AsyncStorage
1. AsyncStorage란?
비동기식으로 데이터를 저장하는 RN의 기본 패키지인데요. 별도로 설치해야될 패키지는 없습니다.
Async라는 말이 들어가는것을 보면 이것이 비동기식임을 의미하는데요.
즉, 저장 명령을 내리면 저장이 완료될때까지 기다리는것이 아니고 저장 되던지 말던지 그냥 다음 작업을 진행한다는 것이죠.
그런데 왜 비동기식으로 해야되는거지?
만약 동기식으로 많은 데이터를 한꺼번에 저장하게 되면 화면이 멈춰진 상태가 됩니다.
사용자가 봤을때는 뭐하는건지 답답하겠죠?
그렇게 때문에 비동기식으로 뒤에서 뭔가 어려운 작업을 진행하고 화면은 그냥 자연스럽게 욺직이게 되는거죠.
그럼 앱이 훤씬 더 그럴사하게 보이겠죠. ^^
물론 JS가 기본적으로 대부분 비동기식으로 동작되기 때문에 그리 새로운 것도 아닙니다.
이러한 비동기식 작업에서는 결과값을 Callback 함수로 받게되는데요.
아래 예제를 보시면 모두 명령을 내리고 거기에 Callback 함수 기술한 것을 볼 수 있습니다.
JS나 RN을 처음 보시는 분들은 조금 생소하시겠지만 그냥 그렇게 해야되는구나 하시면 됩니다.
음...개발자들 간에는 JS를 Callback 지옥이라 부르는데요.
그 만큼 많은 Callback을 코딩해야 되기 때문에 전체적으로 매우 복잡한 구조를 가지게 됩니다.
어쨌든 RN이 JS기반이기 때문에 어쩔 수 없습니다. Callback 지옥에 들어가야 합니다. ㅠㅠ
AsyncStorage는 Key, Value 형태로 데이터를 저장합니다.
즉,
Name=쌩광부
Address=서울시
이런식으로 말이죠.
앞쪽에 있는것이 Key, 뒤에 값이 Value
이런 형식으로 지정된 곳에 저장되는 방식입니다.
AsycStorage를 이용하면 모바일 기기에서 알아서 지정된 위치에 저장되기 때문에 어디에 저장되는지는 알 필요는 없습니다.
2. AsyncStorage 사용하기
당연히 import를 해줘야 하고요.
import { AsyncStorage } from 'react-native';
데이터를 저장할때는 setItem 함수를 이용합니다.
AsyncStorage.setItem('Name', '쌩광부', (error) => {
if(error) {
console.log(error);
}
});
만약 저장하기에 실패했다면 error 변수에 에러값이 들어가 있습니다.
데이터를 불러올때는 getItem 함수를 이용합니다.
AsyncStorage.getItem('Name', (error, result) => {
if(error) {
console.log(error);
}
else {
console.log(result);
}
});
위와 같이 하면 result 변수에 '쌩광부'가 들어가 있겠고요.
만약 불러오기에 실패했다면 error 변수에 에러값이 들어가 있습니다.
데이터를 삭제할때는 removeItem 함수를 이용합니다.
removeItem('Name', (error) => {
if(error) {
console.log(error);
}
});
이제 좀 더 복잡한 방식으로 여러가지 값을 동시에 저장하는 방법이 있는데요.
let keyValues = ["Name": "쌩광부", "Address": "서울시"];
AsyncStorage.multiSet(keyValues, (error) => {
if(error) {
console.log(error);
}
});
위와 같이 multiSet 함수를 이용하면 동시에 여러 데이터를 저장할 수 있습니다.
예상하셨겠지만 multiGet 함수를 이용하면 여러 데이터를 불러올 수 있겠죠?
let keys = ["Name", "Address"];
AsyncStorage.multiGet(keys, (error, stores) => {
for(let n in stores) {
let key = store[i][0];
let value = store[i][1];
});
});
위와 같이 하면 key, value를 반복적으로 얻어올 수 있습니다.
만약 우리가 현재 저장된 모든 값을 얻어오고 싶을때는 getAllKeys 함수를 이용합니다.
AsyncStorage.getAllKeys((error, keys) => {
if(!error) {
AsyncStorage.multiGet(keys, (error, stores) => {
for(let n in stores) {
let key = store[i][0];
let value = store[i][1];
});
});
}
});
위와 같이 getAllKeys 함수로 저장된 모든 Key값을 불러오고 multiGet 함수를 이용해 모든 Key에 대한 Value를 얻어올 수 있습니다.
AsyncStorage에 대한 자세한 내용은 아래 링크를 참고하세요.
https://facebook.github.io/react-native/docs/asyncstorage#docsNav
그럼 오는 강좌는 마치도록 하겠습니다.
다음 강좌에서는 이전 시간에 배운 내용과 함께 본격적으로 RN에서 지갑을 만들어 보도록 하겠습니다.
많은 기대 부탁드립니다.
행복한 주말 보내세요.
저의 모든 강좌를 보시려면 블로그를 방문해주세요.
https://www.ddengle.com/@TopMining
열심히해서 지갑을 만들어 보고싶네요.