[Kotlin][Android] Jetpack Compose에서 Navigation 구현하기

안녕하세요 오늘은 Jetpack Compose에서 Navigation 구현해보도록 하겠습니다. 

 

Navigation 은 애플리케이션 내에서 여러 화면(Screen) 간의 이동을 관리하는 핵심 요소입니다.

 

Jetpack Compose에서는 기존의 XML 기반의 Navigation 컴포넌트와는 다르게 선언적(Declarative) 방식으로

Navigation을 구현할 수 있으며 이는 사용자 경험을 향상시키고, 코드의 유지보수성을 높이는 데 매우 중요하다고 할 수 있습니다. 

 

 

먼저 Navigation 라이브러리 사용을 위해 Gradle 의존성 추가합니다.

2025년 1월 기준 가장 최신 버전인 2.8.4 버전을 사용하겠습니다 

dependencies {
    // Navigation Compose 라이브러리
    implementation("androidx.navigation:navigation-compose:2.8.4")
}

 

 

화면 구성을 해보도록하겠습니다

1.  FirstScreen.kt  

@Composable
fun FirstScreen(navController: NavController) {
    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text("첫 번째 화면")
        Button(
            onClick = { navController.navigate("second_screen") }
        ) {
            Text("두 번째 화면으로 이동")
        }
    }
}

 

 

 

2. SecondScreen.kt 

@Composable
fun SecondScreen(navController: NavController) {
    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text("두 번째 화면")
        Button(
            onClick = { navController.popBackStack() }
        ) {
            Text("뒤로 가기")
        }
    }
}

 

 

 

3. NavGraph.kt 

@Composable
fun AppNavigation() {
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = "first_screen") {
        composable("first_screen") {
            FirstScreen(navController)
        }
        composable("second_screen") {
            SecondScreen(navController)
        }
    }
}

 

 

 

4. MainActivity.kt 

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaterialTheme {
                Surface {
                    AppNavigation()
                }
            }
        }
    }
}

 

 

실행을 하게 되면 두번째 화면으로 이동 버튼을 눌렀을 때 두번째 화면으로 이동하고, 뒤로 가기 클릭 시, 첫번째 화면으로 돌아오게 됩니다. 

 

앱에는 여러 화면 간 이동이 필수적입니다. 이를 수동으로 관리하면 스택 관리, 인텐트 처리 등이 복잡해잡니다. 

Navigatoin 라이브러리는 네비게이션 그래프(NavGraph)를 사용해 화면 이동 경로를 직관적으로 정의하고, 백 스택을 자동으로 관리합니다. 이로써 화면 간 이동 및 스택 관리가 복잡해지지 않으며 코드가 명확해 집니다. 

 

감사합니다