Recoil 상태관리

전역 상태 관리해주는 Recoil 대해 정리해줄 필요가 있겠단 생각이 들어서 정리해본다.

우선 Application의 시작점인 App.tsx(react native 기준)에 RecoilRoot를 감싼다.

그리고 나서 사용할 전역변수들을 atoms.ts 파일에 아래와 같이 선언해놓는다.

import { atom } from 'recoil';
export const tokenState = atom({
  key: 'tokenState',
  default: '',
})

준비는 끝났다. 사용하면 된다.

UseRecoilValue

단순히 전역 변수 값을 가져오는데 사용하는 함수이다.

import { useRecoilValue } from 'recoil';
import { tokenState } from '../../recoil/atoms';

const token = useRecoilValue(tokenState);

위와 같이 선언한 뒤 사용해주면 된다.

UseRecoilState

전역변수를 가져오고, 업데이트 모두 해야할 때 사용하는 함수이다.

import { useRecoilState } from 'recoil';

const [token, setToken] = useRecoilState(tokenState);

useSetRecoilState

atom에 set할때만 사용하는 함수이다. atom 값을 업데이트 할 수 있는 setter 함수를 리턴한다. 이때 setter 함수는 비동기로 사용된다.

import { useSetRecoilState } from 'recoil';

const setToken = useSetRecoilState(tokenState);

useResetRecoilState

atoms의 값을 default로 초기화할때 사용하는 함수이다.

import { useResetRecoilState } from 'recoil';

const resetToken = useResetRecoilState(tokenState);

Recoil의 단점

React에서의 Recoil은 Persist하게 사용할 수 있다(Library 활용) 하지만, RN에서는 존재하지 않는다. 그래서 애플리케이션을 껐다가 키면 초기화가 된다. 이를 방지하기 위해서 AsyncStorage라는 것을 사용해야 한다

import AsyncStorage from '@react-native-async-storage/async-storage';

// get
export const getStorage = async (key: string) => {
  const result = await AsyncStorage.getItem(key);
  return result && JSON.parse(result);
};

// set
export const setStorage = async (key: string, value: string) => {
  return await AsyncStorage.setItem(key, JSON.stringify(value));
};

// remove
export const removeStorage = async (key: string) => {
  return await AsyncStorage.removeItem(key);
};

우선 위와 같이 AsyncStorage를 사용할 수 있게 함수들을 만들어준다. 이후 저장을 하고 싶다면 setStorage, 불러오고 싶다면 getStorage를 사용하여 Asyncstorage를 사용해주면 된다.

로그인 프로세스를 확인해보자. 로그인을 하면 API로부터 토큰을 받아오고, 해당 토큰을 저장해주어야 한다. 바로 Mainpage로 Routing 될수있게끔 Recoil에도 저장해야 하지만, 어플리케이션을 나갔다와도 로그인이 될 수 있게끄음 AsyncStorage에도 토큰을 저장해야 한다.

if (response.ok) {
    const data = await response.json();
    setStorage("token", JSON.stringify(data.data.accessToken));
    setToken(data.data.accessToken)
}

위와 같이 token을 세팅해준다. 그리고는 RootNavigator로 이동하여 아래와 같이 코드를 입력해준다.

useEffect(() => {
    const getTokenFromAsyncStorage = async () => {
      try {
        const storedToken = await AsyncStorage.getItem('token');
        if (storedToken !== "null") {
          setToken(storedToken);
        }
      } catch (error) {
        console.log('Error retrieving token from AsyncStorage:', error);
      }
    };
    getTokenFromAsyncStorage();
  }, [])

AsyncStorage에서 token이 있다면 해당 값을 꺼내와서 token을 세팅해주고, 없다면 세팅해주지 않는다. 이와 같이 세팅하면 애플리케이션을 나갔다 들어와도 정상적으로 token을 사용하여 Navigate할 수 있다.