2nd/10_Wiki/Topics/Coding/RN_Navigation_v6_Patterns.md

id, title, category, status, source_trust_level, verification_status, created_at, updated_at, tags, tech_stack, applied_in, aliases

id	title	category	status	source_trust_level	verification_status	created_at	updated_at	tags	tech_stack	applied_in	aliases
rn-navigation-v6-patterns	React Navigation v6 — Stack / Tab / Deep Link	Coding	draft	B	conceptual	2026-05-09	2026-05-09	react-native navigation vibe-coding	language applicable_to TypeScript / React Navigation 6 React Native		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 매핑.

💻 코드 패턴

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

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