[G1-Sync] Manual knowledge update

2026-05-09 21:08:02 +09:00
parent f0befc887a
commit 93ec7e9056
363 changed files with 68333 additions and 64 deletions
@@ -0,0 +1,95 @@
+---
+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]]