프로젝트에 Jetpack Navigation 적용하기

들어가기 전에

오늘은 어제 하루동안 프로젝트에 Navigation 라이브러리를 적용한 과정을 정리해보려고 한다.

처음 사용해본 내용이라서 까먹지 않기 위해 그리고 기존 방식 대비 좋았던 점을 기록해두기 위해 적어보겠땅

---

기존 방식 (이동 & 데이터 전달)

우선 우리 플젝 구조를 보면 아래와 같다.

프로젝트 구조

- 액티비티와 프래그먼트 기준

액티비티로 만든 기준은 화면 변경 시 보여야하는 큰 레이아웃으로 잡았다.

메인 액티비티의 경우 바텀 네비게이션 바가 프래그먼트가 교체됨에도 계속 화면에 나타나야했고, 감상문을 작성하는 화면에서는 해당 바텀 네비게이션바가 화면 상에서 존재하지 않기 때문에 별도의 액티비티를 만들어주었다.

크게 MainActivity에서는 바텀네비게이션 바와 FragmentContainerView를 가지고 있고,

바텀 네비게이션 아이템의 클릭과 화면 상의 클릭을 통해 프래그먼트 이동 및 화면 이동을 처리하고 있다.
이 때 FragmentManager을 통해 이동을 처리해주었는데, 프래그먼트 A에서 프래그먼트 B로 이동해야할 경우 액티비티에 구현한 메서드를 호출(1)하여 프래그먼트 B로 이동(2)하는 방식이었다. 

    // 액티비티에 구현했던 프래그먼트 이동 
   
    fun navigateToReportFragment() {
        supportFragmentManager.beginTransaction()
            .add(R.id.main_fragment_container_view, ReportFragment.newInstance())
            .addToBackStack(null)
            .commit()

 

// 프래그먼트 이동이 필요할 때 프래그먼트에서는 아래와 같이 메서드를 호출해주었다.

binding.btnReply.setOnClickListener {
            (activity as MainActivity).navigateToReportFragment(reportId)

 

만약 프래그먼트 A -> B로의 이동 중 데이터를 전달해야한다면 이동 시 데이터를  넣어주는 방식이었다.

// 액티비티에 작성해둔 프래그먼트 이동 
  fun navigateToDetailMovieFragment(movieID: Int) {
        supportFragmentManager.beginTransaction()
            .add(R.id.main_fragment_container_view, MovieDetailFragment.newInstance(movieID))
            .addToBackStack(null)
            .commit()
    }
  
// 프래그먼트에서 클릭 이벤트 발생 시 데이터와 함께 프래그먼트 이동
override fun onClick(position: Int) {
                    val movieId = movie[position].id
                    (activity as MainActivity).navigateToDetailMovieFragment(movieId)
                }
            }

 

넣어준 데이터는  이동한 프래그먼트에서 접근할 수 있었다.

        val movieId = arguments?.getInt("MOVIE_ID")

 

이는 MovieDetailFragment 객체 생성 시  필요한 argument를 붙여 반환해주었다.

    companion object {
    // MovieDetailFragment 객체를 생성하기 위한 메서드 
        fun newInstance(
            movieID: Int,
        ): MovieDetailFragment {
        
        // DetailFragment 객체를 생성한다
            val fragment =
                MovieDetailFragment().apply {
                
                // 그리고 그 프래그먼트에 movieID라는 bundle(arguments)를 붙여준다.
                    arguments =
                        Bundle().apply {
                            putInt("MOVIE_ID", movieID)
                        }
                }
                
                // argument가 붙어있는 프래그먼트를 반환한다.
            return fragment
        }
    }

 

---

Navigation 적용

- 바텀 네비게이션과 연결

프래그먼트 간 네비게이션 시 기존에는 바텀 네비게이션뷰 이벤트를 뷰페이저로 처리해주고 있었다.

그런데 Navigation과 바텀 네비게이션을 연동해서 더욱 짧은 코드로 이벤트를 처리할 수 있어서 편했다.

        val navHostFragment =
        
        // supportFragmentManager: 액티비티 내에서 프래그먼트와 상호작용할 수 있게 해준다. 
        // Id로 레이아웃 파일에 정의해준 NavHostFragment를 찾는다.
            supportFragmentManager
                .findFragmentById(R.id.main_fragment_container_view) as NavHostFragment
                
        // navController : 앱 탐색 처리 담당 객체, 백스텝과 여러 프래그먼트 간 탐색을 관리한다.        
        navController = navHostFragment.navController
        
        binding.navBar.setupWithNavController(navController)

 

그리고 바텀 네비게이션의 아이템과 이동할 화면을 연결해주었다.

이 때 주의할 점!!! 

itemId와 nav_graph에서 정의해준 프래그먼트의 id가 동일해야 정상작동한다.

나는 별개라고 생각하였는데 id가 달라서 클릭해도 프래그먼트나 화면이 이동하지 않았다.. ㅠㅠㅠ

binding.navBar.setOnItemSelectedListener {
            when (it.itemId) {
                R.id.allMovieReportFragment -> {
                    if (navController.currentDestination?.id != R.id.allMovieReportFragment) {
                        navController.navigate(R.id.allMovieReportFragment)
                    }
                    return@setOnItemSelectedListener true
                }
                R.id.myPageFragment -> {
                    if (navController.currentDestination?.id != R.id.myPageFragment) {
                        navController.navigate(R.id.myPageFragment)
                    }
                    return@setOnItemSelectedListener true
                }

                R.id.writeActivity -> {
                    val intent = Intent(this, WriteActivity::class.java)
                    startActivity(intent)
                    return@setOnItemSelectedListener true
                }
                else -> {
                    return@setOnItemSelectedListener false
                }
            }
        }

 

id가 맞지 않으면 아래와 같은 에러가 발생하며 이벤트가 일어나지 않는다.

java.lang.IllegalArgumentException: Navigation action/destination com.example:id/navigateToWriteReport cannot be found from the current destination Destination(com.example:id/writeReportFragment) label=WriteReportFragment class=WriteReportFragmenIgnoring onNavDestinationSelected for MenuItem id/write as it cannot be found from the current destination Destination(com.example:id/allMovieReportFragment) label=AllMovieReportFragment class=com.example.ui.report.all.AllMovieReportFragment

 

- 프래그먼트 이동

영화를 클릭했을 때 영화의 상세 정보를 볼 수 있는 프래그먼트로 이동하기 위해서는 아래와 같이 코드를 작성해주면 되는데

여기서 navigateToMovieDetail은 nav_graph.xml 파일에서 action에 정의해준 id값이다.

넘겨줘야할 arguement가 있다면 함께 넘겨주면 된다.

// findNavController() : 이 프래그먼트 또는 활동과 연관된 NavController를 찾는다.
// NavController : 앱 내 탐색을 관리하고 탐색 그래프에 정의된 프래그먼트, 액티비티 사이를 이동하는데 도움을 준다.

    private val navController by lazy { findNavController() }    
    
    private fun navigateToMovieDetail(movieId: Int) {
        val action = AllMovieReportFragmentDirections.navigateToMovieDetail(movieId)
        navController.navigate(action)
    }

 

MovieDetailFragment에서 받은 movieId를 이용하려고 한다면 args 변수를 선언해주고 args.movieId와 같이 이용할 수 있다.

val args: MovieDetailFragmentArgs by navArgs()

//MovieDetailFragmentArgs : Safe Args를 사용할 때 생성되는 클래스이다. 
// MovieDetailFragment에 안전하게 유형별로 전달된 인수가 포함되어 있어 수동으로 번들을 처리하지 않아도 인수를 검색할 수 있따.
        val args: MovieDetailFragmentArgs by navArgs()
        lifecycleScope.launch {
                viewModel.searchMovieDetail(args.movieId)
        }

---

safe args 방식을 사용했을 때 좋았던 점

프래그먼트 간 이동을 더욱 간편하게 하기 위해 Navigation을 적용하다보니 인자를 전달하는 것또한 지원한다는 것을 알게되었고 , 다소 번거롭던 인자 전달 방식또한 safe args를 적용해서 구현해보았다.

 

기존 bundle 방식에서는 키를 직접 여러 번 작성해줘야하는데 이 때 잘못 작성할 경우 데이터가 제대로 오지 않는다.

나도 몇 번 키 철자를 잘못 작성하여 데이터가 오지 않았던 적이 몇 번있었고, 괜히 다른 부분에 문제가 있는 줄 알고 시간을 허비했던 때가 있었다.

// 번들 방식
val movieID = arguments?.getInt("MOVIE_ID")  // Needs to use the correct key

// safe agrs 방식
    private val args: ReportThumbnailFragmentArgs by navArgs()
   args.movieName

 

그러나 safe args 방식에서는 nav_graph.xml 상에서 argument를 정의해주고 개발 중에는 문자열 형태의 키를 수동으로 작성해주지 않아도 된다. 

유형이나 키 유형이  nav_graph.xml 에서 작성한 것과 같은지도 알아서 해주기 때문에 편했다 ㅎㅎ 

무엇보다  nav_graph.xml 파일 1개만 검토하면 된다는 점이 가장 편했다.

 

Navigation도 간편하게 화면을 이동하고 데이터를 전송할 수 있어서 편했다

기존 방식을 사용하고 Navigation을 사용하니 더욱 차이가 느껴졌다. 

 

그럼 Navigation 적용 과정 끄읏