---
id: pattern-navigation
title: "Navigation Pattern"
category: "Pattern_Mobile"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["navigation", "내비게이션 패턴", "routing", "deep link", "navigation stack"]
duplicate_of: ""
source_trust_level: "A"
confidence_score: 0.83
created_at: 2026-06-13
updated_at: 2026-06-13
review_reason: ""
merge_history: []
tags: ["pattern", "mobile", "navigation", "routing", "platform-independent"]
raw_sources: ["일반 모바일/프런트엔드 공학 지식"]
applied_in: []
github_commit: ""
---

# [[Navigation Pattern]]

## 🎯 한 줄 통찰 (One-line insight)
내비게이션은 "화면 간 이동과 스택/상태를 관리" 하는 패턴으로, *경로를 선언적·직렬화 가능*하게 두고 딥링크/뒤로가기/상태 복원을 1급으로 다뤄야 한다.

## 🧠 핵심 개념 (Core concepts)
1. **선언적 라우트:** URL/route 로 화면을 표현(직렬화 가능).
2. **스택/탭/드로어:** 내비 구조 유형.
3. **딥링크:** 외부에서 특정 화면 직접 진입.
4. **파라미터 전달:** 라우트 인자 + 타입 안전.
5. **상태 복원:** 프로세스 죽어도 내비 상태 복구.

## 📖 세부 내용 (Details · 패턴 명세)
- **Problem (언제 쓰나):** 다화면 앱의 이동/히스토리/딥링크 관리.
- **사용 조건:** 라우트 정의; 화면 식별자; 인자 직렬화.
- **장점:** 일관된 이동, 딥링크, 뒤로가기, 테스트성.
- **단점:** 설정 복잡, 깊은 스택 메모리, 타입 안전 관리.
- **대안:** 단일 화면(소규모), 조건부 렌더(상태 기반), 코디네이터 패턴.
- **실패 사례:** 객체를 라우트 인자로 직접(직렬화 불가/딥링크 깨짐); 스택 누수(화면 안 떼어냄); 뒤로가기 상태 불일치; 딥링크 시 부모 스택 없어 길 잃음.

## 💻 코드 패턴 (Code patterns)
```text
routes = { '/home': Home, '/item/:id': ItemDetail }   # 선언적 + 직렬화 가능 인자
navigate('/item/42')           # id 만 전달(객체 X)
deepLink('myapp://item/42') -> rebuild stack [Home, ItemDetail]
restore(savedNavState)         # 프로세스 복원
```

## ⚖️ 모순 및 업데이트 (Contradictions & updates)
"상태로 화면 전환" vs "라우터" — 작은 앱은 상태 조건부가 단순하나, 딥링크/히스토리가 필요하면 선언적 라우터가 필수.

## 🛠️ 적용 사례 (Applied in summary)
일반 모바일/SPA. (ConnectAI 는 패널 기반이라 직접 사례 없음 — 화면 식별/복원 원리는 동일.)

## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[패턴 카탈로그 인덱스]]
- **관련 개념:** [[State Management Pattern]], [[React State Pattern]], [[모바일 개발 가이드]]
- **참조 맥락:** 작은 모델이 다화면 앱의 이동을 설계할 때 참조.

## 📚 출처 (Sources)
- [S1] 일반 내비게이션/라우팅 지식

## 📝 변경 이력 (Change history)
- 2026-06-13: 프로젝트 독립 패턴 카드 작성.