[Android / Compose] 컴포넌트 onClick으로 Navigation 탭 변경 처리

하단 탭 바를 통해 탭을 이동하는 것뿐 아니라 간혹 내부 컴포넌트 onClick을 통해 탭을 이동해야 하는 경우가 있습니다.

이때는 NavController를 통해 원하는 탭을 지정할 수 있습니다.

FloatingActionButton(
    onClick = {
        navController.navigate(Screen.Notes.route)
    }
    ...

navigate 함수에 탭 key 값을 인자로 넣어줌으로써 지정한 탭으로 이동이 가능합니다.

 

하지만? 여기서 문제가 한 가지 발생합니다.

1번 탭에 있다가 2번 탭으로 navigate -> 이후 다시 하단 탭바로 1번 탭으로 이동하려 하면 1번 탭으로 이동되지 않습니다.

이 현상은 NavController가 경로(Route)와 백 스택(Back Stack)을 관리하는 방식에서 비롯됩니다.

• 경로(Route): NavController는 경로(route)를 통해 특정 화면을 식별하고, 경로를 기반으로 내비게이션을 수행합니다. 
• 백 스택(Back Stack): NavController는 각 화면에 대한 히스토리를 백 스택 형태로 관리합니다. 사용자가 여러 화면을 탐색할 때, 해당 화면들이 스택에 쌓이게 되고, '뒤로 가기' 버튼을 누르면 스택에서 최근에 추가된 화면이 제거됩니다.

위와 같은 성질에 따라서 컴포넌트 클릭 후 스택이 쌓이면 다시 돌아가려해도 이미 스택에 같은 경로가 존재하여 중복 경로를 추가하지 않으려고 동작을 안 하게 됩니다.

FloatingActionButton(
    onClick = {
        navController.navigate(Screen.Notes.route) {
            popUpTo(navController.graph.startDestinationId) {
                saveState = true // 상태 유지
            }
            launchSingleTop = true
            restoreState = true // 이전 상태 복원
        }
    },
    ...

위와 같이 코드를 수정하여 탭 전환에 문제가 없도록 할 수 있습니다.

탭 간의 상태를 복원하고 백 스택을 관리하기 위해 restoreState와 popUpTo를 활용합니다.

이를 통해 이전 탭의 상태를 유지하고, 스택을 정리할 수 있습니다.

• restoreState: 이전 상태를 복원해, 다른 탭으로 전환한 후 다시 돌아올 때 상태가 유지되도록 합니다.
• popUpTo: 백 스택에서 특정 경로까지 스택을 정리합니다. 탭 전환 시 불필요한 스택을 제거하고, 새로운 화면을 스택에 쌓지 않도록 할 수 있습니다.