Expo Router & Deep Link, Navigation Pattern 정리

---

라우팅이란

모바일 앱에서 라우팅은 사용자가 어떤 화면으로 이동할지 결정하는 흐름 관리입니다.

React Native에서는 보통 Navigation 라이브러리를 통해 화면 이동을 구현합니다.

---

기존 방식의 문제

기존 방식은 코드 기반 라우팅입니다. 화면 구조(Stack, Tab 등)를 직접 정의해야 합니다.

유연하다는 장점이 있지만, 규모가 커질수록 복잡도가 올라갑니다. 화면이 늘어날수록 라우팅 코드도 같이 늘어나고, 유지보수 비용이 점점 커집니다.

---

Expo Router

Expo Router는 위 문제를 해결하기 위해 나온 방식입니다. 핵심은 파일 기반 라우팅입니다.

파일 구조 자체가 곧 라우팅이 됩니다.

app/
 ├── index.tsx
 └── profile/
      └── [id].tsx

자동으로 이렇게 매핑됩니다.

• / → index.tsx

• /profile/1 → profile/[id].tsx

라우팅 코드를 따로 작성할 필요가 없습니다. 파일을 만들면 페이지가 생깁니다.

내부적으로는 기존 Navigation 기반으로 동작하기 때문에 기존 생태계와 충돌이 없습니다.

---

Deep Link

라우팅은 앱 내부 이동만 의미하지 않습니다. 외부에서 앱 내부 특정 화면으로 바로 진입하는 것도 포함됩니다. 이걸 Deep Link라고 합니다.

myapp://profile/1

이 URL 하나로 앱 실행과 특정 화면 진입이 동시에 됩니다.

종류

Custom Scheme (myapp://) 앱이 설치되어 있어야만 동작합니다. 없으면 아무 일도 일어나지 않습니다.

Universal Link (https://example.com) 앱이 있으면 앱을 실행하고, 없으면 웹으로 이동합니다. 사용자 경험 측면에서 더 자연스럽습니다.

Expo Router와의 조합

파일 기반 라우팅 덕분에 Deep Link 연결이 자연스럽습니다.

app/profile/[id].tsx

파일 하나만 만들어두면 아래 Deep Link가 추가 설정 없이 자동으로 연결됩니다.

myapp://profile/1

코드 기반에서는 Deep Link를 별도로 설정해야 했습니다. 파일 기반에서는 구조가 곧 매핑이기 때문에 따로 작업할 게 없습니다.

---

Navigation Pattern

화면 이동 구조는 UX에 직접적인 영향을 줍니다. 크게 세 가지 패턴이 있습니다.

Stack Navigation

화면을 위로 쌓아가는 구조입니다.

• 계층 구조, 뒤로가기 가능, 이전 상태 유지

• 단계적인 흐름이 명확할 때 사용합니다.

로그인 → 홈 → 목록 → 상세

Tab Navigation

동일 레벨 화면을 탭으로 구성하는 방식입니다.

• 병렬 구조, 빠른 화면 전환

• 핵심 기능이 여러 개일 때 사용합니다.

홈 / 검색 / 프로필

Drawer Navigation

슬라이드로 열리는 숨김 메뉴 구조입니다.

• 많은 메뉴를 수용할 수 있습니다.

• 기능이 많거나 관리 메뉴가 필요할 때 사용합니다.

비교

구분	Stack	Tab	Drawer
구조	계층	병렬	숨김
이동	순차	즉시 전환	메뉴 선택
관계	부모-자식	동일 레벨	선택적 접근
목적	흐름 관리	빠른 접근	메뉴 정리

Trade-off

Stack

• 자연스러운 흐름

• depth가 깊어지면 탐색 부담 증가

Tab

• 빠른 접근, 직관적

• 탭 개수 제한 → 확장성 낮음. 탭이 5개를 넘어가면 UX가 무너지기 시작합니다.

Drawer

• 많은 기능 수용 가능

• 숨겨져 있어서 사용률이 낮습니다. 자주 쓰는 기능을 Drawer 안에 넣으면 안 됩니다.

---

정리

• 라우팅 = 화면 이동 흐름 관리

• 기존 방식 = 코드 기반, 규모가 커질수록 복잡도 증가

• Expo Router = 파일 기반, 파일 구조 = 라우팅 구조

• Deep Link = 외부 → 앱 내부 특정 화면으로 바로 진입

• Navigation Pattern = Stack / Tab / Drawer, 서비스 성격에 맞게 조합해서 사용

Expo Router와 Deep Link를 함께 쓰면 구조와 확장성을 동시에 챙길 수 있습니다. Navigation Pattern은 어떤 게 좋다기보다, 서비스 성격에 맞게 조합하는 게 핵심입니다.