NavController를 이용한 데이터 전달

✅ 본문에 들어가기 전 현재 내 코드 상황

- Compose 환경에서 구현 중

- Navgraph 파일에서 NavController를 이용하여 FirstActivity에서 SecondActivity로 화면 이동

 

 

💡Navgraph - FirstActivity (전달할 데이터를 저장할 컴포저블)

@Composable
fun NavGraph(navController: NavHostController) {
    NavHost(navController = navController, startDestination = Screen.First.route) {
        
        composable(route = Screen.First.route) {
            FirstActivity(
                navController,
                navigateToSecondActivity = {
                    navController.navigate(Screen.Second.route)
                }
            )
        }

    }
}

 

구현 방법은 생각보다 아주 간단하다!

• FirstActivity에 navController를 인자로 넘겨주고, FirstActivity 컴포저블 내에서 인자로 받아온 navController를 이용해 데이터를 담아주면 된다.
• 현재 data라는 이름으로 넘겨주고 싶은 데이터를 저장하였고, 자세한 코드는 밑에서 작성하겠다.

 

 

💡FirstActivity() 에서 전달할 데이터 저장하기

@Composable
fun FirstActivity(
    navController: NavController,
    navigateToSecondActivity: () -> Unit
) {
	...
     val myData = MyData(
        distance = distance.value(),
        currentDate = mydate.value()
    )

    ...
        onClick = {
            navController.currentBackStackEntry?.savedStateHandle?.set(
                key = "data",
                value = myData
            )
            navigateToSecondActivity()
        }
    
 }

• 인자로 넘어온 navController를 FirstActivity(...) 에 작성해준다.
• SecondActivity에 넘기고싶은 데이터를 정의해준 후 navController.currentBackStackEntry?.savedStateHandle?.set(...) 을 이용하여 현재 파일에서 데이터를 저장할 수 있다. 
• 이때 전달 받을 파일에서 불러올 이름인 "key"와 넘겨줄 실제 데이터 "value"를 작성해주어야 한다.
• 다음은 SecondActivity로 이동하기위해 버튼 혹은 이벤트를 걸어줄 곳에 Click이벤트를 사용하여 navController코드와 navigate 함수를 넣어준다.

이제 SecondActivity에서 데이터를 받아보도록 하겠다.

 

 

 

💡 Navgraph - SecondActivity(데이터를 전달받을 컴포저블)

@Composable
fun NavGraph(navController: NavHostController) {
    NavHost(navController = navController, startDestination = Screen.First.route) {
        
        composable(route = Screen.First.route) {
            FirstActivity(
                navController,
                navigateToSecondActivity = {
                    navController.navigate(Screen.Second.route)
                }
            )
        }

        composable(route = Screen.Second.route) {
            val data = remember {
                navController.previousBackStackEntry?.savedStateHandle?.get<MyData>("data")
            }
            SecondActivity(
                data!!,
            )
        }

    }
}

• 첫번째 Navgraph 파일에서 이어 위와 같이 작성하면 된다.
• navController.previousBackStackEntry?.savedStateHandle?.get<MyData>("data") 를 이용하여 이전 파일에서 저장된 데이터를 get을 통해 불러올 수 있다.
• 불러온 data를 val data로 정의하고 SecondActivity()의 인자로 넘겨준다.

 

 

💡 SecondActivity() 에서 전달받은 데이터 사용하기

fun SecondActivity(data: MyData) {

	...
    val distance = data.distance
    ...
    
 }

• 인자로 전달받은 data에서 바로 접근이 가능하다.

 

 

오늘은 아주 간단하게 navController를 인자로 받은 컴포저블에서 데이터를 저장하고, 다른 컴포저블에서 데이터를 전달받는 방법을 작성해보았다.

틀린 부분이 있다면 댓글로 남겨주길!!!