[RN] Stack Navigator

Stack.Navigator
      initialRouteName="SplashScreen"
      screenOptions={{ headerShown: false }}
    >
      <Stack.Screen name="SplashScreen" component={SplashScreen} />
      <Stack.Screen name="HomeScreen" component={HomeScreen} />
      <Stack.Screen name="ChatScreen" component={ChatScreen} />
      <Stack.Screen name="HomeChatScreen" component={HomeChatScreen} />
      <Stack.Screen name="ChatsScreen" component={ChatsScreen} />
      <Stack.Screen name="ExploreScreen" component={ExploreScreen} />
      <Stack.Screen name="StoreScreen" component={StoreScreen} />
      <Stack.Screen name="SettingScreen" component={SettingScreen} />
    </Stack.Navigator>

1. initialRouteName를 지정하여 초기 화면 설정 가능
2. initialRouteName를 설정하지 않으면 맨 위의 스크린이 보여짐
3. 그 뒤의 순서는 중요하지 않음
4. 초기 화면 다음 순서는 navigation.replace("HomeScreen")로 스택에 쌓인 것들을 바꿔줌

NAVIGATE vs PUSH vs REPLACE

1. navigation.navigate
   기능: 지정된 화면으로 이동합니다. 만약 네비게이션 스택에 이미 해당 화면이 존재한다면, navigate 메서드는 해당 화면으로 돌아가며(앞으로 이동하지 않고), 그 화면까지의 모든 중간 화면을 건너뜁니다. 화면이 스택에 없는 경우 새로운 화면을 스택에 추가합니다.
   사용 사례: 사용자가 앱 내에서 다양한 화면 사이를 자유롭게 이동할 수 있게 하고 싶을 때 사용합니다. 예를 들어, 사용자가 상세 정보 화면으로 돌아가고 싶을 때, 이미 스택에 있다면 다시 그 화면으로 이동할 수 있습니다.
   
   
2. navigation.push
   기능: 지정된 화면을 현재 네비게이션 스택의 맨 위에 추가합니다. push 메서드는 이미 스택에 있는 화면이라도 새로운 인스턴스를 스택에 추가하여 화면을 중복하여 쌓을 수 있습니다.
   사용 사례: 같은 화면을 파라미터만 다르게 여러 번 열고 싶을 때 유용합니다. 예를 들어, 사용자가 리스트에서 항목을 선택하여 자세히 보는 화면이 있고, 그 화면에서 다른 항목의 상세 정보로 또 이동해야 하는 경우에 push를 사용할 수 있습니다.
   
   
3. navigation.replace
   기능: 현재 화면을 네비게이션 스택에서 새로운 화면으로 교체합니다. 이전 화면은 스택에서 제거되고, 새로운 화면이 그 자리를 차지합니다. 이 방식은 스택의 길이를 변경하지 않으면서 화면을 전환합니다.
   사용 사례: 로그인 화면에서 홈 화면으로 이동하는 경우, 사용자가 뒤로 가기 버튼을 눌렀을 때 로그인 화면으로 돌아가는 것을 방지하고 싶을 때 replace 메서드를 사용합니다. 이는 사용자가 로그인 프로세스를 완료한 후에는 로그인 화면으로 돌아갈 필요가 없을 때 유용합니다.