---
id: rn-navigation-v6-patterns
title: React Navigation v6 — Stack / Tab / Deep Link
category: Coding
status: draft
source_trust_level: B
verification_status: conceptual
created_at: 2026-05-09
updated_at: 2026-05-09
tags: [react-native, navigation, vibe-coding]
tech_stack: { language: "TypeScript / React Navigation 6", applicable_to: ["React Native"] }
applied_in: []
aliases: [Stack.Navigator, Tab.Navigator, linking, screen options]
---

# React Navigation v6

> RN 의 표준 라우팅. **Stack / Tab / Drawer** 조합 + **typed routes** + **deep link config** 가 핵심. screen options 는 함수형으로 동적.

## 📖 핵심 개념
- Stack: push/pop. 화면 ↔ 화면 전환.
- Tab: 하단 탭. 각 탭이 자체 stack.
- Drawer: 사이드.
- Linking config: URL → screen 매핑.

## 💻 코드 패턴

```tsx
type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string };
};

const Stack = createNativeStackNavigator<RootStackParamList>();

const linking = {
  prefixes: ['myapp://', 'https://example.com'],
  config: {
    screens: {
      Home: 'home',
      Profile: 'users/:userId',
    },
  },
};

export default function App() {
  return (
    <NavigationContainer linking={linking}>
      <Stack.Navigator screenOptions={{ headerShown: true }}>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen}
          options={({ route }) => ({ title: `User ${route.params.userId}` })} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

// 사용
const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
navigation.navigate('Profile', { userId: '1' });
```

### Tab + nested Stack
```tsx
const Tab = createBottomTabNavigator<RootTabParamList>();

<Tab.Navigator>
  <Tab.Screen name="HomeTab" component={HomeStack} />
  <Tab.Screen name="ProfileTab" component={ProfileStack} />
</Tab.Navigator>
```

각 탭이 자체 stack — back 버튼이 탭 안에서만 동작.

## 🤔 의사결정 기준
| 상황 | 도구 |
|---|---|
| Modern RN | React Navigation 6 / Expo Router |
| File-system routing 선호 | Expo Router |
| Native feel (iOS large title 등) | Native Stack (`@react-navigation/native-stack`) |
| Custom transition | createStackNavigator (JS-driven) |

## ❌ 안티패턴
- **typed param 없이**: 잘못된 인자 컴파일러 통과.
- **navigate vs push 혼동**: `navigate` 가 같은 화면이면 안 push. push 명시.
- **deep link config 안 함**: 외부 URL → 앱 진입 깨짐.
- **route.params 직접 mutate**: serialize 가능해야. plain object.
- **AppState 변화에 navigation 무관심**: background 복귀 시 stale state.

## 🤖 LLM 활용 힌트
- typed RootStackParamList + Native Stack + linking config 3종.

## 🔗 관련 문서
- [[React_Native_Bridge_Performance]]
- [[Android_Navigation_Compose]]