Recommended
More Related Content
Similar to 복잡한 RecyclerView, 군더더기 없이 데이터로 표현하기
Similar to 복잡한 RecyclerView, 군더더기 없이 데이터로 표현하기 (20)
복잡한 RecyclerView, 군더더기 없이 데이터로 표현하기
- 1. 복잡한 RecyclerView, 군더더기 없이 데이터로 표현 하기 (+ Lazy Composable in Jetpack Compose) 김호중(NaverZ, LakeLab)
- 2. 점점 고도화 되는 UX/UI Why? 01 Adapter 편 데이터로 표현까지의 여정 02 03 List state in Compose 04 복잡한 RecyclerView, 군더더기 없이 데이터로 표현 하기 ViewHolder, State 편 데이터로 표현까지의 여정
- 3. Why? 01 점점 고도화 되는 UX/UI ( 계층 멈춰! )
- 4. Why? - UI 의 복잡성 ● 스크롤 및 페이저 UI 중첩된 사용 ○ 많은 양의 어댑터 ○ 뷰홀더의 상태를 표현하는 부분의 부재
- 5. Why? - 계층 간 상호작용 ● 각 UI 계층간의 빈번한 상호 작용 ○ 각 계층을 왕래 하는 데이터 송수신 ○ 뷰 데이터의 변화에 효율적인 동기화
- 6. Why? - 데이터 기반 다이나믹 UI 배치 공통으로 규약된 UI들이 모여 한 화면을 구성 각 컴포넌트는 여러곳에서 재사용 되지만 비지니스 로직은 다름 데이터 기반의 구성
- 7. 데이터 == View State
- 8. 데이터로 표현까지의 여정 02 Adapter 편 첨부된 모든 코드는 이해를 돕기위한 샘플 소스 입니다
- 9. 깊은 깊이의 UI 1st, Pager XML ViewHolder Adapter XML XML ViewHolder ViewHolder 2nd, RecyclerView ...
- 10. 깊은 깊이 UI의 상태 Adapter ViewPager RecyclerView RecyclerView Model ViewHolder Model RecyclerView ... ViewPager Adapter ... ... ViewHolder ... ?
- 11. 깊은 깊이의 UI ViewPager RecyclerView RecyclerView Model Model Model Model Model Model ViewHolder ... ViewHolder Model의 구조 == View State ViewHolder
- 12. 중복된 구현의 어댑터를 줄이기 스크롤이 필요한 뷰가 많아지니까 어댑터가 너무 많아지는데.. 1st, Pager XML ViewHolder Adapter XML XML ViewHolder ViewHolder 2nd, RecyclerView
- 13. 뷰 홀더의 구현이 어댑터에 의존 각 뷰홀더의 타입 정의가 어뎁터 내부에서 규약 중복된 구현의 어댑터를 줄이기 기존에는 왜 어댑터를 공통화 하지 못했을까?
- 14. Adapter ViewHolder Type B Adapter ViewHolder Type C ViewHolder Type A ViewHolder Type D 뷰홀더의 구현부를 탐색 및 보수하기 용이하지 않음 ViewHolder? Adapter? 중복된 구현의 어댑터를 줄이기
- 15. Adapter Adapter ViewHolder Type A 뷰홀더의 재활용이 용이하지 않음 중복된 구현의 어댑터를 줄이기
- 16. Adapter Adapter Adapter Adapter onCreateViewHolder onBindViewHolder getItemViewType ... ● 뷰 홀더와 어댑터간의 의존 관계 제거 ● 어뎁터에 전달할 뷰타입을 외부에서 정의 중복된 구현의 어댑터를 줄이기
- 17. 뷰타입 기준으로 모델과 뷰홀더를 맵핑 ViewType view_holder_content_small.xml 중복된 구현의 어댑터를 줄이기 Typed Model ViewHolder Dependency
- 18. 뷰타입 기준으로 Mapping 된 뷰홀더 찾아와 구현 Layout Id Model Adapter Layout Id Model Layout Id Model Layout Id Model Layout Id Model View Dependency Builder Map View type View Dependency Builder getItemViewType onCreateViewHolder View type 중복된 구현의 어댑터를 줄이기 View type ViewHolder
- 19. Typed Model View Dependency 중복된 구현의 어댑터를 줄이기 첨부된 모든 코드는 이해를 돕기위한 샘플 소스 입니다
- 20. Adapter Layout Id Model Layout Id Model Layout Id Model Layout Id Model View Dependency Builder Map View type View Dependency Builder getItemViewType onCreateViewHolder View type 중복된 구현의 어댑터를 줄이기
- 21. View Dependency Builder Mapping 없앨 수 없나요?.. Dependency Builder 간소화
- 23. 한번 구현해놓은 세트는 자유롭게 재사용 ViewType View Dependency Typed Model 중복된 구현의 어댑터를 줄이기
- 24. 데이터로 표현까지의 여정 03 ViewHolder, State 편 첨부된 모든 코드는 이해를 돕기위한 샘플 소스 입니다
- 25. 데이터 바인딩으로 뷰홀더 구현 없애기 1st, Pager XML ViewHolder XML XML ViewHolder ViewHolder 2nd, RecyclerView Adapter 뷰홀더의 구현을 줄일수는 없을까? 1st, Pager XML ViewHolder XML XML ViewHolder ViewHolder 2nd, RecyclerView
- 26. XML 만으로도 뷰홀더의 비지니스 로직을 구현할 수 있을 것 같은데.. 데이터 바인딩으로 뷰홀더 구현 없애기
- 27. XML만 구현하면 알아서 데이터만 넣어줄 수는 없나요? 데이터 바인딩으로 뷰홀더 구현 없애기
- 28. 뷰홀더 구현을 공통화 하기 위해서는? 뷰홀더가 만들어질때 주입될 기타 데이터들의 Variable (onCreateViewHolder) 뷰홀더에 바인딩 될 XML Variable (onBindViewHolder) view_holder_content_small.xml 해당 XML 레이아웃 ID 데이터 바인딩으로 뷰홀더 구현 없애기
- 29. 뷰홀더 구현을 공통화 하기 위해서는? view_holder_content_small.xml 데이터 바인딩으로 뷰홀더 구현 없애기
- 31. 바인딩된 xml에 있는 변수 ID는 어디서..? ? 데이터 바인딩으로 뷰홀더 구현 없애기
- 32. 데이터 바인딩은 다 계획이 있구나.. 데이터 바인딩으로 뷰홀더 구현 없애기
- 33. view_holder_content_small.xml 데이터 바인딩으로 뷰홀더 구현 없애기
- 34. 뷰홀더에 의존 돼 있는 값들을 XML에 주입 view_holder_content_small.xml 데이터 바인딩으로 뷰홀더 구현 없애기
- 35. LiveData 관찰과 Two way binding을 위하여 LifecycleOwner를 외부에서 주입 데이터 바인딩으로 뷰홀더 구현 없애기
- 36. View의 Context나 Tree 를 탐색하여 가장 근접한 Fragment 나 Activity를 탐색 데이터 바인딩으로 뷰홀더 구현 없애기 Activity (ComponentActivity) Fragment View
- 37. 데이터 바인딩으로 뷰홀더 구현 없애기 View Dependency Builder Map 뷰타입과 맵핑이 여전히 필요한가요?
- 38. 데이터 바인딩으로 뷰홀더 구현 없애기
- 39. 데이터 바인딩으로 뷰홀더 구현 없애기 Adapter Layout Id Model Layout Id Model Layout Id Model Layout Id Model View Dependency Builder Map View type View Dependency Builder getItemViewType onCreateViewHolder View type
- 40. 데이터 바인딩으로 뷰홀더 구현 없애기 view_holder_content_small.xml +
- 41. RecyclerView 상태를 ViewModel 에 표현하기 RecyclerView의 Event와 State는 ViewModel에 어떻게 표현하나요?
- 42. RecyclerView 상태를 ViewModel 에 표현하기 SubmitList, NotifyDataSetChanged 사용할 경우 괜찮지만.. ViewModel LiveData<List>
- 43. RecyclerView 상태를 ViewModel 에 표현하기 Range, Inserted, moved, ... 해야할때는?.. ViewModel Event<Int> Event<Pair<Int,Int>> Event<Command> ...
- 44. RecyclerView 상태를 ViewModel 에 표현하기 계층이 깊어지면요?... ViewModel Event<Int> Event<Pair<Int,Int>> Event<Command> Event<Command> Event<Command> Event<Pair<Int,Int>> Event<Pair<Int,Int>> Event<Int> Event<Int>
- 45. RecyclerView 상태를 ViewModel 에 표현하기 ViewModel Adapter 테스트는..?
- 46. RecyclerView 상태를 ViewModel 에 표현하기 1. RecyclerView의 Item List 와 함께 2. Adapter 와의 의존이 없는 상태로 3. Notify, SubmitList 등의 API를 사용 할 수는 없을까?
- 47. RecyclerView 상태를 ViewModel 에 표현하기 RecyclerView State Item Item Item Item Adapter Dependency Adapter Interface Interface를 통한 의존성 주입
- 48. RecyclerView 상태를 ViewModel 에 표현하기 1. RecyclerView의 Item List 2. Adapter와 의존 제거 3. Adapter API
- 49. RecyclerView 상태를 ViewModel 에 표현하기 ViewModel RecyclerView extension function
- 50. ViewModel RecyclerView 상태를 ViewModel 에 표현하기
- 52. 깊은 깊이의 UI Model Model Model Model Model Model ViewPager RecyclerView RecyclerView ViewHolder ... ViewHolder Model의 구조 == View State
- 54. 이걸 언제 다 구현하지
- 55. RecyclerView ViewPager 2 ListAdapter Adapter Fragment StateAdapter ViewPager PagerAdapter Paging 2 Paging 3 PagingDataAdapter PagedListAdapter NaverZ/Antonio
- 57. State and Compose “컴포저블은 식별 가능한 데이터가 업데이트될 때마다 현재 애플리케이션 상태를 UI로 변환합니다.” Events Data Composable Data state
- 58. State and Compose onClick Observe View LiveData textView.setText(String) container.addChild(View)
- 59. State and Compose Composable Data state Events Data textView.setText(String) container.addChild(View)
- 61. List state and Compose List의 경우에는 Adapter가.. onClick Observe List LiveData Adapter s u b m i t L i s t , n o t i f y . . .
- 62. List state and Compose onClick Lazy composable List<Item> Data list.add list.remove ... 단지 MutableList에 Add만 했는데?..
- 63. List state and Compose
- 64. List state and Compose 단지 MutableList에 Add만 했는데?..
- 65. List state and Compose
- 66. List state and Compose Snapshot??...
- 67. List state and Compose SnapShot 1 SnapShot 2 Stage = 1 Life count = 3 Character level = 1 Tired = 3 ... Stage = 2 Life count = 1 Character level = 3 Tired = 300 ... Restore
- 68. List state and Compose Save Restore
- 69. List state and Compose Global SnapShot Read observer Write observer
- 70. List state and Compose
- 71. List state and Compose 지켜보고 있다... Events Lazy composable List<Item> Data
- 72. List state and Compose Adapter XML XML XML RecyclerView ViewHolder ViewHolder ViewHolder Lazy Composable ViewHolder ViewHolder Child Composable
- 73. List state and Compose List<Item> RecyclerView Data ● DiffUtil ● Adapter(ListAdapter) ● ViewHolder ● Payloads ● ViewType ● Notify... ● ... Lazy Composable 데이터의 변경
- 74. List state and Compose ViewModel List<Item>
- 75. Thank you! 김호중 (NaverZ, todaypoc@gmail.com) Contact me Resources ● https://dev.to/zachklipp/introduction-to-the-compose-snaps hot-system-19cn ● https://developer.android.com/jetpack/compose ● https://github.com/naverz/Antonio