개발/디자인패턴

[Design Pattern] MVVM 아키텍처 패턴

도넛의용기 2023. 5. 22. 04:30

이 글에서는 안드로이드 애플리케이션을 개발할 때 사용되는 현대적인 아키텍처 패턴 중 하나인 MVVM(Model-View-ViewModel) 패턴에 대해 알아보겠습니다.

목차
1. 소개
2. MVC와 MVP 패턴의 한계
3. MVVM 패턴 이해하기
4. MVVM 구성 요소
5. MVVM 장점

1. 소개
안드로이드 애플리케이션 개발을 위한 아키텍처 패턴 중 하나인 MVVM(Model-View-ViewModel) 패턴은 애플리케이션의 유지 보수성, 확장성 및 테스트 용이성을 향상시키는 데 도움이 됩니다. 이 글에서는 MVVM 패턴의 기본 개념과 구성 요소, 장점에 대해 알아보고 간단한 예제를 통해 실제로 어떻게 작동하는지 살펴보겠습니다.

2. MVC와 MVP 패턴의 한계
전통적인 아키텍처 패턴인 MVC(Model-View-Controller)와 MVP(Model-View-Presenter)는 각각 모델, 뷰, 컨트롤러 및 프리젠터를 사용하여 애플리케이션의 구성 요소를 분리합니다. 하지만 이러한 패턴들은 안드로이드 애플리케이션 개발에 완벽하게 적합하지 않으며, 뷰와 프리젠터 간의 결합도가 높아져 유지 보수와 테스트가 어려울 수 있습니다.

3. MVVM 패턴 이해하기
MVVM 패턴은 Model, View, ViewModel의 세 가지 구성 요소로 구성됩니다. 이 패턴은 뷰와 비즈니스 로직을 분리하여 결합도를 낮추고, 데이터 바인딩을 통해 뷰와 뷰모델 간의 상호작용을 자동화합니다.

4. MVVM 구성 요소
- Model: 애플리케이션의 데이터와 비즈니스 로직을 담당합니다.
- View: 사용자 인터페이스(UI)를 구성하고 사용자와 상호작용합니다.
- ViewModel: 뷰와 모델 사이의 연결 역할을 담당하며, 데이터를 처리하고 뷰에 필요한 형태로 변환합니다.

예를 들어, 안드로이드에서 MVVM 패턴을 이용하여 TODO 앱을 만들기 위해서는 다음과 같은 코드를 작성할 수 있습니다.

// Model 클래스
data class TodoItem(
    val title: String,
    val description: String,
    val isCompleted: Boolean = false
)

// ViewModel 클래스
class TodoViewModel : ViewModel() {
    private val _todoList = MutableLiveData<List<TodoItem>>()
    val todoList: LiveData<List<TodoItem>> = _todoList

    fun addTodoItem(item: TodoItem) {
        _todoList.value = _todoList.value.orEmpty().plus(item)
    }

    fun toggleTodoItemCompletion(item: TodoItem) {
        _todoList.value = _todoList.value.orEmpty().map {
            if (it == item) {
                it.copy(isCompleted = !it.isCompleted)
            } else {
                it
            }
        }
    }
}

// View 클래스
class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding
    private val viewModel by viewModels<TodoViewModel>()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        val adapter = TodoListAdapter {
            viewModel.toggleTodoItemCompletion(it)
        }
        binding.todoList.adapter = adapter

        viewModel.todoList.observe(this) {
            adapter.submitList(it)
        }

        binding.addTodoButton.setOnClickListener {
            val title = binding.todoTitleEditText.text.toString()
            val description = binding.todoDescriptionEditText.text.toString()
            val item = TodoItem(title, description)
            viewModel.addTodoItem(item)

            binding.todoTitleEditText.text.clear()
            binding.todoDescriptionEditText.text.clear()
        }
    }
}

위의 코드는 안드로이드에서 MVVM 패턴을 이용하여 TODO 앱을 만들기 위한 예시입니다. Model 클래스는 TodoItem이라는 데이터 클래스로 구현되어 있고, ViewModel 클래스는 TodoViewModel이라는 클래스로 구현되어 있습니다. View 클래스는 MainActivity라는 클래스로 구현되어 있습니다.

ViewModel 클래스에서는 LiveData를 이용하여 데이터를 관리하고, View 클래스에서는 해당 데이터를 바인딩하여 화면에 표시합니다. 또한, View 클래스에서는 사용자 입력을 받아 ViewModel 클래스에 전달하여 데이터를 업데이트합니다.

이와 같이 MVVM 패턴을 이용하여 TODO 앱을 만들 수 있습니다.



5. MVVM 장점
- 뷰와 비즈니스 로직의 분리로 인해 유지 보수성이 향상됩니다.
- 데이터 바인딩을 사용하여 뷰와 뷰모델 간의 결합도를 낮춥니다.
- 뷰모델이 뷰에 대해 알지 못하므로, 테스트 용이성이 향상됩니다.

'개발 > 디자인패턴' 카테고리의 다른 글

[Design Pattern] View Model of MVVM  (1) 2023.07.27
[Design Pattern] Factory 패턴  (0) 2023.05.25
[Design Pattern] Builder 패턴  (6) 2023.05.25
[Design Pattern] Adapter 패턴  (0) 2023.05.25