[Android/Kotlin] 양방향 데이터 바인딩으로 더 mvvm답게 !

mvvm + livedata + room으로 작업하신다면 양방향 데이터 바인딩 도입을 고려해보시길 추천 드립니다 ! 조금 더 mvvm 답게 코딩할 수 있습니다. (mvvm 도입을 고민하거나 도입 초기이신 분들에게 추천합니다. ) 

>> 데이터 바인딩

데이터 바인딩은 mvvm을 도입하지 않으신 분들중에도 이미 익숙한 주제입니다. 혹시 모르시는 분들은 아래 포스팅이나 다른 분들이 쓰신걸 참고하세요. 

[안드로이드/Android] 데이터 바인딩 사용하기[1/2]

>> Mvvm

먼저 간략하게 mvvm은 model(데이터 클래스), view(엑티비티), Viewmodel(비지니스로직)으로 역할들을 나누어 유지 보수에 용이하도록 합니다. mvp와 마찬가지로 초기 학습이 어렵지만 익숙해지면 협업에도 편리합니다. 

위 그림을 모토(?)로 삼고 mvvm을 작업하고 있습니다.  View는 Activitiy나 Fragment와 그에 맞는 xml을 칭하고 데이터 바인딩을 사용해서 Activity에서 뷰 업데이트를 지양했습니다. 

데이터와 관련된 변수들은 ViewModel에서 LiveData로 관리하고 Observe(관찰)를 통해 xml로 전달 받아 뷰를 업데이트 하고 유저 액션(클릭 이벤트)가 발생 했을땐 ViewModel에서 작성한 함수를 호출하는 방식으로 코드를 구분하고 관리한다.

mvp와 마찬가지로 일정 패턴을 가지고 작업하는 방식은 처음 틀을 잡는덴 오래 걸리지만 한번 잡힌 틀은 프로젝트가 커질수록 많은 이점을 가져 옵니다. 

>> 양방향 바인딩

양방향 바인딩을 인지하지 못한채 데이터 바인딩을 사용 했을땐 단순히 xml에서 ViewModel에 데이터에 따라 업데이트 하도록 작업 했습니다. 

적용 전

                        <com.wony.plantdiary.view.custom.PEditTextView
                                android:id="@+id/etPlantSort"
                                style="@style/addEditText"
                                android:layout_marginTop="5dp"
                                android:layout_marginBottom="1dp"
                                android:background="@null"
                                android:singleLine="true"
                                android:text="@{vm.selectPlant.name}"
                                app:layout_constraintEnd_toEndOf="parent"
                                app:layout_constraintStart_toStartOf="parent"
                                app:layout_constraintTop_toTopOf="parent" />

 

 

위처럼 Edittext에서 양방향 바인딩을 사용하지 않았을때 발생하는 문제는, 사용자가 입력한 Edittext 값을 엑티비티에서 가져와 ViewModel에 전달 해줘야 합니다. 

처음엔 어쩔수 없다고 생각하고 작업 하던중 양방향 바인딩을 알게 돼 적용하니, 조금 더 명확하게 View와 ViewModel을 분리할 수 있었습니다. 

적용 후

                        <com.wony.plantdiary.view.custom.PEditTextView
                                android:id="@+id/etNickname"
                                style="@style/addEditText"
                                android:layout_marginTop="5dp"
                                android:background="@null"
                                android:paddingBottom="10dp"
                                android:singleLine="true"
                                android:text="@={vm.selectPlant.nickName}"
                                app:layout_constraintEnd_toEndOf="parent"
                                app:layout_constraintStart_toStartOf="parent"
                                app:layout_constraintTop_toTopOf="parent"
                                app:layout_constraintVertical_chainStyle="packed" />

간단하게 "@={}" 로 작업하니 ViewModel에 있는 selectPlant의 nickName 값이 Edittext 값에 따라 변경 되는걸 확인 하실 수 있습니다.

 

적용 초기 단계라 시행 착오가 많지만 토이 프로젝트를 진행함으로써 변경 리스크가 적어 되도록 바로 적용하고자 하고 있습니다. 양방향 바인딩 외에도 궁금하신 사항이 있으시면 댓글 남겨주세요!