메인 화면 : 리사이클러뷰 구현 과정 정리

화면이 켜질 때 리사이클러뷰에 데이터가 바로 나타나지 않는 현상

현상 :

- 메인 액티비티의 레이아웃만 보이고 프래그먼트 내부의 리사이클러뷰가 보이지 않는 현상이 발생하였다. 

 

원인

- 데이터 변경에 따라 UI가 갱신되지 않아 발생되는 문제였다!

 

해결

- 서버로부터 데이터를 가져오는 함수 호출 시 비동기 처리가 일어나는 과정을 정확히 숙지하지 못했다. 

- 데이터 변경에 따라 ui 변경을 처리해줄 수 있는 방법이 없을까 ?

🫱 Livedata와 observe를 통해 구현할 수 있었다.

 

기존 코드

val reportList = reportViewModel.report.value
        if (reportList != null) {
            val reviewAdapter = ReviewAdapter()
            reviewAdapter.setReportList(reportList)
            binding.reviewRecyclerView.apply {
                layoutManager = LinearLayoutManager(context)
                adapter = reviewAdapter
            }
        } else {
            Log.d("reportList는 null", reportList.toString())
        }

 

 observe를 사용하도록 수정한 코드

reportViewModel.report.observe(viewLifecycleOwner) { reportList ->
if (reportList != null) {
     val reviewAdapter = ReviewAdapter()
      reviewAdapter.setReportList(reportList)
      binding.reviewRecyclerView.apply {
      layoutManager = LinearLayoutManager(context)
       adapter = reviewAdapter
}

 

기존 코드와 수정한 코드 차이 알아보기

기존 코드의 경우

report.value를 직접 사용하기 때문에 데이터 변경 시 UI가 자동으로 업데이트되지 않고 다른 탭을 클릭했을 때 ui가 갱신되면서 데이터가 보인 것이었다.

 

수정한 코드

뷰 모델의 LiveData 객체인 report를 관찰한다. 서버에서 데이터를 가져와서 _report.value가 업데이트되면 관찰자인 Fragment에게 알려준다. 값이 변경되면 내부에 작성해준 코드가 실행되는 것이다!

따라서 observe를 사용하면 report 데이터가 변경되면 이를 관찰하여 UI를 변경해줄 수 있다.

 

Observable이 무엇일까??

LiveData는 데이터 홀더 역할을 하며 데이터 변경이 발생하면 관찰자들에게 알려주는 기능을 한다.

observe 함수를 호출하면 LiveData의 값이 변경될 때마다 지정한 콜백이 실행된다. 

 

observable이란

한 구성 요소와 다른 구성요소를 통신하는 가장 쉬운 방법은 한 객체에서 다른 객체를 참조로 갖고 직접 호출하는 것이다.

그러나 안드로이드에서는 이 방법에 문제가 있다.

안드로이드 구성 요소는 수명주기와 수명이 있다. 

화면 회전 : 활동을 recreate한다.

 활동에서 뷰모델을 참조로 가지는 것은 메모리 누수로 이어질 수 있으므로 좋지 않다.

 

 

따라서 뷰 모델의 활동에 대한 참조를 가지는 대신 활동의 뷰모델에 대한 참조를 갖도록 하자.

 

그러면 뷰모델에서 활동으로 어떻게 통신하고 데이터를 보낼까?

활동이 뷰모델을 관찰하도록 하자!!

 

이를 위해 Observable Livedata를 사용한다.

 

이렇게 하기 위해서는 ViewModel에서 Livedata를 노출한다.

      private var _report =                                                                                     
          MutableLiveData<ArrayList<ReportList>>()                                                              
                                                                                                            
      val report: LiveData<ArrayList<ReportList>>                                                               
          get() =   _report

 

그리고 활동 / 프래그먼트에서는 실제 구독을 수행한다. Livedata 값이 변경될 때마다 호출된다. 

 reportViewModel.report.observe(viewLifecycleOwner) { reportList ->
            reviewAdapter = ReviewAdapter()
            reviewAdapter.setReportInfo(reportList)
            initRecyclerView()
        }

 

이렇게 뷰모델에서 노출해준 report 데이터가 변경될 때마다 프래그먼트에서는 수행할 동작을 정의해줄 수 있었다.

 

이렇게 메인 화면에 보여줄 전체 게시글들을 서버에서 받아와서 리사이클러뷰를 통해 프래그먼트에 보여주는 작업을 완료하였다.

 

 

---

viewLifecyclerOwner와 lifecycleOwner의 차이는?

livedata를 observe할 때 viewLifecyclerOwner 와 lifecycleOwner의 차이가 무엇이고, 나의 경우에는 무엇이 적절한지 이해해보자

 

우선 lifecyclerOwner은 프래그먼트 자체의 생명주기를 가지고 있다. onAttach부터 onDestory까지 연결되어있다.

fragment view의 lifecycler보다 fragment lifecycler이 길다.

만약 뷰는 소멸되었는데 fragment 자체가 소멸되지 않은 경우 livedata를 observe하게 되면 메모리 누수가 발생할 수 있다.

뷰가 사라졌기 때문에 getView를 하면 null이 발생하고 IllegalStateException이 발생할 수 있다.

 

viewLifecycleOwner은 프래그먼트 뷰의 생명주기를 가지고 있다.

이 클래스는 onCreateView ~ onDestroyView를 가지고 있다.

따라서 프래그먼트 ui가 활성화되어있거나 비활성화되어있을 때 연결된다.

 

LiveData는?

livedata는 observer의 lifecycler을 따라간다. 여기서 observer은 일반적으로 액티비티나 프래그먼트에 해당한다. 따라서 뷰가 사라지게 되면 livedata도 같이 사라진다. 

 

LiveData 사용 방법

MutableLiveData인 _data를 생성한다.

LiveData인 data를 생성한다.

 

observe를 해주는 방법의 차이

 

방법 1

        reportViewModel.report.observe(viewLifecycleOwner) { reportList ->
            Log.d("좋아요 reportList observe 후", reportList.toString())
            reviewAdapter = ReviewAdapter()
            reviewAdapter.setReportInfo(reportList)
            initRecyclerView()
        }

 

방법 2

       val reportObserver =
            Observer<ArrayList<ReportList>> { reportList ->
                reviewAdapter = ReviewAdapter()
                reviewAdapter.setReportInfo(reportList)
                initRecyclerView()
            }

        reportViewModel.report.observe(viewLifecycleOwner, reportObserver)

 

• LiveData 값을 변경하는 방법
  • postValue
    • 백그라운드에서 값을 변경한다. 따라서 백그라운드 스레드에서 동작하다가 메인 스레드에 값을 post하는 방식으로 사용된다.
    • 메인 스레드 적용 전에 postValue()가 여러 번 호출된다면 가장 마지막에 호출된 값이 적용된다.
    • Handler를 통해 메인 스레드에 값이 전달되기 전에 getValue를 호출하기 때문에 postValue 호출 뒤 바로 getValue로 값을 읽으려고 하면 변경된 값을 읽어오지 못할 가능성이 높음!
    • 따라서 바로 값을 읽어야할 때는 setValue를 사용하는 것이 좋다.
  • setValue
    • 메인 스레드에서 Livedata의 값을 변경한다.
    • 따라서 setValue를 통해 함수 호출 후 바로 getValue로 값을 읽어오면 변경된 값을 가져올 수 있다!