리액트 네이티브 navigation 정리

# 기본 개념

react-navigation은 다양한 네비게이션 유형을 제공하며, 각각의 네비게이션 방식에 따라 화면 간의 이동을 처리할 수 있다. 주요 네비게이션 타입은 스택 네비게이션, 탭 네비게이션, 드로어 네비게이션이 있다. 강력하고 유연한 네비게이션 시스템을 제공하여 복잡한 네비게이션 구조를 쉽게 구성할 수 있도록 도와준다.

# 설치

아래 명령어로 react-navigation과 관련 패키지를 설치할 수 있다.

npm install @react-navigation/native @react-navigation/stack @react-navigation/bottom-tabs @react-navigation/drawer
npm install react-native-screens react-native-safe-area-context

 

# 네비게이터 설정

네비게이터는 네비게이션의 구조를 정의하는 컴포넌트이다.

1. 스택 네비게이션

스택 네비게이션은 화면이 스택 형태로 쌓이는 가장 기본적인 네비게이션 방식이다.

const Stack = createStackNavigator();

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

export default App;

2. 탭 네비게이션

탭 네비게이션은 하단에 탭 바를 생성하여 각 탭에 해당하는 화면을 전환하는 방식이다.

const Tab = createBottomTabNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

export default App;

3. 드로어 네비게이션

드로어 네비게이션은 화면의 좌측 또는 우측에서 슬라이딩하여 드로어 메뉴를 여는 방식이다.

const Drawer = createDrawerNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Drawer.Navigator>
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Settings" component={SettingsScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
};

export default App;

# 화면 전환

react-navigation은 다양한 화면 전환 애니메이션과 옵션을 제공한다. 화면 전환 시 애니메이션이나 전환 효과를 설정할 수 있다.

<Stack.Navigator
  screenOptions={{
    headerStyle: { backgroundColor: '#f4511e' },
    headerTintColor: '#fff',
    headerTitleStyle: { fontWeight: 'bold' },
  }}
>
  <Stack.Screen
    name="Home"
    component={HomeScreen}
    options={{ title: '홈' }}
  />
  <Stack.Screen
    name="Details"
    component={DetailsScreen}
    options={{ title: '상세' }}
  />
</Stack.Navigator>

# 네비게이션 파라미터

네비게이션 간에 데이터를 전달할 때는 navigation 객체의 navigate 메서드를 사용하여 파라미터를 전달할 수 있다.

// HomeScreen.js
navigation.navigate('Details', { itemId: 86 });

// DetailsScreen.js
const { itemId } = route.params;

# 탭과 드로어의 조합

탭 네비게이션과 드로어 네비게이션을 함께 사용할 수 있다. 이 경우, 드로어 네비게이터를 탭 네비게이터의 외부에 배치한다.

const Tab = createBottomTabNavigator();
const Drawer = createDrawerNavigator();

const TabNavigator = () => (
  <Tab.Navigator>
    <Tab.Screen name="Home" component={HomeScreen} />
    <Tab.Screen name="Settings" component={SettingsScreen} />
  </Tab.Navigator>
);

const App = () => (
  <NavigationContainer>
    <Drawer.Navigator>
      <Drawer.Screen name="Main" component={TabNavigator} />
      <Drawer.Screen name="Profile" component={ProfileScreen} />
    </Drawer.Navigator>
  </NavigationContainer>
);

export default App;

# 성능 최적화

• React Navigation Devtools: 개발 중에 네비게이션 상태와 동작을 실시간으로 확인할 수 있는 도구를 제공한다.
• Lazy Loading: 화면을 필요할 때만 로드하여 성능을 향상시킬 수 있다.