♈️ MVVM 패턴

MVVM 패턴은 MVC의 C에 해당하는 컨트롤러가 뷰모델(view model)로 바뀐 패턴입니다.

 

뷰모델은 뷰를 위한 전담 매니저라고 생각할 수 있습니다. 뷰가 무엇을 보여줘야 할지, 사용자가 어떤 행동을 할지 미리 다 알고 준비해주는 전문적인 역할입니다. MVVM 패턴은 MVC 패턴과는 다르게 커맨드와 데이터 바인딩을 가지는 것이 특징입니다. 뷰와 뷰모델 사이의 양방향 데이터 바인딩을 지원하며 UI를 별도의 코드 수정 없이 재사용할 수 있고 단위 테스팅하기 쉽다는 장점이 있습니다.

---

🪄  MVVM 패턴의 예 : 뷰

MVVM 패턴을 가진 대표적인 프레임워크로는 뷰(Vue.js)가 있습니다. Vue.js는 데이터가 변경될 때마다 화면이 알아서 반응하여 업데이트되는 반응형(reactivity)이 특징인 프런트엔드 프레임워크입니다.

• watch, computed 같은 기능으로 데이터의 변경을 실시간으로 감지하고 연결된 다른 데이터를 자동으로 계산해줍니다.
• 양방향 바인딩 덕분에, 사용자가 입력창에 글자를 쓰는 순간(View의 변경) 데이터(ViewModel)가 즉시 바뀌고, 코드에서 데이터를 바꾸면 화면의 내용(View)도 즉시 바뀝니다.
• 재사용 가능한 컴포넌트(부품) 단위로 화면을 조립하기 때문에 만들고 관리하기가 매우 편리합니다.

 

• 용어 설명:
  • 커맨드: 여러 가지 요소에 대한 처리를 하나의 액션으로 처리할 수 있게 하는 기법으로 예를 들면 결제하고, 포인트 적립하고, 영수증 주세요를 '결제하기'라는 하나의 명령(커맨드)으로 묶어서 처리하는 방식
  • 데이터 바인딩: 화면에 보이는 데이터와 웹 브라우저의 메모리 데이터를 일치시키는 기법으로, 뷰모델을 변경하면 뷰가 변경됨

---

 

1. MVVM 패턴은 무엇인가요?

 

MVVM 패턴은 모델, 뷰, 뷰모델로 구성된 디자인 패턴으로, 특히 UI 관련 로직을 효과적으로 분리하기 위해 고안되었습니다. MVC의 컨트롤러 대신 뷰모델이 그 역할을 하는데, 여기서 뷰모델은 뷰를 위한 전담 매니저라고 생각할 수 있습니다. 뷰에 표시되어야 할 데이터와 뷰에서 사용될 로직을 모두 가지고 뷰를 관리하는 전문적인 역할입니다. MVVM의 가장 큰 특징은 데이터 바인딩과 커맨드 개념입니다. 또한 뷰와 뷰모델 사이의 양방향 데이터 바인딩을 지원하며 뷰는 순수하게 보여주는 역할에만 집중할 수 있게 됩니다. 그 결과, UI 로직과 비즈니스 로직이 완벽하게 분리되어 단위 테스트가 매우 쉬워지고, UI 코드를 수정하지 않고도 재사용하기 용이하다는 강력한 장점을 가집니다.

 

2. 데이터바인딩에 대해 설명해주세요.

 

데이터 바인딩은 뷰의 데이터와 내부 로직의 데이터 모델을 자동으로 동기화하는 기법입니다. 조금 더 구체적으로 설명하자면, 개발자가 직접 UI 요소를 찾아다니며 값을 변경하는 코드를 작성할 필요 없이, 데이터 모델의 값이 바뀌면 UI가 알아서 업데이트되는 것을 의미합니다. 이러한 데이터 바인딩을 통해 개발자는 UI 업데이트에 신경 쓰지 않고 비즈니스 로직에만 집중할 수 있어 코드의 양이 줄고 데이터의 일관성을 유지하기 쉬워집니다.