👉🏻 앱 화면 간의 화면 이동하는 코드 입니다.
This is the code to move between app screens.
👉🏻네비게이션이란 화면이동 기능을 의미합니다.
Navigation refers to the screen movement function.
👉🏻 리액트네이티브와 구조가 매우 유사합니다.
It is very similar in structure to React Native.
👉🏻 나머지 설명은 코드 주석을 참고하세요.
Please refer to the code comments for the rest of the explanation.
1.코드/Code
✔️ 네이게이션 기능을 사용하기 위해서는 아래의 모듈설정을 해야 합니다.
To use the navigation function, you must configure the module settings below.
✔️buil.gradle.kts
dependencies {
implementation(libs.androidx.core.ktx)
implementation(libs.androidx.lifecycle.runtime.ktx)
implementation(libs.androidx.activity.compose)
implementation(platform(libs.androidx.compose.bom))
implementation(libs.androidx.compose.ui)
implementation(libs.androidx.compose.ui.graphics)
implementation(libs.androidx.compose.ui.tooling.preview)
implementation(libs.androidx.compose.material3)
testImplementation(libs.junit)
androidTestImplementation(libs.androidx.junit)
androidTestImplementation(libs.androidx.espresso.core)
androidTestImplementation(platform(libs.androidx.compose.bom))
androidTestImplementation(libs.androidx.compose.ui.test.junit4)
debugImplementation(libs.androidx.compose.ui.tooling)
debugImplementation(libs.androidx.compose.ui.test.manifest)
// 네이게이션 모듈 / navigation module
val nav_version = "2.9.5" // 최신 버전 확인 / check latest version
implementation("androidx.navigation:navigation-compose:$nav_version")
}✔️ MainActivity.kt
package com.freelifemakers.navigation
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.freelifemakers.navigation.ui.theme.NavigationTheme
import androidx.navigation.NavController // Add NavController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()
setContent {
NavigationTheme {
MainAppScreen() // 앱 실행 / Run App
// == 기존 코드 주석 처리 / Comment out existing code ==
// Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
// Greeting(
// name = "Android",
// modifier = Modifier.padding(innerPadding)
// )
// }
}
}
}
}
@Composable
fun MainAppScreen() {
// NavController 생성 및 상태 기억
// Create NavController and remember its state
val navController = rememberNavController()
Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
// NavHost 설정, 라우터 정의
// NavHost settings, Define router
NavHost(
navController = navController,
startDestination = "home_screen", // 시작 화면 설정 / Start screen settings
modifier = Modifier.padding(innerPadding)
) {
// 'home_screen' Route 정의 / Defining the 'home_screen' Route
// 라우터 식별자 정의 / Router Identifier Definition
composable("home_screen") {
// 라우터에 해당하는 화면 실행
// Run the screen corresponding to the router
HomeScreen(navController = navController)
}
// 'detail_screen' Route 정의
// Define the 'detail_screen' Route
composable("detail_screen") {
DetailScreen(navController = navController)
}
}
}
}
// --- 컴포즈 정의 / Compose Definition ---
// Home 화면 / Home Screen
@Composable
fun HomeScreen(navController: NavController, modifier: Modifier = Modifier) {
Column(
modifier = modifier
.fillMaxSize()
.padding(16.dp),
// 수직 정렬(가운데) / Vertical alignment (center)
verticalArrangement = Arrangement.Center,
// 수평 정렬(가운데) / Horizontal alignment (center)
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(text = "🏠 홈 화면/Home Screen")
Spacer(modifier = Modifier
// 패딩을 나중에 적용하면 적용안됨 / If you apply padding later, it will not be applied.
.padding(vertical = 10.dp)
.height(2.dp)
.width(200.dp)
.background(Color.DarkGray)
)
Button(
// 버튼 클릭 시 "detail_screen"으로 이동
// When the button is clicked, go to "detail_screen"
onClick = { navController.navigate("detail_screen") }
) {
Text("상세 화면으로 가기 / Go to details screen")
}
}
}
// Detail 화면 / Detail Screen
@Composable
fun DetailScreen(navController: NavController, modifier: Modifier = Modifier) {
Column(
modifier = modifier
.fillMaxSize()
.padding(16.dp),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(text = "📄 상세 화면입니다. / This is a detailed screen.")
Spacer(modifier = Modifier.height(20.dp)) // 공간확보 / Securing space
Button(
// 뒤로 가기 (백 스택에서 현재 화면 제거)
// Go back (remove current screen from back stack)
onClick = { navController.popBackStack() }
/*
*
* 아래의 코드처럼 사용하면 스택이 누적 됨
* If you use the code below, the stack will accumulate.
*
* onClick = { navController.navigate("home_screen") }
*
* */
) {
Text("뒤로 가기 / Go back")
}
}
}
// == 기존 코드 / Existing code ==
@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
Text(
text = "Hello $name!",
modifier = modifier
)
}
@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
NavigationTheme {
Greeting("Android")
}
}2.스크린 샷 / Screen Shot
