MVP 패턴에서의 DataBinding

💡MVP 패턴에서 DataBinding을 활용한 양방향 DataBinding 대해 정리하였습니다!

 

MVP with DataBinding

• MVP 패턴은 안드로이드에서 널리 사용되는 아키텍처 패턴 중 하나로, UI 로직과 비즈니스 로직을 분리하여 유지보수성과 테스트 용이성을 높입니다.
• DataBinding을 함께 사용하면 UI와 데이터를 더 쉽게 연결할 수 있으며, 코드량 감소와 직관적인 UI 업데이트가 가능해집니다.

MVP에서 DataBinding을 사용하는 이유

코드 간결화

• findViewById()를 통한 UI 탐색이 아닌 DataBinding을 통해 XML 레이아웃 파일과 직접적으로 연결할 수 있습니다.
• 이를 통해 UI 요소와의 상호작용을 더 직관적이고 간단하게 처리할 수 있습니다.

양방향 데이터 바인딩

• MVP 패턴에서 View가 데이터를 받아서 UI를 업데이트 합니다.
• DataBinding을 사용해서 UI요소와 양방향으로 데이터 바인딩을 할 수 있어서 데이터가 변경되면 UI가 자동으로 갱신됩니다.

View와 Presenter 의존성 분리

• View와 Presenter가 분리되어 있는 환경에서 View의 복잡도를 줄일 수 있습니다.
• Presenter가 직접 UI에 접근하지 않고, DataBinding을 통해 자동으로 업데이트되게 합니다.

MVP 구현

• 사용자의 정보를 가지고 있는 User Model을 MVP 패턴에서 xml과 양방향 데이터 바인딩을 적용하려 합니다.

data class User(val name: String, val age: Int)

<layout xmlns:android="http://schemas.android.com/apk/res/android">
    <data>
        <variable
            name="user"
            type="com.example.app.User" />
    </data>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:padding="16dp">

        <TextView
            android:id="@+id/nameTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{user.name}" />

        <TextView
            android:id="@+id/ageTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{Integer.toString(user.age)}" />
    </LinearLayout>
</layout>

DataBinding

• Activity는 Prsenter를 통해 데이터를 요청하고 그 데이터를 DataBinding을 통해 UI와 바인딩합니다.
• Presenter는 Model에서 데이터를 가져와 View에 전달하는 구조로, View는 DataBinding을 통해 XML 레이아웃과 데이터를 연결하여 UI를 자동으로 업데이트 합니다.

class MainActivity : AppCompatActivity(), MainContract.View {

    private lateinit var binding: ActivityMainBinding
    private lateinit var presenter: MainPresenter

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // DataBinding 초기화
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)

        // Presenter 초기화
        presenter = MainPresenter(this)

        // Presenter에게 데이터 요청
        presenter.loadUserData()
    }

    // Presenter로부터 데이터 받아서 UI 업데이트
    override fun displayUser(user: User) {
        binding.user = user // XML에 있는 user 객체와 바인딩
    }

    override fun showError(message: String) {
        Toast.makeText(this, message, Toast.LENGTH_SHORT).show()
    }
}

• 양방향 업데이트를 활용한 자동 업데이트를 통해 간결하고 유지보수있는 코드를 작성할 수 있습니다.
• 이로 인해 UI 코드의 양을 줄이고, 데이터와 UI 간의 상호작용을 더 직관적으로 처리할 수 있습니다.

DataBinding에서 MVVM과 MVP

• MVVM 패턴에서는 ViewModel을 활용해서 데이터를 자동으로 동기화할 수 있습니다.
• 라이브데이터를 활용한 상태 관리와 데이터 처리로 좀 더 양방향에 적합한 데이터 바인딩을 할 수 있습니다.
• MVP 패턴에서도 LiveData를 사용할 수는 있지만, 아래와 같은 문제가 발생합니다.

class MainActivity : AppCompatActivity(), MainContract.View {

    private lateinit var presenter: MainPresenter

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        presenter = MainPresenter(DataRepository())

        // LiveData 관찰
        presenter.userData.observe(this, Observer { user ->
            // 데이터를 받아서 UI 업데이트
            updateUI(user)
        })

        presenter.loadUserData()
    }

    override fun updateUI(user: User) {
        // UI 업데이트 코드
        textViewName.text = user.name
    }
}

• 데이터를 관찰해서 View를 업데이트하는데, interface를 상속받은 presenter에서 동작을 수행하는 것이 아닌, activity에서 updateUi 함수를 호출하고 있습니다.
• 이 때문에 Presenter가 UI와 비즈니스 로직을 분리하고, 수동으로 처리하는 방식에는 적합하지 않을 수 있습니다.
• LiveData 사용은 MVVM에 더 잘 어울리며, MVP에서 사용한다면 Prsenter의 역할이 모호해질 수 있습니다.

정리

• MVP패턴에서 데이터 바인딩을 활용해서 양방향 데이터 바인딩이 가능합니다.
• 하지만 라이브데이터를 활용해 데이터 바인딩의 이점을 살리기 위해서는 MVVM 패턴이 더 유용합니다.
• 프로젝트의 구조에 따라서 적합한 아키텍처 패턴을 사용한다면 유동적인 데이터 바인딩이 가능할 것 같습니다.