useEffect에 넣는 콜백 함수는 async를 사용할 수 없습니다. 따라서 내부에 async 함수를 선언하고 해당 함수를 호출하는 방식으로 구현하였습니다. Hook 함수를 모두 작성했으면 해당 Hook을 RootStack 컴포넌트에서 사용하세요.

screens/RootStack.tsx

import useAuthLoadEffect from '../hooks/useAuthLoadEffect';

(...)

function RootStack() {
  useAuthLoadEffect();  
  (...)

이제 앱을 처음 켤 때 authStorage에서 정보를 조회한 후 만약 인증 정보가 존재하면 상태 업데이트 및 토큰이 적용될 것입니다.

그런데 이 Hook을 왜 App에서 사용하지 않고 RootStack에서 사용했을까요? 그 이유는 해당 Hook에서 useUserState를 사용하여 UserContextProvider로 감싼 컴포넌트 내부에서만 사용할 수 있기 때문입니다. App은 UserContextProvider 바깥에 있기 때문에 App에서 방금 만든 Hook을 사용하면 정상적으로 작동하지 않습니다.

로그인 후, 앱을 재시작해보세요. 그리고 사용자 메뉴 탭을 열었을 때 사용자 상태가 유지되고 있나요?