[React Native] AsyncStorage 왜 사용?

https://github.com/react-native-async-storage/async-storage

GitHub - react-native-async-storage/async-storage: An asynchronous, persistent, key-value storage system for React Native.

 

외 사용핢?

 

설치법이나 사용법은 공식 문서에 잘 나와있고, 왜 사용하는지 알아보자.

 

공식 한줄 소개는 다음과 같다. 

An asynchronous, unencrypted, persistent, key-value storage system for React Native.

React Native에서, 비동기/암호화되지않고/영구적인 key-value 저장 시스템이라고 한다.

 

처음 딱 보면 뭔 개소린지..? 어려운 말로 써놨기 때문에 쉽게 살펴보자.

일단 쉽게 말하면 React Native에서 어떤 값을 오프라인에(디바이스 자체에) 저장하고 싶을 때 쓰는 패키지 중 monthly download가 가장 높은 녀석이다.

 

이렇게 오프라인에 저장하는 것이 필요한 이유는 여럿인데, 가장 대표적인 이유는 유저가 앱을 다시 켰을 때, 기존에 입력했던 변수나 세팅 사항 등을 재사용할 수 있게하기 위함이다. 모바일 디바이스를 재시작하는 경우도 포함이다. 

 

실제 사용하는 앱 중, 새로 킬 때마다 마치 처음 다운받은 것처럼 작동하는 앱은 거의 없다. 즉 거의 모든 앱에서 사용되고 있는 필수 고려사항이라 할 수 있다.

 

이름 및 한줄 소개에서 알 수 있듯 비동기적(async)으로 데이터를 저장/불러오며, 따로 암호화하지 않는 것 같고 영구적으로 저장된다고 한다. 따라서 디바이스마다 저장 용량 한계가 있긴 한데, 어짜피 다 채우기 전에 약정이 끝나 폰을 바꾸게 된다.

 

틀딱이라면 예전에 썼던 LocalStorage와 같다고 생각하면 편하다. 

 

실제 예제

 

다음은 TypeScript를 이용한 AsyncStorage의 사용 예제이다. 참고로 필자는 TypeScript 없이 어물쩡 살고 있었으나 더 이상 미룰 수가 없어서 공부를 시작하고 있다. 현 시점 기준 개발자가 TypeScript를 모르면 그냥 곧 도태된다고 생각하면 될 것 같다.

const App = () => {
  const [user, setUser] = useState<Nullable<AppUser>>(null);

  const $setUser = useCallback<typeof setUser>(
    (data) => {
      setUser(data);

      if (data) {
        AsyncStorage.setItem("username", data.name);
      } else {
        AsyncStorage.removeItem("username");
      }
    },
    [setUser],
  );

  useEffect(() => {
    AsyncStorage.getItem("username")
      .then((username) => {
        if (username) {
          setUser({ username });
        }
      })
 	.finally(() => SplashScreen.hide());
  }, []);

  return (
    // 원하는 내용
  );
};

export default App;

  

위 코드는 나중에 시간나면 자세히 분석해보도록 하자.