15.8.5.2 authStorage에서 인증 정보 불러오기

저장하는 작업이 끝났으니, 불러오는 작업도 구현해야겠지요? 관련 작업을 수행하는 커스텀 Hook을 만들어 RootStack 컴포넌트에서 사용하는 방식으로 구현하겠습니다.

hooks 디렉터리에 useAuthLoadEffect.tsx 파일을 만들고, 다음과 같이 Hook을 작성해보세요. 이 Hook은 authStorage에서 데이터를 불러오고, 데이터가 존재하면 UserContext 업데이트 및 토큰을 적용합니다.

hooks/useAuthLoadEffect.tsx

import {useEffect} from 'react';
import {applyToken} from '../api/client';
import {useUserState} from '../contexts/UserContext';
import authStorage from '../storages/authStorage';

export default function useAuthLoadEffect() {
  const [, setUser] = useUserState();

  useEffect(() => {
    const fn = async () => {
      const auth = await authStorage.get();
      if (!auth) {
        return;
      }
      setUser(auth.user);
      applyToken(auth.jwt);
    };
    fn();
  }, [setUser]);
}