React Native - 로그아웃 후 로그인 화면 전환 문제 해결하기

문제 상황

React Native 앱에서 로그아웃 기능 구현 중 다음과 같은 문제가 발생함:
1. 로그아웃 후 로그인 화면으로 강제 이동이 되지 않는 현상
2. Navigation.reset() 사용 시 다음과 같은 에러 발생:

The action 'RESET' with payload {"index":0,"routes":[{"name":"Login"}]} was not handled by any navigator.

원인 분석

1. 조건부 렌더링된 네비게이터의 한계:

<NavigationContainer>
  <Stack.Navigator>
    {isLoggedIn ? (
      <Stack.Screen name="MainTab" ... />
    ) : (
      <>
        <Stack.Screen name="Login" ... />
        <Stack.Screen name="Signup" ... />
      </>
    )}
  </Stack.Navigator>
</NavigationContainer>

• isLoggedIn 상태에 따라 스크린이 조건부로 렌더링되기 때문에, 로그인된 상태에서는 'Login' 스크린이 네비게이터에 존재하지 않음
• 따라서 navigation.reset()으로 Login 화면 접근 시 에러 발생

해결 방법

AsyncStorage의 상태 변경을 통한 화면 전환 구현:

1. 로그아웃 함수 수정:

const handleLogout = async () => {
  try {
    await AsyncStorage.multiRemove([
      "isLoggedIn",
      "rememberLogin",
      "accessToken",
      "refreshToken",
    ]);
    await AsyncStorage.setItem("isLoggedIn", "false");
  } catch (error) {
    console.error("로그아웃 실패:", error);
  }
};

2. App.tsx에서 로그인 상태 모니터링:

useEffect(() => {
  const checkLoginStatus = async () => {
    const [loginStatus, rememberLogin] = await AsyncStorage.multiGet([
      "isLoggedIn",
      "rememberLogin",
    ]);

    if (rememberLogin[1] !== "true") {
      await AsyncStorage.setItem("isLoggedIn", "false");
      setIsLoggedIn(false);
    } else {
      setIsLoggedIn(loginStatus[1] === "true");
    }
  };

  checkLoginStatus();
}, []);

해결 방법의 장점

1. 네비게이션 스택 관련 에러 방지
2. 앱의 전체 상태 관리가 더 일관성 있고 예측 가능해짐
3. React Native의 선언적 UI 패턴에 더 적합한 구현

주의사항

1. AsyncStorage 작업은 비동기로 처리되므로, 상태 업데이트 시점에 주의
2. 로그아웃 시 필요한 모든 데이터를 정확히 제거했는지 확인
3. rememberLogin 상태와 isLoggedIn 상태의 동기화 관리 필요

결론

직접적인 네비게이션 조작 대신 앱의 상태 관리를 통한 화면 전환으로 해결하니 더 안정적이고 예측 가능한 동작을 구현할 수 있었음.
AsyncStorage와 React Navigation을 함께 사용할 때는 조건부 렌더링된 네비게이터의 특성을 잘 이해하고 활용하는 것이 중요함.