금일 기술면접을 진행하면서 내가 답하지 못한 질문이었다.
'React에서 View가는 일련의 과정을 설명해주세요.' 순간 나는 MVC패턴을 물어보는 질문이었을까? 생각했지만 막상 당황스러웠고 답변을 하지 못하였다. 그래서 동기들과 후기를 공유하는 도중에 동기 한명이 MVVM패턴이었을 것이라고 내용을 간단히 알려주었다.

사실 React를 하면서 자세히 다루지 못한 내용이어서 이번기회에 다뤄보려고 한다.

MVVM패턴?

MVVM패턴 사실 생소한 용어였다. 내가 부트캠프 안에서 배운 패턴은 MVC패턴이 전부였는데...
MVC패턴과 무엇이 달랐을까..

MVVM 패턴은 Model-View-ViewModel의 약자로서 프론트엔드에서 자주 사용되는 패턴이다.
어플리케이션 로직과 UI를 분리하기 위해 설계된 패턴으로, UI를 가지는 응용 프로그램을 위한 아키텍처 패턴이라고 보면 된다.

• Model은 프로그램에서 사용되는 실제 데이터이며, 불러오거나(Query) 업데이트하는 로직이다.
  일종의 두뇌와 같은 역할을 한다.

• View는 사용자가 상호 작용하는 UI 계층으로, 쉽게 말하자면 유저가 보는 화면을 의미한다.
  비즈니스 로직보다는 UI에 연관된 로직만 수행한다.

• ViewModel은 모델에 액세스하고 비즈니스 로직을 처리한다.

MVVM vs MVC -> 차이점은?

기존 MVC(Model - View - Controller) 구조에서는 액티비티가 컨트롤러의 역할을 했으며, 뷰와 연결되어 유저와 상호작용도 하고, 모델과 연결되어 데이터도 처리했다.
즉 뷰와 모델 사이에서 중재자 역할을 했다.

MVVM에서는 뷰에서 뷰모델로, 뷰모델에서 모델로 작업을 처리하며, 뷰에서 모델을 직접 참조하지 않는다. 대신 뷰에서 뷰모델을 관찰하며 데이터의 변경 사항을 감지한다.

View

View는 철저히 보여지는 것에 대한 것을 수행한다.
화면에 무엇을 그릴지 결정하고, 사용자와 상호작용한다.
보통 데이터의 변화를 감지하기 위한 옵저버를 가지고 있다.

ViewModel

ViewModel은 일반적으로는 JavaScript 클래스로 구성돠어 UI에 따라 다르게 조정하여 어디서나 쉽게 재사용 할 수 있다.
ViewModel에 필요한 모든 종속성은 생성자를 통해 주입되므로 테스트하기가 쉽다.

모든 View와 관련된 비즈니스 로직은 이 곳에 들어가게 되며 데이터를 잘 가공해서 View에서 뿌리기 쉬운 Model로 바꾸는 역할을 한다.

Model

모델이 데이터 소스 역할을 한다.
응용 프로그램의 글로벌 저장소. 네트워크 계층, 데이터베이스, 서비스의 모든 데이터를 작성하여 쉽게 제공해준다. 실제로 모델을 업데이트하고 부작용이 없는 로직을 제외한 다른 로직은 없어야 한다.

MVVM의 장점?

Model과 View 사이, ViewModel과 View 사이의 의존성이 없으므로 유닛 테스트가 더 쉽다.
MVP패턴에서처럼 테스트를 위한 가상 뷰를 만들 필요 없이, 테스트할 때 모델이 변경되는 시점에 옵저버블(관찰) 변수가 제대로 설정됐는지 확인하면 된다.

Databinding 라이브러리를 이용함으로써 서로 간의 의존성을 낮추고, 유닛 테스트를 더욱 쉽게 작성할 수 있고 UI 코드는 네이티브 코드에 관여하지 않아도 된다.

각각의 부분은 독립적이기 때문에 모듈화 하여 개발할 수 있다.

사실 MVC를 배우면서 MVP, MVVVM이 있다는것만 알았는데 이번 면접을 계기로 제대로 통수를 한번 맞고 공부를 하게되었다. 프론트엔드 개발자라면서 알아야할 내용을 숙지 못했던 점을 반성하며 TIL을 마친다. 조금 더 공부하자!