Jetpack 탐색을 Navigation Compose로 이전

Navigation Compose API를 사용하면 Jetpack Navigation 구성요소, 인프라, 기능을 활용하면서 Compose 앱의 컴포저블 간에 이동할 수 있습니다.

이 페이지에서는 Jetpack Compose로의 대규모 뷰 기반 UI 이전의 일환으로 Fragment 기반 Jetpack Navigation에서 Navigation Compose로 이전하는 방법을 설명합니다.

이전 사전 요구사항

모든 프래그먼트를 상응하는 화면 컴포저블로 대체할 수 있게 되면 Navigation Compose로 이전할 수 있습니다. 화면 컴포저블은 Compose 및 뷰 콘텐츠가 혼합될 수 있지만 Compose 탐색 이전을 사용 설정하려면 모든 탐색 대상이 컴포저블이어야 합니다. 그때까지는 상호 운용성 뷰 및 Compose 코드베이스에서 프래그먼트 기반 탐색 구성요소를 계속 사용해야 합니다. 자세한 내용은 탐색 상호 운용성 문서를 참고하세요.

Compose 전용 앱에서 Navigation Compose를 사용하는 것은 필수사항이 아닙니다. 구성 가능한 콘텐츠 호스팅을 위해 프래그먼트를 계속 유지하는 한 프래그먼트 기반 탐색 구성요소를 계속 사용할 수 있습니다.

이전 단계

권장되는 이전 전략을 따르든 다른 접근 방식을 사용하든 모든 탐색 대상이 화면 컴포저블이 되고 프래그먼트가 컴포저블 컨테이너로만 작동하는 지점에 도달하게 됩니다. 이 단계에서 Navigation Compose로 이전할 수 있습니다.

앱이 이미 UDF 디자인 패턴 및 아키텍처 가이드를 따르고 있다면 Jetpack Compose 및 Navigation Compose로 이전할 때 UI 레이어를 제외한 앱의 다른 레이어를 대대적으로 리팩터링할 필요가 없습니다.

Navigation Compose로 이전하려면 다음 단계를 따르세요.

  1. 앱에 Navigation Compose 종속 항목을 추가합니다.

  2. App-level 컴포저블을 만들고 Compose 진입점으로 Activity에 추가하여 뷰 레이아웃 설정을 대체합니다.

    class SampleActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // setContentView<ActivitySampleBinding>(this, R.layout.activity_sample)
        setContent {
            SampleApp(/* ... */)
        }
    }
}
    MigrationCommonScenariosSnippets.kt

  3. 각 탐색 대상의 유형을 만듭니다. 데이터가 필요 없는 대상에는 data object를 사용하고 데이터가 필요한 대상에는 data class 또는 class를 사용합니다.

    @Serializable data object First
@Serializable data class Second(val id: String)
@Serializable data object Third

    MigrationCommonScenariosSnippets.kt

  4. 이를 참조해야 하는 모든 컴포저블이 액세스할 수 있는 위치에 NavController를 설정합니다 (일반적으로 App 컴포저블 내). 이 접근 방식은 상태 호이스팅의 원칙을 따르며 NavController를 컴포저블 화면 간에 이동하고 백 스택을 유지하기 위한 정보 소스로 사용할 수 있습니다.

    @Composable
fun SampleApp() {
    val navController = rememberNavController()
    // ...
}
    MigrationCommonScenariosSnippets.kt

  5. App 컴포저블 내에서 앱의 NavHost를 만들고 navController를 전달합니다.

    @Composable
fun SampleApp() {
    val navController = rememberNavController()

    SampleNavHost(navController = navController)
}

@Composable
fun SampleNavHost(
    navController: NavHostController
) {
    NavHost(navController = navController, startDestination = First) {
        // ...
    }
}
    MigrationCommonScenariosSnippets.kt

  6. composable 대상을 추가하여 탐색 그래프를 빌드합니다. 각 화면이 이전에 Compose로 이전된 경우 이 단계는 프래그먼트에서 이러한 화면 컴포저블을 composable 대상으로 추출하는 것으로만 구성됩니다.

    class FirstFragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        return ComposeView(requireContext()).apply {
            setContent {
                // FirstScreen(...) EXTRACT FROM HERE
            }
        }
    }
}

@Composable
fun SampleNavHost(
    navController: NavHostController
) {
    NavHost(navController = navController, startDestination = First) {
        composable<First> {
            FirstScreen(/* ... */) // EXTRACT TO HERE
        }
        composable<Second> {
            SecondScreen(/* ... */)
        }
        // ...
    }
}
    MigrationCommonScenariosSnippets.kt

  7. Compose UI 설계에 관한 안내, 특히 ViewModel 및 탐색 이벤트를 컴포저블에 전달하는 방법을 따랐다면 다음 단계는 각 화면 컴포저블에 ViewModel를 제공하는 방법을 변경하는 것입니다. hiltViewModel를 통해 Hilt 삽입과 Compose 및 Navigation과의 통합 지점을 자주 사용할 수 있습니다.

    @Composable
