Tabs.Navigator와 Tabs.Screen 차이

1. Tabs.Navigator와 Tabs.Screen

Tabs.Navigator는 "탭 네비게이션"을 제공합니다.

 

앱 하단에 **탭바(Tab Bar)**가 생성되며, 사용자는 탭을 눌러 화면을 전환할 수 있습니다.

 

일반적으로 홈 화면, 탐색 화면 등 주로 병렬적인 화면 전환에 사용합니다.

 

Tabs.Screen:

탭 네비게이션 내부의 각각의 화면(Screen)을 정의합니다.

 

각 탭은 독립적으로 관리되며, 기본적으로 header(헤더)는 포함되지 않습니다.

 

Tabs 사용 예시

 

탭을 통한 간단한 화면 전환:

 

 

 

<Tabs.Navigator>

  <Tabs.Screen name="Home" component={HomeScreen} />

  <Tabs.Screen name="Explore" component={ExploreScreen} />

</Tabs.Navigator>

 

---

2. Stack.Navigator와 Stack.Screen

Stack.Navigator는 "스택 네비게이션"을 제공합니다.

 

화면이 겹겹이 쌓이는 구조(Stack)를 사용하며, 뒤로 가기(Back) 기능이 기본적으로 지원됩니다.

 

페이지 이동 시 새로운 화면이 위에 추가되므로, 이전 화면은 자동으로 숨겨집니다.

 

일반적으로 모달, 세부 화면, 상세 보기 화면 등 계층적인 구조에서 사용합니다.

 

Stack.Screen:

 

스택 네비게이션 내부의 각각의 화면(Screen)을 정의합니다.

 

각 화면은 위로 쌓이며, header가 기본으로 포함됩니다.

 

Stack 사용 예시

 

모달 또는 세부 화면을 추가:

 

 

<Stack.Navigator>

  <Stack.Screen name="Home" component={HomeScreen} />

  <Stack.Screen name="Details" component={DetailsScreen} />

</Stack.Navigator>

 

왜 Stack.Screen을 사용하는가?

모달 화면을 구현하려면 Stack.Navigator가 필요합니다.

 

Tabs.Navigator는 모달 방식의 화면을 지원하지 않기 때문에, 장소 추천 화면(PlaceModal)처럼

 

화면 위에 다른 화면을 띄우는 경우에는 Stack.Navigator를 사용해야 합니다.

 

presentation: 'modal'을 사용하면 iOS와 Android에서 자연스러운 모달 애니메이션이 제공됩니다.

 

 

<Stack.Navigator>

  <Stack.Screen name="Tabs" component={TabsNavigator} />

  <Stack.Screen

    name="PlaceModal"

    component={PlaceModalScreen}

    options={{

      presentation: 'modal', // 모달 애니메이션 제공

      headerShown: false,    // 헤더 숨김

    }}

  />

</Stack.Navigator>

 

---

 

만약 모두 Tabs.Screen으로 처리하면 어떻게 되나?

 

모달이 아닌 탭 화면으로 추가됩니다.

 

즉, 장소 추천 화면도 탭에 추가되어 하단 탭바에서 접근해야 합니다.

 

하지만 장소 추천 모달처럼 특정 상황에서만 표시해야 하는 화면에는 적합하지 않습니다.

 

예를 들어:

 

<Tabs.Screen name="PlaceModal" component={PlaceModalScreen} />

 

위처럼 구성하면, PlaceModal이 항상 탭바에 노출됩니다.

 

하지만 모달로 사용하려면 적합하지 않은 구조가 됩니다.

 

---

결론

Tabs.Screen은 주요 탭 화면(Home, Explore 등)을 정의하는 데 적합합니다.

 

Stack.Screen은 계층적 화면 전환(세부 화면, 모달 등)에 적합합니다.

 

따라서 장소 추천 모달(PlaceModal)처럼 특정 상황에서만 나타나야 하는 화면은 Stack.Navigator를 사용하는 것이 더 적합합니다! 😊

 

추가로 궁금한 점이 있다면 언제든 질문해주세요! 🚀