[소프트웨어 아키텍쳐] MVVM 패턴

1. 정의

MVVM 패턴은 Model View ViewModel의 약자인 소프트웨어 아키텍쳐 패턴 중 하나이다.

 

 

 

2. MVVM의 탄생 배경

MVVM의 구조를 설명하기 전 다른 소프트웨어 아키텍쳐 패턴인 MVC(Model View Controller)의 계층 관계에 대해서 알아보자.

Model 계층은 사용자에게 요청을 받고 및 응답을 하는 과정에서 일어나는 비즈니스 로직을 담당하는 계층으로 데이터에 대한 구조들을 변경 및 관리하는 역할을 담당하여 View 계층에게 업데이트 사항들을 전달한다.

View 계층은 사용자 단의 측면에서 데이터 시각화(UI와 같은) 및 상호작용을 담당하여 Model 계층에게 받은 업데이트 사항들을 반영한다.

그리고 이 두 계층 간 Controller 계층이 요청이나 응답에 따라 적절하게 중재하는 역할을 담당한다.

다만, 이러한 패턴의 문제는 Model과 View 계층간의 의존성이 생긴다는 것으로 사이트의 규모가 점차 커짐에 따라 역할 분리의 한계점이 명확한 단점을 지닌다. 따라서 이러한 문제를 해결하기 위한 다양한 소프트 아키텍쳐 패턴 중 하나가 MVVM 패턴이다.

 

 

 

3. MVVM의 패턴 구조

MVVM의 패턴은 MVC에서 Controller 계층을 제외하고 Model과 View 계층 사이에서 View Model 계층을 도입한 패턴이다.

View Model 계층이 하는 역할은 View에서 사용자의 명령을 전달받아 Model에게 데이터를 요청한 뒤 업데이트 된 사항들을 다시 전달받고 이를 가공 및 저장한다.

이로인해 기존의 View와 Model 계층간의 의존성이 없어 서로간의 역할이 명확해지기 때문에 개발의 난이도가 상대적으로 쉬워지고 또한 테스트에 있어서도 서로간의 간섭을 최소화하며 충분한 과정을 거칠 수 있다.

 

 

 

4. 데이터 바인딩

MVVM에서의 데이터 바인딩(Data Binding)은 View Model 계층에서 데이터가 저장될 때 이 기능으로 View 계층에도 자동으로 업데이트되어 데이터의 일관성을 유지하는 기능을 가진다.

데이터 바인딩이 적용된 예시 중 하나인 React의 코드를 통해 해당 기능이 어떻게 이루어지는지 알아보자.

import {useState} from 'React';

function App() {
    const [number, setNumber] = useState(0);
    
    const onClick = () => {
    	setNumber(number + 1);
    }
	
    return (
   	<div>
        	<button onClick={onClick}>{number}</button>
        </div>
    );
}

export default App;

이 코드에 의하면 button을 클릭함으로써 onClick이라는 이벤트를 통해(익명함수 형태로) useState에 따른 상태값을 변화시켜 값이(데이터) +1 증가함을 알 수 있다.

여기서 onClick이 하는 역할이 바로 데이터 바인딩이다.

이러한 원리는 리액트가 렌더링을 하는 과정에서 자바스크립트의 로직을 통해 HTML로 값의 업데이트 사항을 단방향으로 전달하는 것으로 View Model의 시점에서 역할을 수행한다고 볼 수 있다.