[Android] Compose Navigation

📚 Navigation

Jetpack Compose에서 지원하며 Navigation 구성요소의 인프라와 기능을 활용하여 컴포저블 간에 이동하기 위해 사용합니다. (화면전환)

✏️ Navigation 구성요소의 부분

Navigation 구성요소에는 다음과 같은 세 가지 주요 부분이 있습니다.

• NavController: 대상(즉, 앱의 화면) 간 이동을 담당합니다.
• NavGraph: 이동할 컴포저블 대상을 매핑합니다.
• NavHost: NavGraph의 현재 대상을 표시하는 컨테이너 역할을 하는 컴포저블입니다.

✏️ 앱에서 대상 경로 정의

앱에서 다른 화면으로 이동하기 위해 사용하는 방식은 문자열로 route를 지정하는 것입니다. 우리가 URL을 쳐서 다른 웹페이지로 이동하는 것과 비슷합니다. 앱의 화면 수는 한정되어 있으므로 경로도 한정됩니다. 따라서 enum 클래스를 사용하여 앱의 경로를 정의할 수 있습니다.

✏️ Navigation 사용법

1. Gradle에 navigation implementation

implementation "androidx.navigation:navigation-compose:2.5.3"

2. 앱에 NavHost 추가
   NavHost는 지정된 경로를 기반으로 다른 컴포저블 대상을 표시하는 컴포저블입니다.
   중요한 매개변수로는 두 가지가 있습니다.

• navController: NavHostController 클래스의 인스턴스입니다. navigate() 메서드를 호출하여 다른 대상으로 이동하는 등의 방식으로 화면 간에 이동하는 데 이 객체를 사용할 수 있습니다. 구성 가능한 함수에서 rememberNavController()를 호출하여 NavHostController를 가져올 수 있습니다.

 val navController = rememberNavController()

• startDestination: 앱에서 NavHost를 처음 표시할 때 기본적으로 표시되는 대상을 정의하는 문자열 경로입니다. Cupcake 앱의 경우에는 Start 경로입니다.

NavHost 선언

NavHost(navController = navController,
   startDestination = CupcakeScreen.Start.name,
   modifier = modifier.padding(innerPadding)){
   
   }

NavHost의 콘텐츠 함수 내에서 composable() 함수를 호출합니다. composable() 함수에는 필수 매개변수가 두 개 있습니다.

• route: 경로 이름에 해당하는 문자열입니다. 모든 고유 문자열을 사용할 수 있습니다. CupcakeScreen enum의 상수 이름 속성을 사용합니다.
• content: 여기에서 특정 경로에 표시할 컴포저블을 호출할 수 있습니다.

NavHost(
   navController = navController,
   startDestination = CupcakeScreen.Start.name,
   modifier = modifier.padding(innerPadding)
) {
    composable(route = CupcakeScreen.Start.name) {

    }
}

다른 경로로 이동하려면 NavHostController 인스턴스에서 navigate() 메서드를 호출하면 됩니다.

navController.navigate(CupcakeScreen.Start.name)

✏️ BackStack

❗️ 하단의 startDestination부터 최상단 화면까지의 화면 기록을 백 스택이라고 합니다.

popBackStack() 메서드에는 두 가지 필수 매개변수가 있습니다.

• route: 다시 돌아갈 대상의 경로를 나타내는 문자열입니다.
• inclusive: 불리언 값으로, true이면 지정된 경로를 삭제합니다. false인 경우 popBackStack()은 시작 대상 위의 모든 대상을 삭제하여(시작 대상은 제외) 시작 대상을 사용자에게 표시되는 최상단 화면으로 둡니다.

 navController.popBackStack(CupcakeScreen.Start.name, inclusive = false)