안드로이드 Navigation Compose는 Jetpack Compose 환경에서 화면 전환(네비게이션)을 선언적으로 구성할 수 있게 해주는 Jetpack 라이브러리입니다. 기존 View 기반의 NavController + NavHostFragment 패턴을 Compose에 맞게 확장한 형태라고 보면 이해가 쉽습니다.
---
## 1) 왜 Navigation Compose를 쓰나요? - Compose와 자연스럽게 결합: 화면을 @Composable로 만들고, 목적지(destination)도 Composable로 등록합니다. - 단일 Activity + 여러 화면 구조에 적합: 화면 전환과 back stack을 표준 방식으로 관리합니다. - 상태 기반 UI와 궁합: “어떤 화면을 보여줄지”를 네비게이션 상태로 관리할 수 있습니다. - 딥링크/백스택/인자 전달 등 앱에서 자주 쓰는 패턴을 기본 제공
---
## 2) 기본 구성요소(핵심 개념) - NavController: 화면 이동을 실행하고 back stack을 관리하는 컨트롤러 - Compose에서는 rememberNavController()로 생성 - NavHost: 네비게이션 그래프를 담는 컨테이너(어떤 route들이 있는지 정의) - composable(route): 각 화면 목적지를 등록하는 DSL - route / arguments: 목적지 식별자 및 전달값
---
## 3) 가장 기본 예시 kotlin<BR/>@Composable<BR/>fun AppNav() {<BR/> val navController = rememberNavController()<BR/><BR/> NavHost(<BR/> navController = navController,<BR/> startDestination = home<BR/> ) {<BR/> composable(home) {<BR/> HomeScreen(<BR/> onGoDetail = { id -> navController.navigate(detail/$id) }<BR/> )<BR/> }<BR/><BR/> composable(detail/{id}) { backStackEntry -><BR/> val id = backStackEntry.arguments?.getString(id) ?: <BR/> DetailScreen(<BR/> id = id,<BR/> onBack = { navController.popBackStack() }<BR/> )<BR/> }<BR/> }<BR/>}<BR/>
---
## 4) 인자(arguments) 전달 방식 (권장 형태) 문자열로 직접 파싱하는 것보다, navArgument로 타입을 명시하는 방식이 안전합니다.
kotlin<BR/>composable(<BR/> route = detail/{id},<BR/> arguments = listOf(navArgument(id) { type = NavType.IntType })<BR/>) { entry -><BR/> val id = entry.arguments?.getInt(id) ?: 0<BR/> DetailScreen(id = id)<BR/>}<BR/>
---
## 5) Compose에서 자주 쓰는 네비게이션 패턴 ### (1) 뒤로 가기 - navController.popBackStack() - 또는 특정 화면까지 pop: popBackStack(route, inclusive = false)
### (2) 중복 이동 방지 / 단일 탑(singleTop) 예: 같은 화면을 반복해서 쌓지 않게 kotlin<BR/>navController.navigate(home) {<BR/> launchSingleTop = true<BR/>}<BR/>
### (3) 탭(바텀 네비게이션) + 백스택 관리 BottomBar 탭 구조는 각 탭별 back stack/상태 복원이 관건인데, Navigation Compose는 popUpTo, saveState, restoreState 조합을 자주 사용합니다.
---
## 6) 어떤 때 주의해야 하나요? - route를 문자열로 관리하면 오타/리팩토링에 취약 → sealed class/객체로 route 상수화 권장 - 화면 간 데이터 전달은 단순 ID 정도만 넘기고, 상세 데이터는 ViewModel/Repository에서 로드하는 방식이 보통 더 안정적 - 큰 앱에서는 중첩 그래프(nested navigation graph), 딥링크, 멀티 모듈 구성 등을 함께 고려해야 합니다.
---
원하시면: 1) BottomNavigation + 여러 스택 유지 예제, 2) 중첩 그래프/인증 플로우(로그인 전/후) 구성, 3) Navigation + Hilt ViewModel 스코프 같은 실전 패턴으로 더 구체적인 샘플도 정리해 드릴게요.
안드로이드 Navigation Compose는 Jetpack Compose 환경에서 화면 전환(네비게이션)을 선언적으로 구성할 수 있게 해주는 Jetpack 라이브러리입니다. 기존 View 기반의
NavController + NavHostFragment패턴을 Compose에 맞게 확장한 형태라고 보면 이해가 쉽습니다.---
## 1) 왜 Navigation Compose를 쓰나요?
- Compose와 자연스럽게 결합: 화면을
@Composable로 만들고, 목적지(destination)도 Composable로 등록합니다.- 단일 Activity + 여러 화면 구조에 적합: 화면 전환과 back stack을 표준 방식으로 관리합니다.
- 상태 기반 UI와 궁합: “어떤 화면을 보여줄지”를 네비게이션 상태로 관리할 수 있습니다.
- 딥링크/백스택/인자 전달 등 앱에서 자주 쓰는 패턴을 기본 제공
---
## 2) 기본 구성요소(핵심 개념)
- NavController: 화면 이동을 실행하고 back stack을 관리하는 컨트롤러
- Compose에서는
rememberNavController()로 생성- NavHost: 네비게이션 그래프를 담는 컨테이너(어떤 route들이 있는지 정의)
- composable(route): 각 화면 목적지를 등록하는 DSL
- route / arguments: 목적지 식별자 및 전달값
---
## 3) 가장 기본 예시
kotlin<BR/>@Composable<BR/>fun AppNav() {<BR/> val navController = rememberNavController()<BR/><BR/> NavHost(<BR/> navController = navController,<BR/> startDestination = home<BR/> ) {<BR/> composable(home) {<BR/> HomeScreen(<BR/> onGoDetail = { id -> navController.navigate(detail/$id) }<BR/> )<BR/> }<BR/><BR/> composable(detail/{id}) { backStackEntry -><BR/> val id = backStackEntry.arguments?.getString(id) ?: <BR/> DetailScreen(<BR/> id = id,<BR/> onBack = { navController.popBackStack() }<BR/> )<BR/> }<BR/> }<BR/>}<BR/>---
## 4) 인자(arguments) 전달 방식 (권장 형태)
문자열로 직접 파싱하는 것보다,
navArgument로 타입을 명시하는 방식이 안전합니다.kotlin<BR/>composable(<BR/> route = detail/{id},<BR/> arguments = listOf(navArgument(id) { type = NavType.IntType })<BR/>) { entry -><BR/> val id = entry.arguments?.getInt(id) ?: 0<BR/> DetailScreen(id = id)<BR/>}<BR/>---
## 5) Compose에서 자주 쓰는 네비게이션 패턴
### (1) 뒤로 가기
-
navController.popBackStack()- 또는 특정 화면까지 pop:
popBackStack(route, inclusive = false)### (2) 중복 이동 방지 / 단일 탑(singleTop)
예: 같은 화면을 반복해서 쌓지 않게
kotlin<BR/>navController.navigate(home) {<BR/> launchSingleTop = true<BR/>}<BR/>### (3) 탭(바텀 네비게이션) + 백스택 관리
BottomBar 탭 구조는 각 탭별 back stack/상태 복원이 관건인데, Navigation Compose는
popUpTo,saveState,restoreState조합을 자주 사용합니다.---
## 6) 어떤 때 주의해야 하나요?
- route를 문자열로 관리하면 오타/리팩토링에 취약 → sealed class/객체로 route 상수화 권장
- 화면 간 데이터 전달은 단순 ID 정도만 넘기고, 상세 데이터는 ViewModel/Repository에서 로드하는 방식이 보통 더 안정적
- 큰 앱에서는 중첩 그래프(nested navigation graph), 딥링크, 멀티 모듈 구성 등을 함께 고려해야 합니다.
---
원하시면:
1) BottomNavigation + 여러 스택 유지 예제,
2) 중첩 그래프/인증 플로우(로그인 전/후) 구성,
3) Navigation + Hilt ViewModel 스코프
같은 실전 패턴으로 더 구체적인 샘플도 정리해 드릴게요.
command: !ask is powered by witness @justyy and his contributions are: https://steemyy.com
More commands are coming!.
!ask currently supports:
default=ChatGPT: prefix question with chatgpt, qwen, llama, deepseek, or grok if you like, e.g. !ask deepseek Your Question