Tab 과 Stack

React Native에서 Navigation의 Tab과 Stack은 각각 다른 방식으로 화면 전환을 관리하는 두 가지 주요 네비게이션 패턴입니다. 이 두 가지는 사용자 경험을 향상시키기 위해 다양한 방식으로 사용됩니다.

Stack Navigation

개념:

• Stack Navigation은 화면을 카드처럼 쌓아 올리는 방식으로, 새로운 화면이 이전 화면 위에 쌓입니다.
• 사용자는 새로운 화면으로 이동하거나 이전 화면으로 돌아갈 수 있습니다.
• 일반적으로 @react-navigation/stack 패키지를 사용하여 구현합니다.

특징:

• 기본적인 화면 전환 애니메이션을 제공합니다.
• 하드웨어 백 버튼이나 헤더의 백 버튼을 통해 뒤로 이동할 수 있습니다.
• 화면 간 매개변수를 전달할 수 있습니다.

사용 예시:

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Tab Navigation

개념:

• Tab Navigation은 화면 하단에 탭을 제공하여 사용자가 앱의 다른 섹션 간에 빠르게 전환할 수 있도록 합니다.
• 주로 @react-navigation/bottom-tabs 패키지를 사용하여 구현합니다.

특징:

• 앱의 여러 주요 섹션에 대한 지속적인 네비게이션을 제공합니다.
• 탭 아이콘과 레이블을 사용자 정의할 수 있습니다.
• 상위 수준의 뷰에 빠르고 쉽게 접근할 수 있습니다.

사용 예시:

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Profile" component={ProfileScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

차이점

• 구조: Stack은 화면을 쌓아 올리는 구조로, 사용자가 이전 화면으로 돌아갈 수 있는 반면, Tab은 여러 화면을 나란히 배치하여 사용자가 탭을 통해 쉽게 전환할 수 있습니다.
• 사용 사례: Stack은 일반적으로 단계별로 진행되는 프로세스나 깊이 있는 탐색에 적합하며, Tab은 여러 주요 섹션을 빠르게 탐색할 수 있는 앱에 적합합니다.
• 애니메이션 및 전환: Stack은 화면 전환 시 애니메이션을 제공하며, Tab은 탭 간 전환 시 애니메이션을 제공합니다.

이 두 가지 네비게이션 패턴은 각각의 장점이 있으며, 앱의 요구 사항에 따라 적절히 선택하여 사용할 수 있습니다. React Navigation 공식 문서에서 더 많은 정보를 확인할 수 있습니다.