[TECH] RecyclerView ViewModel 적응기

[티끌] 티끌 개발자의 RecyclerView ViewModel 적응기

안녕하세요 티플의 안드로이드 개발자 김유정입니다 :D
오늘은 지난 포스트에서 말씀드렸던 오류 해결 과정을 소개하고자 돌아왔습니다!
 

---

👩‍💻문제가 발생했어요

문제가 발생했던 건 티끌의 챌린지 디테일 페이지 입니다.
이해를 돕기 위해 아래의 예시를 준비했는데요, 왼쪽은 현재 티끌 서비스이고, 오른쪽은 당시의 화면입니다.
 
문제가 보이시나요? 바로 챌린지의 미션 리스트가 제대로 생성되지 않고 있다는 것이죠!
아무리 코드를 보아도 문제는 보이지 않고 또 마감 기한은 다가오고 정말 진땀을 흘렸답니다 :<
 

 

---

👩‍💻어떤 기술을 사용했을까?

문제를 이해하기 위해서는 먼저 RecyclerView와 ViewModel 그리고 LiveData를 이해해야 합니다.
티끌의 가변 리스트는 위의 기술들을 사용해 구현되어 있기 때문이죠!
 
먼저 📍RecyclerView📍는 무엇일까요?

• 대량의 데이터를 효율적으로 화면에 나타내기 위해서, 각 아이템을 목록형태로 화면에 나타내는데 사용됨
• ViewHolder 패턴을 기본적으로 구현하도록 하여 스크롤시에 뷰를 재사용함
• LayoutManager를 통해서 각 아이템의 배치를 수직, 수평, 격자 등 다양하게 배치할 수 있음

 
RecyclerView를 만들기 위해 무엇이 필요할까요?

• 출력하고자 하는 데이터
• 레이아웃 파일에 정의된 RecyclerView 인스턴스
• RecyclerView를 구성할 아이템의 레이아웃
• 출력하고자 하는 뷰의 정보를 담은 ViewHolder
• 데이터와 RecyclerView를 연결 시키기 위한 Adapter

간략하게 줄이자면, 리사이클러뷰는 리스트를 화면에 출력하기 위해 사용되는 UI 컴포넌트로
📍가변적인 길이의 리스트 데이터를 스크롤할 수 있는 형태로 출력하기 위해 사용됩니다📍
 
 
다음으로 ✨ViewModel✨은 어떤 특징을 가질까요?

• 생명 주기에 영향을 받지 않고 데이터를 유지할 수 있음
• UI 컨트롤러와 데이터가 분리되므로 Configuration 변경(화면 회전 등)으로 데이터가 초기화되는 현상을 방지할 수 있음
• 프래그먼트 간의 데이터 공유가 쉬워짐

위의 이미지는 Android Activity와 ViewModel의 생명주기를 비교한 것인데요,
이미지에서도 확인할 수 있듯 ✨ViewModel을 사용하면 Activity와 독립적인 생명주기로 데이터를 관리할 수 있게 됩니다✨
 
마지막으로 🎁Livedata는 ViewModel과 함께 사용했을 때 항상 최신 데이터를 유지한다는 특징을 가집니다🎁

---

👩‍💻문제는 무엇이었을까?

자! 기반이 되는 기술을 설명했으니, 정말 문제가 무엇이었는지 알아봐야겠죠?
챌린지에 대한 미션 리사이클러뷰를 생성하는 과정은 다음과 같습니다.

• 사용자는 특정 챌린지를 클릭한다
• 프론트엔드는 해당 챌린지의 id 값을 백엔드에 보내 미션 리스트를 받는다
• 리스트의 항목(미션) 하나 하나를 리사이클러뷰의 item으로 사용하여 리사이클러뷰를 생성 및 화면에 출력한다.

다음은 실제 무심기 챌린지🥬를 클릭했을 때 서버에서 보내온 결과의 일부입니다.

{"result":{
"missionList":[{"id":1,"title":"하루동안 0원 쓰기","required":true,"day":"TUE","check":true},
{"id":2,"title":"오늘의 과소비 기록하기","required":true,"day":"ALL","check":true},
{"id":3,"title":"텀블러에 마실 음료 싸서 다니기","required":false,"day":"ALL","check":false},
{"id":4,"title":"30분 미만 거리 자전거/도보 이용하기","required":false,"day":"ALL","check":false}]}}

 
프론트엔드에서는 위의 결과를 아래와 같은 데이터 클래스에 담아 받습니다.

data class ChallengeDetail ( 
	//생략 
)

data class Result (
	//생략
    val missionList: List<MissionList>
)

data class MissionList (
    var check: Boolean,
    val day: String,
    val id: Int,
    val required: Boolean,
    val title: String
)

 
이제 데이터의 효율적인 관리를 위해 ViewModel을 사용할 차례인데요,
여기서 제 실수가 등장합니다!

 

챌린지 디테일 페이지의 View Model 안에서 missionList의 요소 하나 하나를 리사이클러뷰의 item으로 사용할 것이지만
LiveData에 서버에서 받아온 요청 전체인 ChallengeDetail을 Livedata에 담고 있습니다.
이 문제로 인해 리사이클러뷰가 item을 제대로 인식할 수 없었던 것이죠.

 
올바르게 고치면 아래와 같은 코드가 된답니다.

ChallengeDetailViewModel에서 미션 리스트를 잘 관리할 수 있겠죠?

 

 

---

👩‍💻마치며

RecyclerView와 ViewModel 그리고 LiveData의 동작 방식을 이해한 지금은 간단한 문제이지만,
기술에 대한 이해가 선행되지 않았던 당시에는 문제 해결에 오랜 시간이 걸렸습니다.
 
이렇게 간단한 문제로 며칠을 고민했다니 - 부끄럽기도 했지만 이렇게 회고를 남기는 이유는
앞으로도 기술을 적용하기에 앞서 제대로 공부하고 이해하는 개발자가 되고자 하는 다짐이기도 합니다.
 
문제 해결 과정에 초점을 맞춰 글을 쓰다보니 세가지 기술에 대해 제대로 소개하지 못한 것 같아
조금 아쉬운 마음이 드니- 다음 포스트는 해당 내용을 준비해 찾아오도록 하겠습니다.
감사합니다 :) !



⬇️ 지금 구글 플레이 스토어에서 티끌 다운 받기
https://play.google.com/store/apps/details?id=com.team7.tikkle&hl=ko-KR

📩 Contact : yuu-jeong@naver.com
📲 SNS : https://instagram.com/yu.eek