Capstone#5. React Native 비동기 저장소 AsyncStorage

 

 

 

안녕하세요!

저번 포스팅에서 

 

https://dlawlgus40.tistory.com/136

Capstone#4. Axios instance 생성하기 / Axios interceptors

 

interceptors의 기능 설명하면서 코드가 잠깐 나왔었었는데,

여기서 

 

Axios.interceptors.request.use(async config => {
  if (
    config.headers.Authorization === '' ||
    config.headers.Authorization === undefined
  ) {
    const value = await AsyncStorage.getItem('AccessToken');
    if (value) {
      const accessToken = value;
      if (accessToken) {
        Axios.defaults.headers.common.Authorization = `Bearer ${accessToken}`;
        config.headers.Authorization = `Bearer ${accessToken}`;
      }
    }
  }
  return config;
});

 

 

여기서 AsyncStorage라는 키워드가 나오잖아요!

저기서 나온 AccessToken을 Axios의 헤더에 공통으로 넣는다..??

 

다들 AsyncStorage가 무엇인지 정확히 알고 계신가요~?

웹사이트의 LocalStorage와 비슷한 기능을 하는데

AsyncStorage란 암호화 되지 않은 비동기적인 데이터를 관리하는 Key-Value 저장 시스템입니다!

앱의 전역에서 사용가능해요.

 

 

AsyncStorage 사용 이유??

 

 

분명히 코드에 썼으면 이걸 사용한 이유가 있을 것입니다!

왜 썼는지 알아봅시다!

 

AsyncStorage는 redux 등의 상태관리와 달리 앱을 닫거나 다시 시작해도 저장한 값이 유지된다는

데이터 지속성 특징이 있어요.

 

추가적으로 오프라인을 지원하고 키-값 쌍을 위한 간단한 API입니다!

 

그래서 사용자 세션 및 인증기능을 구현할 때 주로 사용이 돼요.

예를 들어, 로그인했을 때 거기서 나온 토큰을 전역에 미리 저장해 두고

저장된 값이 있으면 로그인을 했다, 없으면 안 했다로 구분을 해주면 되니까요!

 

AsyncStorage 설치

 

왜인지는 모르겠으나 공식문서에서 삭제되었다고 나오네요!

 

https://reactnative.directory/?search=storage

 

해당 커뮤니티 패키지 중 하나를 사용하라고 나오네요!

 

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

or

yarn add @react-native-async-storage/async-storage

 

 

 

프로젝트 내 AsyncStorage 사용 방법

 

 

import {AsyncStorage} from 'react-native';

 

우선 가장 중요한 import를 해주고요!

 

저는 로그인 API를 콜한 후 응답받은 accessToken을

저장소에 setItem으로 저장해 두었어요.

 

export const setAuthToken = async token => {
  if (token) {
    await AsyncStorage.setItem('AccessToken', token);
    await AsyncStorage.setItem('RefreshToken', token.refresh);
    Axios.defaults.headers.common.Authorization = `Bearer ${token}`;
  } else {
    await AsyncStorage.removeItem('AccessToken');
    await AsyncStorage.removeItem('RefreshToken');
    delete Axios.defaults.headers.common.Authorization;
  }
};

 

이런 식으로 요!

이때 AccessToken이 key값이고 token이 value값이 되겠죠?

 

removeItem은 AccessToken에 저장된 값을 지우라는 뜻입니다!

 

또한 데이터를 저장했으면 해당 데이터를 가져와야 하는데

 

    const value = await AsyncStorage.getItem('AccessToken');

 

 

이렇게 getItem으로 AccessToken에 저장된 값을 가져올 수 있어요!

 

프로젝트 내 본인이 원하는 곳에서 해당 AccessToken을 꺼내와 사용해 보세요!

 

 

그럼 안녕~~ 다음포스팅 때 봅시다 ❤️❤️