[react-native] recoil 데이터 유지하기 (async storage)

1. react-native-recoil-persist 사용하기

2. async-storage와 연동하여 사용하기

 

recoil을 사용하던 중 잘 바뀌지 않는 데이터는 매번 서버에서 불러오는 것 보다 데이터를 유지 시키는 편이 좋겠다고 생각했다.

 

1. react-native-recoil-persist

먼저 react-native-recoil-persist를 이용하는 방법이다.

라이브러리를 사용하는 방법이 훨씬 간단하여 현재 프로젝트도 이 방법을 사용 중이다!

하지만 현재 시점에서 react-native-recoil-persist가 아직도 버전 0.0.6을 지원하는 것을 보아 업데이트가 잘 되지 않는 걸로 보인다. 지금은 사용하지만 지켜보다가 나중에는 2번 방법으로 돌아가는 게 좋을 수도 있다는 생각이 든다!

 

먼저 라이브러리 설치는 간단한 명령어로 한다.

npm install react-native-recoil-persist

or

yarn add react-native-recoil-persist

사용 방법은 아주 간단하다. 

아래와 같이 RecoilRoot 태그 안에 <ReactNativeRecoilPersistGate> 태그를 넣어서 감싸준다.

import React from "react";
import ReactNativeRecoilPersist, {
  ReactNativeRecoilPersistGate,
} from "react-native-recoil-persist";
import { RecoilRoot } from "recoil";

export const AppRoot = () => {
  return (
    <RecoilRoot>
      <ReactNativeRecoilPersistGate store={ReactNativeRecoilPersist}>
        <RestOfYourApp />
      </ReactNativeRecoilPersistGate>
    </RecoilRoot>
  );
};

그리고 사용하던 아톰에 아래와 같이 effects_UNSTABLE을 추가해주면 끝!

import ReactNativeRecoilPersist from "react-native-recoil-persist";
import { atom } from "recoil";

const testAtom = atom({
  default: "I am a test",
  key: "test",
  // Add this effect to the atom to persist it
  effects_UNSTABLE: [ReactNativeRecoilPersist.persistAtom],
});

아래의 사이트에 더 자세한 설명이 되어있다.

react-native-recoil-persist - npm (npmjs.com)

react-native-recoil-persist

 

 

2. asyncstorage와 연동하기

이번에는 atom의 effects를 이용하여 asyncstorage에서 미리 값을 불러와서 연동시키는 방법이다.

아래의 사이트를 참고했다.

Recoil with Storage (feat. effects) - 오픈소스컨설팅 테크블로그 (osci.kr)

Recoil with Storage (feat. effects) - 오픈소스컨설팅 테크블로그

아래는 user 데이터를 asyncstorage에 저장해두고 자동으로 불러오는 코드이다.

나는 asyncstorage에 userData라는 이름의 object를 저장했기 때문에 그 중 userId만 불러오기 위하여 detail이라는 파라미터를 추가해 주었다.

import {atom} from 'recoil';
import {storage} from '../config/storage';

// asyncstorage와 데이터 연동 (userData에 있는 값들 가져오기)
const asyncStorageEffect =
  (key, detail) =>
  async ({setSelf, onSet}) => {
    const savedValue = await storage.getStrItem(key);

    if (savedValue !== null) {
      // 초기화
      setSelf(savedValue[detail]);
    }

    // 해당하는 atom 값 변경시 실행
    onSet((newValue, _, isReset) => {
      isReset ? storage.removeItem(key) : storage.setItem(key, newValue);
    });
  };

export const UserIdState = atom({
  key: 'userId',
  default: '',
  effects: [asyncStorageEffect('userData', 'userId')],
});

 

---

# 후기

원래는 2번 방법을 사용하다가 라이브러리를 사용하는게 편리하기 때문에 1번 방법으로 바꾸어서 사용 중이다. react-native-recoil-persist가 업데이트 될지도 지켜봐야겠다!