MVC 패턴의 기본 개념

• MVC란 Model, View, Controller의 약자로 화면을 다루는 로직과 데이터를 다루는 로직의 성격이 달라 Model과 View간의 의존관계를 최소화하고 각 영역에서의 변경이 서로에게 영향을 주지 않도록 분리시킨 패턴이다.

Model

• 모델이란 데이터 모델로 DB에서 받아온 데이터 혹은 API 등으로 가져온 JSON이나 JS Object 등이 될 수 있다.

View

• View란 HTML과 CSS로 렌더링 되는 화면, 즉 UI를 말한다.

Controller

• Model의 데이터를 받아 View가 화면에 그리고 다시 사용자의 동작을 받아 Model을 변경하게 해주는 것이 Controller이다. Model과 View사이의 중간 역할을 한다.
  
  
  예시로 따져보면 JS 프로젝트를 모듈로 나누어

• Model 부분에는 JS Object나 state 혹은 state조작 및 서버에서 받아온 데이터를 정제하는 로직등이 포함되어 있어야 한다.

• View 부분에는 화면에 렌더링하는 코드와 DOM을 가져오고 조작하는 로직이 있어야한다. 주로 render() 함수가 위치한다.

• Controller에는 사용자가 동작을 했을 때 감지를 하여 Model을 변경해 View의 render를 호출하거나 View의 render를 호출해 화면을 변경하는 이벤트 리스너와 핸들러 등이 온다.

• 이 때 렌더링과 관련된 DOM을 fetch하여 조작하는 로직은 최대한 View 내부에 위치해야하고 state를 가져오고 조작하고 설정하는 등의 로직과 state 자체는 Model 내부에 위치하여 외부로 노출되면 안된다.

MVC 패턴의 발전 과정

jquery 시절 MVC

• Model: Ajax로 부터 받아온 데이터
• View: HTML과 CSS로 만들어지는 화면
• Controller: 중간에서 서버의 데이터를 받아 화면을 바꾸고 이벤트를 처리해서 서버에 데이터를 전달하는 JavaScript

MVVM 아키텍쳐 (Angular, React, Vue)

• Model이 변하면 View를 수정하고 View에서 이벤트를 받아서 Model를 변경한다는 Controller의 역할은 그대로 인데 이를 구현하는 방식이 jQuery와 같은 DOM 조작에서 템플릿과 바인딩을 통한 선언적인 방법으로 변하게 되었다.

• DOM을 쿼리하여 가져오고 조작하는 로직이 사라지고 이를 프레임워크가 대신 담당하게 되었고 데이터와 비즈니스 로직을 만들어 프레임워크에 전달하면 알아서 그려준다.

• View를 그리는 Model만 다루게 되었다는 의미로 ViewModel이라고 부르며 이 방식을 MVVM이라고 부른다.

• 기존 MVC에서 컨트롤러의 반복적인 기능이 선언적인 방식으로 개선이 되고 Model과 View의 관점을 분리하려 하지 않고 하나의 템플릿으로 관리하려는 방식으로 발전했다.

FLUX 패턴

• MVVM이 화면단위가 아니라 조금 더 작게 재사용 할 수 있는 단위로 만들어서 조립을 하는 방식인 Component 패턴으로 발전

• 비지니스 로직이 들어가게 되면 컴포넌트의 재활용성은 상당히 떨어지게 되므로 컴포넌트는 재사용이 가능해야 한다는 원칙에 따라 가급적 비지니스 로직을 포함시키지 않음

• 비즈니스 로직을 관장하고 있는 컴포넌트를 Container 컴포넌트라 그러고 혹은 이제 비지니스 로직을 가지고 있지 않은 데이터만 뿌려주는 형태의 컴포넌트를 Presenter 컴포넌트로 분리하여 최상단 혹은 1depth에 Container를 두고 비지니스 로직을 관리하는 Container-Presenter 아키텍쳐가 만들어짐

• 하지만 이는 하위 컴포넌트에게 props를 전달하려면 전달 과정에 있는 중간 컴포넌트들까지 props를 들고 있어야하는 Props Drilling Problem이 발생한다.

flux 패턴 개요
FLUX 패턴은 View를 각각의 MVC 컴포넌트 관점으로 보는 것이 아니라 하나의 큰 View로 이해하고 View에서는 Dispatch를 통해서 Action을 전달하면 Action은 Reducer를 통해서 Data가 Store에 보관이 되고 Store에 들어있는 데이터는 다시 View로 연결이 되는 방식을 지향합니다. 기존의 컴포넌트 단위의 MVC개념에서 완전히 비지니스 로직과 View를 분리하면서 이 분리된 개념을 **상태관리(State Management)라고 부르게 됩니다.

• 공통적으로 사용되는 비지니스 로직의 Layer와 View의 Layer를 완전히 분리되어 상태관리라는 방식으로 관리한다.

• 각각의 독립된 컴포넌트가 아니라 하나의 거대한 View 영역으로 간주한다.

• 둘 사이의 관계는 Action과 Reduce라는 인터페이스로 분리한며 Controller는 이제 양방향이 아니라 단반향으로 Cycle을 이루도록 설계한다.

그 이후...

• Mobx, MVI, MVW, Context, Recoil, React-Query, etc...