Navigation3 알아보기

2018년에 나온 Navigation2의 경우 Android UI 환경이 변화하면서 새로운 접근 방식의 필요성을 인식하게 되었고 이에 새로운 라이브러리인 Navigation3가 출시 되었다.

 

Navigation 개념들을 다시한번 복습하면서 Navigation2의 한계와 Navigation3의 특징들을 살펴보자.

0. Navigation 기본 개념

Navigation은 화면 간 이동(전환)과 백스택 관리를 단순화하기 위한 Android Jetpack 라이브러리입니다.

기존 FragmentTransaction을 직접 다루던 복잡한 코드를 선언형 방식으로 바꿔줍니다.

Navigation 핵심 원칙

• 사용자가 앱과 상호작용할 때, 언제나 예측 가능하고 일관된 이동 경험을 제공하는 것이 핵심 목표입니다.
• 앱에는 항상 하나의 고정된 시작 지점이 필요하며 네비게이션의 상태는 스택으로 표현 된다.
• Deep Link는 “자연스러운 백스택”을 시뮬레이션해야 한다

=> 예시)

사용자가 런처로 앱 실행 → MyGarden → Apple Detail 까지 이동

잠시 홈으로 이동했다가,

딥링크로 Avocado Detail로 들어오면

→ 기존 백스택은 모두 삭제되고

→ MyGarden + Avocado Detail 로 새로 구성됩니다.

 

주요 구성요소

- NavController : 이동(전환)을 명령하는 컨트롤러 (navigate(), popBackStack() 등)

- NavHost : 화면 전환이 실제로 일어나는 컨테이너 (보통 NavHostFragment 또는 NavHost Composable)

- NavGraph : 앱의 전체 이동 경로(화면 트리)를 정의한 XML 또는 Kotlin 코드

- Destination : 각각의 목적지 화면 (Fragment, Composable, Activity 등)

- Safe Args : 화면 간 타입 안전한 인자 전달을 지원

1. Navigation3 출시

Nav2는 XML 기반이며 NavController가 내부적으로 백스택을 관리 하고 single destination구조로 설계되어 있었다.

이 구조는 백스택이 UI 상태와 직접적으로 연결되어 있지 않기때문에 Compose 환경의 선언형 패러다임과는 맞지 않았다.

또한 대형 화면의 다중 레이아웃 형태를 구현하기 어렵다는 한계가 있었다.

 

A화면과 B화면을 동시에 보여주는 레이아웃 형태

 

2. 핵심 원칙

You own the back stack

• 이제 개발자가 직접 백스택을 소유하고 제어합니다.
• 백스택은 단순한 SnapshotStateList<T> 로 표현됩니다.
• 즉, mutableStateListOf()로 관리하는 Compose 상태 그 자체입니다.
• navigate() 대신 리스트에 아이템을 추가/삭제하는 식으로 이동합니다.

// Nav2 방식(라이브러리 내부에서 관리)
navController.navigate("detail"), popBackStack()

// Nav3 방식(직접 선언)
val backStack = remember { mutableStateListOf<Any>(Home) }

 

Get out of your way

• 개발자가 필요한 경우 낮은 레벨로 직접 접근해 커스텀 구성이 가능합니다.
• 기본 제공 컴포넌트(NavDisplay, NavEntry, Scenes) 외에도 원하면 직접 자신의 전환 로직, 상태 관리 로직을 짤 수 있습니다.

Pick your building blocks

• 기능이 모듈형으로 분리되어 있습니다.
• 필요하면 개발자가 직접 조합해서 새로운 UI를 만들 수 있습니다.

즉, Nav3의 Navigation은 단순히 Compose State로서 내부 구조가 오픈되어 있고 필요한 기능만 조합해서 네비게이션을 구성 할 수 있다.

 

3. 핵심 기능

1. Animations

전환 애니메이션을 기본 내장하고 있고 앱 전체 혹은 특정 Route별로 독립적인 전환 효과 설정 가능합니다.

// Route별 전환 효과
NavDisplay(
    enterTransition = { fadeIn() },
    exitTransition = { fadeOut() }
)

// 화면단위로 지정
NavEntry(route = Detail) {
    AnimatedVisibility(visible = true, enter = slideInHorizontally()) {
        DetailScreen()
    }
}

 

2. Adaptive Layouts

한 화면 안에서 여러 Destination을 동시에 보여줄 수 있습니다.

Scenes {
    Scene(route = Home) { HomeScreen() }
    Scene(route = Detail) { DetailScreen() }
}

 

3. State Scoping 

Nav3는 각 Destination(화면)마다 독립적인 상태 스코프(scope) 를 가집니다.

즉, 각 화면은 자기만의 remember 상태나 ViewModel을 유지할 수 있습니다.

val viewModel = navBackStackEntry.viewModel<DetailViewModel>()

 

4.Modularity

Nav3는 모듈화(Modularization) 를 염두에 두고 설계되었습니다.

기존 Nav2의 경우모든 route와 navigate 함수를 한곳에 작성해서 관리했지만
Nav3에는 각 feature 모듈이 자신의 route / navigate 정의를 가집니다.

 

// navigation/HomeNavigation.kt
@Serializable data object Home
fun NavController.navigateToHome() { navigate(Home) }

// navigation/DetailNavigation.kt
@Serializable data class Detail(val id: String)
fun NavController.navigateToDetail(id: String) { navigate(Detail(id)) }