RecyclerView 오류 해결 과정..

최근 진행하고 있는 프로젝트에서 밑과 같은 문제에 직면했다.

 

위의 영상은 현재 진행중인 프로젝트의 피드를 구현한 것이다. 피드는 RecyclerView로 구현하였다. 좋아요를 클릭하면 ViewModel의 피드 데이터에 이를 반영하고, 이에 따라 좋아요 개수를 보여주도록 의도하였지만 위와 같이 좋아요를 클릭 했을 때 해당 게시물 작성자의 프로필 사진이 없는 경우 이전에 좋아요를 눌렀던 게시물 작성자의 프로필 사진으로 변경이 되는 현상이 생겼다.

 

뭐가 문제일까?

ViewModel의 데이터 문제?

클릭할 때마다 프로필 사진이 변경 되기 때문에 처음에는 ViewModel의 피드 데이터를 변경할 때 프로필 사진의 url 값이 바뀌는 것으로 판단하였고 해당 메서드에서 로그를 찍어봤다. 프로필 사진이 바뀌는 경우에도 프로필 사진 url 값을 null이였다.

 

좋아요 버튼 클릭 시에 프로필 사진을 설정해야 하나?

단순하게 생각하였다. 클릭할 때마다 프로필 사진이 변경되니까 좋아요 클릭 Listener 내부에 프로필 사진을 설정하는 동작을 추가하면 될 것이라 생각했다. 하지만 이 또한 의도 한대로 동작하지 않았다. 문제를 해결할 수 없었다.

 

피드 RecyclerView Adapter의 초기화 시점?

바로 전에 댓글 기능을 구현하면서 RecyclerView에서 문제가 있었다. 이때는 RecyclerView adapter의 초기화를 지연 연산 처리 했던 것이 문제였다. 그래서 혹시나 하는 생각해 시도해봤지만 달라지는 것은 없었다. 지금와서 생각나는 것인데 애초에 댓글과 피드의 구현 방식이 달랐기 때문에 해결되지 않았을 것이라는 생각이 든다.

피드는 단일 RecyclerView이지만 댓글은 대댓글까지 구현해야 했기 때문에 중첩 RecyclerView로 구현하였다. 그리고 피드에서 문제는 itemView에서 발생하였지만 댓글에서 문제는 viewModel로 원하는 값이 전달되지 않았기 때문에 발생하였었다.

 

RecyclerView는 재활용된다!

RecyclerView는 아이템을 그릴 때 이전에 그렸던 아이템의 layout을 재활용하기 때문에 이전 아이템의 프로필 사진이 나타났던 것이다.

그래서 해결하는 방법은 간단했다. viewHolder의 bind 함수에서 아이템의 각 요소들을 모두 초기화 시켜주는 것이다. 프로필 사진의 경우 프로필 사진 url이 null인 경우에 기본 이미지를 넣는 동작을 추가하였다.