Compose_Navigation

Compose Navigation

Android Developers Compose를 이용한 탐색 | JetPack Compose | Android Developers

Android Developers JetPack Compose Navigation

Compose Navigation을 적용하는 단계는 아래와 같다.

1. NavController 만들기
2. 탐색 그래프 설계
3. 컴포저블로 이동

NavController 만들기

NavController는 중앙 탐색 API이다.

사용자가 방문한 대상을 추적하고 사용자가 목적지 간에 이동할 수 있도록 한다.

Compose에서 NavController를 만드려면 rememberNavController() 를 호출해야 한다.

이 NavController는 컴포저블 계층 구조에서 참조해야 하는 모든 컴포저블이 이를 실행할 수 있을 만큼 충분히 높이 있어야 한다.

탐색 그래프 설계

Compose에서는 직렬화 가능한 객체 또는 클래스를 사용하여 경로를 정의한다.

루트 목적지에 도착하는 방법을 설명하고, 목적지에 도착하는 모든 정보를 담고 있으며, 목적지에 도달할 수 있다.

예시 코드

@Serializable
object Profile
@Serializable
object FriendsList

val navController = rememberNavController()

NavHost(navController = navController, startDestination = Profile) {
    composable<Profile> { ProfileScreen( /* ... */ ) }
    composable<FriendsList> { FriendsListScreen( /* ... */ ) }
    // Add more destinations similarly.
}

위 예시에서는 이동할 컴포저블 경로를 Profile FriendsList 정의했다.

또한 이를 직렬화 가능한 객체로 만들었다.

NavHost 인자에서는 기존에 만들었던 NavController를 연결하고 시작 경로를 지정했다.

HavHost 콜백에는 각 경로의 정보를 입력했다.

각 NavHost 에 전달된 람다는 궁국적으로 HavController.createGraph() 를 호출하고 NavGraph 를 반환하는 것이다.

위에 동작은 실제로 아래의 동작과 동일하다.

val navGraph by remember(navController) {
  navController.createGraph(startDestination = Profile)) {
    composable<Profile> { ProfileScreen( /* ... */ ) }
    composable<FriendsList> { FriendsListScreen( /* ... */ ) }
  }
}
NavHost(navController, navGraph)

만약 Navigate간 데이터 전달이 필요하다면?

인수 전달이 필요할 경우 아래와 같이 전달할 수 있다.

기존의 람다의 Composable은 아래와 같았다.

composable(Profile) { ProfileScreen( /* ... */ ) }

여기서 Composable의 인자에 원하는 데이터를 넣어줘야한다.

기본적으로 composable 모든 인수는 문자열로 파싱된다.

인수로 전달하고 싶은 값을 이 문자열 뒷 부분에 추가하면 된다.

즉, 만약 Id 값을 넘겨주고 싶다면 아래와 같이 사용해야 한다.

composable("Profile/{userId}") { ProfileScreen( /* ... */ ) }

이 전달 받는 Id값은 NavBackStackEntry 에서 추출해야 한다.

composable("profile/{userId}") { backStackEntry ->
    Profile(navController, backStackEntry.arguments?.getString("userId"))
}

컴포저블로 이동

컴포저블로 이동은 간단하다.

NavController.navigate<T> 만 호출하면 끝이다!

@Serializable
object FriendsList

navController.navigate(route = FriendsList)

‼️ 주의 사항

구성 가능한 함수가 새 화면으로 이동해야 하는 경우 navigate() 직접 호출하도록 NavController 참조를 직접 전달하면 안된다. 

UDF(단방향 데이터 흐름) 원칙에 따라 NavController 가 처리하는 navigate 이벤트를 노출해야 한다.

@Serializable
object FriendsList

navController.navigate(route = FriendsList, navController)

즉, 위에 처럼 navController 참조를 직접 전달하여 FriendsList 컴포저블 내에서 사용하면 안된다는 뜻이다.

composable<Profile> {
    ProfileScreen(
        onNavigateToFriends = { navController.navigate(route = FriendsList) },
        /*...*/
    )
}

위와 같이 navController.navigate 이벤트를 전달해야 한다.

좀 더 쉽게 말하면 컴포저블에서 () -> Unit 유형의 매개변수를 통해 이벤트를 전달해야 한다는 뜻이다.