🔥TIL🔥Jetpack Compose | Navigation

Navigation 공식 문서

📖 Navigation with Compose

1. Add dependency

dependencies {
    val nav_version = "2.7.7"

    implementation("androidx.navigation:navigation-compose:$nav_version")
}

2. Create a navigation controller

val navController = rememberNavController()

3. Design your navigation graph

NavHost(navController = navController, startDestination = "profile") {
    composable("profile") { Profile( /* ... */ ) }
    composable("friendslist") { FriendsList( /* ... */ ) }
    // Add more destinations similarly.
}

4. Navigate to a destination

Navigate to a composable

탐색 그래프에서 컴포저블로 이동하려면 NavController.navigate(route)를 사용해야 한다.
이 오버로드를 통해 navigate()는 단일 String 인수를 사용한다.
이는 route이며 대상의 키 역할을 한다.

navController.navigate("friendslist")

---

📝 주요 구성 요소

1. NavHost

• 네비게이션 그래프를 호스트
• NavController와 startDestination을 설정
• composable 함수들을 사용하여 각 화면을 네비게이션 그래프에 추가

네비게이션 그래프 : NavHost와 Composable 함수를 사용하여 각 화면과 경로를 정의하는 방식

NavHost(navController = navController, startDestination = "home") {  // NavHost
    composable("home") {  // NavGraph 정의
        HomeScreen(onNavigateToDetails = { navController.navigate("details") })
    }
    composable("details") {
        DetailScreen(onNavigateToHome = { navController.navigate("home") })
    }
}

2. NavGraph

• 네비게이션 경로와 화면의 정의를 포함하는 그래프
• NavHost 내부에서 정의되며 각 composable 함수로 화면과 경로를 매핑

composable("home") {  // NavGraph의 일부
    HomeScreen(onNavigateToDetails = { navController.navigate("details") })
}
composable("details") {  // NavGraph의 일부
    DetailScreen(onNavigateToHome = { navController.navigate("home") })
}

3. NavHostController

• 네비게이션을 관리하는 컨트롤러로, 이를 통해 화면 간 이동을 처리
• rememberNavController 함수를 사용하여 인스턴스를 생성

val navController = rememberNavController()  // NavController 생성

---

👆 간단한 예시

안드로이드 공식 문서에서 권장하는 단방향 데이터 흐름(UDF)원칙을 따라야 한다.
이를 위해서는 컴포저블에 NavController를 직접 전달하지 않고, 대신 이벤트 핸들러를 사용하여 네비게이션을 처리해야 한다.

❌ NavController를 직접 참조하는 예제

@Composable
fun MyApp() {
    val navController = rememberNavController()
    NavHost(navController, startDestination = "home") {
        composable("home") { HomeScreen(navController)} // 직접 참조
        composable("details") { DetailScreen(navController)} // 직접 참조
    }
}

@Composable
fun HomeScreen(navController: NavHostController) { // 직접 참조
    Column(modifier = Modifier.fillMaxSize()) {
        Text(text = "Home Screen")
        Button(onClick = { navController.navigate("details")  }) { // 직접 참조
            Text(text = "Go to Details")
        }
    }
}

@Composable
fun DetailScreen(navController: NavHostController) { // 직접 참조
    Column(modifier = Modifier.fillMaxSize()) {
        Text(text = "Details Screen")
        Button(onClick = { navController.navigate("home") }) { // 직접 참조
            Text(text = "Go to Home")
        }
    }
}

⭕ UDF 원칙을 따른 네비게이션 예제

네비게이션 이벤트를 처리하는 람다 함수를 매개변수로 받도록 수정

@Composable
fun MyApp() {
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = "home") {
        composable("home") { 
        	//람다 함수를 매개변수로
            HomeScreen(onNavigateToDetails = { navController.navigate("details")})
        }
        composable("details") { 
        	//람다 함수를 매개변수로
            DetailScreen(onNavigateToHome = { navController.navigate("home")})
        }
    }
}

@Composable
fun HomeScreen(onNavigateToDetails: () -> Unit) {
    Column(modifier = Modifier.fillMaxSize()) {
        Text(text = "Home Screen")
        Button(onClick = onNavigateToDetails) { //람다 함수를 호출해 네비게이션 처리
            Text(text = "Go to Details")
        }
    }
}

@Composable
fun DetailScreen(onNavigateToHome: () -> Unit) {
    Column(modifier = Modifier.fillMaxSize()) {
        Text(text = "Detail Screen")
        Button(onClick = onNavigateToHome) { //람다 함수를 호출해 네비게이션 처리
            Text(text = "Go to Home")
        }
    }
}

1. MyApp 컴포저블에는 NavController 인스턴스가 있다.
2. 따라서 navigate() 호출은 HomeScreen과 같은 하위 컴포저블이 아니라 여기서 발생해야 한다.ㅣ
3. ProfileScreen에는 클릭 시 사용자를 DetailScreen으로 이동하는 버튼이 포함되어 있다. 그러나 navigate() 자체를 호출하지는 않는다.
4. 대신 버튼은 onNavigateToDetails 매개변수로 노출되는 함수를 호출한다.
5. MyApp가 navigation 그래프에 HomeScreen를 추가하면 onNavigateToDetails 의 경우 navigate()를 호출하는 람다를 전달한다.
6. 이렇게 하면 사용자가 HomeScreen 버튼을 누를 때 details로 올바르게 이동한다.

👉이러한 방식으로 컴포저블 함수는 NavController를 직접 참조하지 않고, 네비게이션 이벤트를 처리할 수 있다.
이를 통해 컴포저블 함수의 독립성을 유지하고, 단방향 데이터 흐름(UDF) 원칙을 따르게 된다.