fun FirstScreen(
    // viewModel: FirstViewModel = viewModel(),
    viewModel: FirstViewModel = hiltViewModel(),
    onButtonClick: () -> Unit = {},
) {
    // ...
}
    MigrationCommonScenariosSnippets.kt

  8. 모든 findNavController() 탐색 호출을 navController 호출로 바꾸고 전체 navController를 전달하는 대신 이를 각 컴포저블 화면에 탐색 이벤트로 전달합니다. 이 접근 방식은 구성 가능한 함수의 이벤트를 호출자에게 노출하는 권장사항을 따르며 navController를 단일 정보 소스로 유지합니다.

    해당 대상에 정의된 경로 클래스의 인스턴스를 만들어 데이터를 대상에 전달할 수 있습니다. 그런 다음 대상의 백 스택 항목에서 직접 가져오거나 SavedStateHandle.toRoute()를 사용하여 ViewModel에서 가져올 수 있습니다.

    @Composable
fun SampleNavHost(
    navController: NavHostController
) {
    NavHost(navController = navController, startDestination = First) {
        composable<First> {
            FirstScreen(
                onButtonClick = {
                    // findNavController().navigate(firstScreenToSecondScreenAction)
                    navController.navigate(Second(id = "ABC"))
                }
            )
        }
        composable<Second> { backStackEntry ->
            val secondRoute = backStackEntry.toRoute<Second>()
            SecondScreen(
                id = secondRoute.id,
                onIconClick = {
                    // findNavController().navigate(secondScreenToThirdScreenAction)
                    navController.navigate(Third)
                }
            )
        }
        // ...
    }
}
    MigrationCommonScenariosSnippets.kt

  9. 모든 Fragment, 관련 XML 레이아웃, 불필요한 탐색 및 기타 리소스, 비활성 Fragment 및 Jetpack Navigation 종속 항목을 삭제합니다.

설정 문서에서 Navigation Compose 관련 세부정보가 포함된 동일한 단계를 확인할 수 있습니다.

일반적인 사용 사례

어떤 탐색 구성요소를 사용하든 동일한 탐색 원칙이 적용됩니다.

이전 시 일반적인 사용 사례는 다음과 같습니다.

이러한 사용 사례에 관한 자세한 내용은 Compose로 탐색을 참고하세요.

탐색 시 복잡한 데이터 검색

탐색할 때는 복잡한 데이터 객체를 전달하지 않는 것이 좋습니다. 대신 탐색 작업을 실행할 때 고유 식별자 또는 다른 형식의 ID와 같은 필요한 최소 정보를 인수로 전달합니다. 복잡한 객체는 데이터 영역과 같은 단일 정보 소스에 데이터로 저장해야 합니다. 자세한 내용은 탐색 시 복잡한 데이터 검색을 참고하세요.

프래그먼트가 복잡한 객체를 인수로 전달하는 경우 먼저 데이터 영역에서 이러한 객체를 저장하고 가져올 수 있는 방식으로 코드를 리팩터링하는 것이 좋습니다. 예시는 Now in Android 저장소를 참고하세요.

제한사항

이 섹션에서는 Navigation Compose의 현재 제한사항을 설명합니다.

Navigation Compose로 점진적으로 이전

현재는 코드에서 프래그먼트를 대상으로 계속 사용하는 동안 Navigation Compose를 사용할 수 없습니다. Navigation Compose를 사용하려면 모든 대상이 컴포저블이어야 합니다. Issue Tracker에서 이 기능 요청을 추적할 수 있습니다.

전환 애니메이션

Navigation 2.7.0-alpha01부터 이전에 AnimatedNavHost에서 제공되었던 맞춤 전환 설정 지원이 이제 NavHost에서 직접 지원됩니다. 자세한 내용은 출시 노트를 참고하세요.

자세히 알아보기

Navigation Compose로 이전하는 방법에 관한 자세한 내용은 다음 리소스를 참고하세요.

  • Navigation Compose Codelab: 실습 Codelab을 통해 Navigation Compose의 기본사항을 알아봅니다.
  • Now in Android 저장소: Kotlin과 Jetpack Compose로 완전히 빌드된 모든 기능을 갖춘 Android 앱으로, Android 설계 및 개발 권장사항을 따르고 Navigation Compose를 포함합니다.
  • Sunflower를 Jetpack Compose로 이전: Sunflower 샘플 앱을 뷰에서 Compose로 이전하는 여정을 설명하는 블로그 게시물로, Navigation Compose로의 이전도 포함되어 있습니다.
  • 모든 화면에서 사용할 수 있는 Jetnews: Jetpack Compose 및 Navigation Compose로 모든 화면을 지원하도록 Jetnews 샘플의 리팩터링 및 이전을 문서화한 블로그 게시물입니다.