React Navigation 초기 라우트 설정하기: Stack.Screen 순서의 중요성

발생한 문제

React Navigation에서 Stack.Navigator 안의 Stack.Screen 순서가 초기 라우트(첫 화면)를 결정하게 됨.

🔹 문제가 되는 코드

<Stack.Navigator>
  <Stack.Screen name="Start" ... />  // 항상 이 화면부터 시작됨
  <Stack.Screen name="Login" ... />
  <Stack.Screen name="MainTab" ... />
</Stack.Navigator>

로그인 상태임에도 불구하고 항상 Start 화면으로 이동하는 문제가 발생

해결 방법

1️⃣ 조건부 스크린 렌더링 (권장)

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

2️⃣ initialRouteName 사용

<Stack.Navigator 
  initialRouteName={isLoggedIn ? "MainTab" : "Start"}
>
  <Stack.Screen name="Start" ... />
  <Stack.Screen name="Login" ... />
  <Stack.Screen name="MainTab" ... />
</Stack.Navigator>

🔹 첫 번째 방법이 더 좋은 이유

1. 메모리 효율성

   • 필요한 스크린만 메모리에 로드
   • 불필요한 컴포넌트는 렌더링하지 않음

2. 명확한 로직

   • 로그인 상태에 따른 화면 분기가 명확
   • 코드 이해가 쉬움

3. 안전성

   • 의도하지 않은 화면 전환 방지
   • 로그인 상태 관리가 더 안전

4. 유지보수 용이

   • 로그인/비로그인 상태의 화면 구분이 명확
   • 각 상태별 화면 추가/수정이 쉬움

🔹 핵심 포인트

1. Stack.Navigator의 첫 번째 Stack.Screen이 초기 화면이 됨
2. 조건부 렌더링으로 로그인 상태에 따른 화면 분기 처리
3. 불필요한 화면은 렌더링하지 않는 것이 좋음