231106 [Trouble Shooting] ListAdapter 갱신 이슈

problem

 

user 상세 페이지에서 좋아요를 눌러도 갱신이 되지 않고, 게시글을 클릭했을때 조회수가 갱신되지 않는 문제가 있습니다.

 

Progress

 

▼Fragment ▼

private fun initViewModel() {
    with(userProfileBoardViewModel) {
        userPage.observe(viewLifecycleOwner) {
            Log.d("tripmatexxxx", "observe : ${it}")
            boardAdapter.submitList(it)
        }
    }
}

 

1. 우선 데이터의 변화를 감지하는 부터 확인했습니다.

 

 

2. 정상적으로 조회수가 RDB에 저장되있고, 받아오고있고, 감지하는것을 확인할 수 있었습니다.(로그가 찍힘)

 

3. 하지만 앱에서는 변경된 데이터가 갱신되지 않는것을 확인할 수 있었습니다.

 

▼ Fragment ▼

private fun initViewModel() {
    with(userProfileBoardViewModel) {
        userPage.observe(viewLifecycleOwner) {
            Log.d("tripmatexxxx", "observe : ${it}")
            boardAdapter.submitList(it)
            boardAdapter.notifyDataSetChanged()
        }
    }
}

 

4. 아무리 생각해도 정상적으로 데이터를 가져오고 감지하는데 화면이 갱신이 되지않는 것이 이해되지않아 notifyDataSetChanged()를 사용해 보았습니다.

 

 

5. 일단 정상 작동은 하지만 약간의 버벅거림이 있는것을 확인할 수 있었습니다.

6. 하지만 ListAdapter를 사용하고 있는데 갱신 문제가 있는것이 이상했습니다.

 

▼ ListAdapter ▼

override fun areItemsTheSame(
    oldItem: CommunityEntity,
    newItem: CommunityEntity
): Boolean {
    return oldItem.key == newItem.key
}

override fun areContentsTheSame(
    oldItem: CommunityEntity,
    newItem: CommunityEntity
): Boolean {
    return oldItem.key == newItem.key
}

 

7. 현재 어댑터에는 ListAdapter를 사용하고 DiffUtill 클래스를 사용하고 있습니다.

8. DiffUtill은 RecyclerView를 효율적으로 처리하기 위한 유틸클래스이고, 기존의 아이템과 업데이트된 아이템을 식별해서 아이템의 변수중에 업데이트된 부분만 새로그려주기때문에 성능적으로 우수합니다.

9. 현재 위 코드에서는 DiffUtill클래스의 areItemsTheSame과 areContentesTheSame메서드를 이용해서 기존의 아이템과 업데이트된 아이템을 식별하고 있습니다.

 

예를들어 지갑에 5만원지폐들(리사이클러뷰에있는 아이템들)이 있다고 가정했을때 객체는 5만원지폐 자체고, 변수는 일련번호, 은행이름, 그림 같은게 있습니다. 

10. areItemsTheSame은 내지갑에있는 5만원 지폐중에서 어떤 5만원지폐인지를 식별하는 메소드이고, 식별하기위해서는 변수중에서도 고유한 Key값인 일련번호를 비교해야 식별할 수 있습니다.


11. areContentsTheSame은 5만원권지폐의 변수의 업데이트 여부를 식별하기 위한 메소드 인데 areItemsTheSame에서 먼저 내 지갑에있는돈중에서 어떤 5만원지폐인지를 식별했다면 이제 그 5만원에 낙서를했을때 낙서된부분만 화면에 업데이트 해야하는데 낙서하기전의 5만원지폐(기존의객체)와 낙서한 5만원지폐(업데이트된객체)를 비교해야 업데이트된부분을 알 수 있는데 일련번호를 비교하고있어서 생긴 문제입니다.

 

Complete

  ▼ Adapter ▼

override fun areItemsTheSame(
    oldItem: CommunityEntity,
    newItem: CommunityEntity
): Boolean {
    return oldItem.key == newItem.key
}

override fun areContentsTheSame(
    oldItem: CommunityEntity,
    newItem: CommunityEntity
): Boolean {
    return oldItem == newItem
}

 

 

areItemsTheSame 에서 oldItem.key(5만원 지폐의 일련번호)와 newItem.key(5만원권 지폐의 일련번호)를 비교해서 내지갑에있는 5만원중 어떤 5만원인지를 비교했고,

areContentsTheSame 에서 oldItem(5만원 지폐)와 newItem(5만원지폐)을 비교해서 낙서된부분을 업데이트해서 화면에 보여주게 만들어서 해결했습니다.(11번참조)

 

 

 

 

 

 

 

 

 

 

 

썸네일 출처

https://kr.freepik.com/free-photo/cute-ai-generated-cartoon-bunny_40572295.htm#query=%EA%B7%80%EC%97%AC%EC%9A%B4%20%EB%8F%99%EB%AC%BC&position=8&from_view=keyword&track=ais