Navigation의 세 가지 주요 부분은

NavController

NavGraph

NavHost

가 있다.

NavController

NavController는 Navigation을 사용할 떄 중심이 되는 구성요소이다. Stateful이며 백 스택 컴포저블 항목을 추적하고, 스택을 앞으로 이동하고, 백 스택 조작을 사용 설정하고, 대상 상태 간에 이동한다.

컴포저블에서 rememberNavController() 메서드를 이용하여 NavController를 만들 수 있다.

val navController = rememberNavController()

NavHost

Navigation Graph에 정의된 화면들을 보여주는 컨테이너 역할을 한다. 대상 구성요소에는 프래그먼트 대상을 표시하는 기본 NavHost 구현인 NavHostFragement가 포함된다.

• NavController는 항상 단일 NavHost 컴포저블에 연결된다. NavHost는 컨테이너 역할을 하며 그래프의 현재 대상을 표시하는 일을 담당 하는 역할을 한다. 여러 컴포저블 간에 이동하는 과정에서 NavHost의 컨텐츠가 자동으로 Recomposition(재구성)이 된다. 그리고 NavController를 이동 가능한 컴포저블 대상을 매핑하는 탐색 그래프(NavGraph)에 연결한다.

NavHost(navController = navController, startDestination = "profile") {
    composable(route = "profile") { Profile(/*...*/) }
    composable(route = "friendslist") { FriendsList(/*...*/) }
    /*...*/
}

• navigation 이동은 기존의 jetpack navigation과 동일하게 navController.navigate를 이용하여 이동한다. 기존에 이동할때에는 해당 action에 해당하는 id를 넣어주는 대신 compose에서는 destination을 정해준다.

@Composable
fun Profile(navController: NavController) {
    /*...*/
    Button(onClick = { navController.navigate("friendslist") }) {
        Text(text = "Navigate next")
    }
    /*...*/
}

• 기존 navigation에서 이동할때 argument 값을 넘겨줄 수 있다.

NavHost(startDestination = "profile/{userId}") {
    ...
    composable(
        "profile/{userId}",
        arguments = listOf(navArgument("userId") { type = NavType.StringType })
    ) {...}
}

NavGraph 분할