[ReactNative] Async Storage및 WebView에서 Message 사용하기 — Async Storage

5 min readMar 28, 2021

글이 길어져서 두편으로 나누었어요.
1. [ReactNative] Async Storage및 WebView에서 Message 사용하기 — Message
2. [ReactNative] Async Storage및 WebView에서 Message 사용하기 — Async Storage

이번 포스팅에서는 지난 포스팅에 이어, ‘banana’ 를 실제로 저장하고, 꺼내오고, 삭제하는 것에 대해 살펴볼게요.

먼저, 지난 시간에 했던 문제에 대한 정의를 다시 살펴볼게요.

문제 정의:

web 에서 갖게 된 ‘banana’ 를 app 에 저장해 뒀다가 필요할 때 꺼내오고 싶다.
새로고침을 하거나, app 을 종료하더라도 다시 켰을 때, 필요할 때 가지고 오고 싶다.

지난 시간에는 위 문제 중 ‘필요할 때’ 를 해결했다고 볼 수 있겠죠. 필요할 때 Message 기능을 통해 통신을 할 수 있게됐으니까요.

그렇다면 이제 ‘banana’ 를 저장하고, 꺼내고, 삭제하는 방법을 살펴볼게요.

위와 같은 기능을 위해서 Async Storage 를 사용할거에요. Async Storage 는react-native 에서 Deprecated 되어서, react-native 에서 권고하는 커뮤니티 패키지 중 React Native Async Storage 를 사용합니다.

사용법은 Local Storage 를 사용하듯이 매우 간단한데요, 다른 점이라면 이름에서 알 수 있듯 Async 를 사용한다는 것입니다.

사용방법은 Documentation 을 보면 잘 정리가 되어있는데요, 해당 사용법을 정리해 보고, ‘banana’ 역시 그에 맞게 처리해보도록 할게요.

먼저 필요한 ‘저장하기’, ‘꺼내오기’, ‘삭제하기’ 기능은 아래와 같아요. 추가적으로 필요한 기능들은 Documentation 의 API 부분을 확인하면 될거에요.

저장하기

Storing string value

const storeData = async (value) => {
  try {
      await AsyncStorage.setItem('@storage_Key', value)
  } catch (e) {
    // saving error
  }
}

Storing object value

const storeData = async (value) => {
  try {
    const jsonValue = JSON.stringify(value)
    await AsyncStorage.setItem('@storage_Key', jsonValue)
  } catch (e) {
  // saving error
  }
}

꺼내오기

Reading string value

const getData = async () => {
  try {
  const value = await AsyncStorage.getItem('@storage_Key')
    if(value !== null) {
    // value previously stored
    }
  } catch(e) {
  // error reading value
  }
}

Reading object value

const getData = async () => {
  try {
    const jsonValue = await AsyncStorage.getItem('@storage_Key')
    return jsonValue != null ? JSON.parse(jsonValue) : null;
  } catch(e) {
  // error reading value
  }
}

삭제하기

removeItem

removeValue = async () => {
  try {
    await AsyncStorage.removeItem('@MyApp_key')
  } catch(e) {
  // remove error
  }  console.log('Done.')
}

그러면 이제 사용법을 바탕으로 ‘banana’ 를 처리해보도록 할게요.

위에서부터 살펴보면, 지난번에 이야기했던 타입 가드를 통해 ‘banana’ 가 정상 ‘banana’ 인지 확인하는 함수를 사용해요.

setBanana() 는 ‘banana’ 를 저장하고, getBanana() 는 ‘banana’ 를 꺼내서 return 해 줘요. removeBanana() 는 ‘banana’ 를 삭제하죠.

이제 이 함수를 필요한 시점에 적절히 사용하면 됩니다.

정말 간단한데 주의할 점이라면 Async 즉, 비동기를 기반으로 작동하기 때문에 그에 대한 처리를 해주어야 한다는 것입니다. 그 부분을 제외하면 Local Storage 를 사용하듯 간단히 사용할 수 있어요.

길었던 Message 처리에 대한 과정에 비해 Async Storage 의 사용은 간단히 마무리 되었는데요. 사용법이 단순하기도 하고, 그 사용법으로 기대한 작동이 잘 되기도 했어요. 덕분에 해결하고자 했던 문제도 해결할 수 있었고요.

이렇게 react-native 에서 message 기능과 storage 를 사용하는 것에 대해 이야기 해 보았습니다. 두 기능다 react-native 에서 직접 지원하는 기능이 아니라 의구심이 들기도 하고, 주의가 필요하기도 한 듯 합니다. 혹시 더 나은 해결방법이 있다면 알려주시면 감사하겠습니다.
react 를 주로 사용하여 개발을 하다가 react-native 를 다루게 되어 재미있기도 하고, 공부가 되기도 해서 기록해 보았습니다. 그러면 이상으로 react-native 에서 Async Storage및 WebView에서 Message 사용하기 포스팅을 마치도록 할게요!

[ReactNative] Async Storage및 WebView에서 Message 사용하기 — Async Storage

Written by hansol yang

No responses yet