[React Native] 로컬 데이터베이스 - AsyncStorage

React Native
Nadan
Nadan Dev Blog

AsyncStorage

이전 버전에서는 react-native 내장 api였으나, 이제 따로 모듈을 설치해 줘야 함

  • 안드로이드의 SharedPreference
  • iOS의 UseDefaults

Docs

https://react-native-community.github.io/async-storage/

API

  • setItem(key, value)
  • getItem(key)
  • removeItem(key)

주의

value 값으로 반드시 문자열을 사용해야 함. boolean, 숫자 등 문자열을 사용하지 않을 경우 오류 메시지 없이 앱이 죽을 수 있음

활용1 - 토큰값 저장

AuthContext -> 예시 변경

import { AsyncStorage } from 'react-native';
...

const authReducer = (state, action) => {
    switch (action.type) {
        case 'add_error':
            return { ...state, errorMessage: action.payload };
        case 'signup':
            return { token: action.payload, errorMessage: '' };
        default:
            return state;
    }
};

const signup = (dispatch) => {
    return async ({ email, password }) => {
        try {
            const response = await trackerAPI.post('/signup', { email, password })
            await AsyncStorage.setItem('token', response.data.token);
            dispatch({ type: 'signup', payload: response.data.token })
        } catch (err) {
            dispatch({ type: 'add_error', payload: 'Something went wrong with sign up'});
        }
    }
}