190407.md React Native 개발자를 위한 로컬 스토리지 시스템 작성중

src/draft/190407.md

@@ -1,10 +1,12 @@
 ---
 title: 🏪 React Native 개발자를 위한 로컬 스토리지 시스템
-date: '2019-04-07'
+date: '2019-08-08'
 spoiler: React Native 개발자를 위한 로컬 스토리지 시스템
 ---
 
-> 군돌이의 iOS 위젯과 안드로이드 위젯을 만들면서 React Native(이하 리액트 네이티브)에서 제공하는 `AsyncStorage` (RN 0.59 버전 이후로는 `@react-native-community/async-storage`로 분리됐다) 말고 네이티브단의 스토리지에 저장을 해야했다. 하지만 웹개발자로써 각 플랫폼별로 어떻게 로컬 스토리지에 저장이 되는지에 대해 알지 못하는 경우가 많다. 그래서 이번 블로그의 소재를 AsyncStorage와 네이티브의 스토리지 시스템(iOS의 UserDefaults, 안드로이드의 SharedPreferences)의 차이점에 대해 작성하게 되었다.
+> 작성중...
+
+> 군돌이의 iOS 위젯과 안드로이드 위젯을 만들면서 React Native(이하 리액트 네이티브)에서 제공하는 `AsyncStorage` (RN 0.59 버전 이후로는 [`@react-native-community/async-storage`](https://github.com/react-native-community/async-storage)로 분리됐다) 말고 네이티브단의 스토리지에 저장을 해야했다. 하지만 웹개발자로써 각 플랫폼별로 어떻게 로컬 스토리지에 저장이 되는지에 대해 알지 못하는 경우가 많다. 그래서 이번 블로그의 소재를 AsyncStorage와 네이티브의 스토리지 시스템(iOS의 UserDefaults, 안드로이드의 SharedPreferences)의 차이점에 대해 작성하게 되었다.
 
 ## 🎍 [AsnycStorage](https://facebook.github.io/react-native/docs/asyncstorage) - 리액트 네이티브의 비동기적이고 영속적인 로컬 스토리지 시스템
 
@@ -18,7 +20,7 @@ spoiler: React Native 개발자를 위한 로컬 스토리지 시스템
 
 추가적으로 iOS는 네이티브 코드에 의해 작은 값들은 직렬화된 딕셔너리에 큰 값들은 분리된 파일에 저장하고, 안드로이드에서는 [RocksDB](https://rocksdb.org/) 혹은 [SQLite](https://www.sqlite.org/index.html) 기반으로 저장한다고 한다.
 
-### 사용법
+### API
 
 현재 `@react-native-community/async-storage`에서 지원하는 API는 다음과 같다.
 
@@ -37,3 +39,33 @@ spoiler: React Native 개발자를 위한 로컬 스토리지 시스템
 
 기존의 `AsnycStorage`의 API에서 두 개의 함수가 더 추가된 걸 볼 수 있었다. (`flusthGetRequests`와 `useAsyncStorage`) 그 중 `useAsyncStorage`는 `AsyncStorage`를 React의 Hooks처럼 사용할 수 있도록 해주는 함수인 것 같다. 이 내용들은 이번 글의 범위를 넘어서므로 다루진 않겠다.
 
+### 사용법
+
+`async-storage`에서 주로 사용하는 API 함수는 `getItem`와 `setItem`이다. 다음과 같이 사용할 수 있다.
+
+```js
+import AsyncStorage from '@react-native-community/async-storage';
+
+const KEY_USER = 'key:user';
+
+storeUser = async (user) => {
+  try {
+    await AsyncStorage.setItem(KEY_USER, JSON.stringify(user));
+  } catch (e) {
+    // 에러 처리
+  }
+}
+
+loadUser = async () => {
+  try {
+    const value = await AsyncStorage.getItem(KEY_USER);
+    if(value !== null) {
+        return JSON.parse(value)
+    }
+  } catch(e) {
+    // 에러 처리
+  }
+}
+```
+
+위 코드를 보면 `storeUser` 함수에서 `KEY_USER` 키에 `user` 객체를 직렬화해서 저장하고 `loadUser` 함수에서는 `KEY_USER` 키에 있는 값을 다시 가져와서 역직렬화한 값을 반환해주는 것을 볼 수 있다. 주의 깊게 봐야할 점은 `AsyncStorage`의 API 함수는 대부분 `Promise`형을 반환하기 때문에(비동기 함수이기 때문에) `async`, `await` 키워드와 함께 사용해야한다는 점이다.