# Compose Navigation - (1) Compose Navigation 및 composable간 이동 방법에 대해서 알아보겠습니다. Navigation은 앱 내에서 컨텐츠를 탐색하고, 사용자가 앱 내에서 쉽게 이동할 수 있도록 하는 상호작용을 의미합니다. Android Jetpack의 Navigation 구성 요소에는 Navigation 라이브러리, Safe Args Gradle 플러그인 및 앱 내비게이션을 구현하기 위한 도구가 포함되어 있습니다. Navigation 구성 요소를 사용하면 간단한 버튼 클릭부터 앱 바 및 내비게이션 드로어와 같은 더 복잡한 패턴까지 다양한 내비게이션 사용 사례를 처리할 수 있습니다. 💡 Navigation 세 가지 요소 Navigation에는 세 가지 주요 요소가 있습니다. 1️⃣ Host - Host는 현재 Navigation 목적지를 포함한 UI 요소를 나타냅니다. 사용자가 앱을 탐색할 때, 앱은 기본적으로 Navigation Host의 안팎에서 목적지를 교환합니다. - Compose에서는 NavHost를 사용하며, Fragment에서는 NavHostFragment를 사용합니다. 2️⃣ Graph - Graph는 앱 내에서 모든 네비게이션 목적지와 그들 간의 연결을 정의하는 데이터 구조입니다. - NavGraph를 사용합니다. 3️⃣ Controller - Controller는 목적지 간의 네비게이션을 관리하는 중앙 조정자입니다. 이 컨트롤러는 목적지 간의 네비게이션, 딥 링크 처리, 백 스택 관리 등의 메서드를 제공합니다. - NavController를 사용합니다. 💡 Navigation Controller 만들기 Navigation Controller는 그래프를 유지하고 앱이 그래프의 목적지 간에 이동할 수 있는 방법을 노출합니다. Compose에서 Navigation Controller를 생성하는 방법은 “rememberNavController()” 를 호출하는 것입니다. ex) val navController = rememberNavController() NavController를 composable 계층에서 최상위에 위치시켜야 하며, 모든 composable 요소에서 NavController를 참조해야 합니다. 이렇게 하면 NavController를 단일 진실 공급원(Single source of truth)로서 composable을 화면 외부에서 업데이트할 수 있습니다. 이는 상태 호이스팅 원칙을 따르게 됩니다. 참고 : https://developer.android.com/guide/navigation/design 💡 NavHost 만들기 NavHost를 만드는 방법은 아래와 같습니다. ```kotlin val navController = rememberNavController() NavHost(navController = navController, startDestination = "profile") // 1 { // 2 composable("profile") { Profile( /* ... */ ) } // 3 composable("friendslist") { FriendsList( /* ... */ ) } // 4 // Add more destinations similarly. } ``` 1. NavHost composable에 NavController를 전달하고, 시작 경로에 대한 문자열을 넘겨줍니다. 2. NavHost에 람다를 전달해주며, 이는 “NavController.createGraph()“를 호출해서 “NavGraph”를 반환하는 것과 동일한 역할을 합니다. 3. “NavGraphBuilder.composable()”를 호출해서 “NavGraph”에 목적지 결과를 추가해줍니다. 4. 여기서 목적지는 “Profile”, “FriendList” composable들이며, route(경로) 문자열인 “Profile”, “friendList”는 두 곳의 목적지를 구별하는 키가 됩니다. 위에 예제에서는 “NavController.createGraph()”를 사용하지 않고 직접 람다로 경로를 설정해줬지만, “NavController.createGraph()”를 사용하면 아래와 같이 정의도 가능합니다. ```kotlin val navGraph by remember(navController) { navController.createGraph(startDestination = "profile") { composable("profile") { Profile() } composable("friendslist") { FriendsList() } } } NavHost(navController, navGraph) ``` 💡 전체 예제 ```kotlin @Composable fun Profile(onNavigateToFriendsList: () -> Unit) { // 1 Text("Profile") Button(onClick = { onNavigateToFriendsList() }) { Text("Go to Friends List") } } @Composable fun FriendsList(onNavigateToProfile: () -> Unit) { Text("Friends List") Button(onClick = { onNavigateToProfile() }) { Text("Go to Profile") } } @Composable fun MyApp() { val navController = rememberNavController() NavHost(navController, startDestination = "profile") { composable("profile") { Profile( onNavigateToFriendsList = { navController.navigate("friendslist") } ) } composable("friendslist") { FriendsList( onNavigateToProfile = { navController.navigate("profile") // 2 } ) } } } ``` 1. Navigation Controller 를 주입하지 않고 람다를 전달함으로써 어떤 상황에서 어떤 화면으로 가야 하는지 알려줍니다. 2. navController를 통해서 이동해야 하는 경로를 “navigate(경로)” 메서드를 사용하여 이동시킵니다. 다음에는 중첩 그래프, 딥링크, 인자 전달에 대해서 알아보겠습니다. <참고> https://developer.android.com/jetpack/compose/navigation
로그인 후 모든 글을 볼 수 있습니다.