MVC 패턴

MVC 패턴은 모델(Model), 뷰(View), 컨트롤러(Controller)로 이루어진 디자인 패턴이다.

MVC패턴 구성도

구성 요소를 세 가지 역할로 구분하여 개발에서 각각의 구성 요소로만 개발할 수 있다. 

 

MVC 패턴은 각 부분이 별도의 컴포넌트로 분리되어 있어서 서로 영향을 받지 않고 개발 작업 수행 가능

MVC 패턴은 컴포넌트를 분리하며 코드의 효율적인 재사용을 가능하게 하고, 여러 개의 뷰가 있어야 하는 대화형 애플리케이션 구축에 적합하다.

 

 ● 모델

모델(Model)은 애플리케이션의 데이터인 데이터베이스, 상수, 변수를 말한다. 

예를 들어 박스 안에 글자가 들어 있다면 그 박스 위치 정보, 글자 내용, 글자 위치, 글자 포맷에 관한 정볼르 모두 가지고 있어야 한다. 뷰에서 데이터를 생성하거나 수정하면 컨트롤러를 통해 모델을 생성하거나 갱신한다.

 

● 뷰

뷰(View)는 inputbox, checkbox, textarea 등 사용자 인터페이스 요소를 나타낸다. 즉, 모델을 기반으로 사용자가 볼 수 있는 화면(UI)을 뜻한다. 모델이 가지고 있는 정보를 따로 저장하지 않아야 하며 단순히 사각형 모양 등 화면에 표시하는 정보만 가지고 있어야 한다. 또한 변경이 일어나면 컨트롤러에 이를 전달해야 한다.

 

● 컨트롤러

컨트롤러(Controller)는 하나 이상의 모델과 하나 이상의 뷰를 있는 다리 역할을 하며 이벤트 등 메인 로직을 담당한다. 또한 모델과 뷰의 생명주기도 관리하며 모델이나 뷰의 변경 통지를 받으면 이를 해석하여 각각의 구성 요소에 해당 내용에 대해 알려준다.

 

MVC패턴의 장점에는

1) 가독성과 코드의 재사용이 증가한다.

2) 개발 후에도 유지보수성과 확장성이 용이하다.

 

단점에는 애플리케이션이 복잡해질수록 모델과 뷰의 관계가 복잡해진다.

 

MVC 패턴의 한계

: MVC 패턴에서 View는 Controller에 연결되어 화면을 구성하는 단위 요소이므로 다수의 View를 가질 수 있다. 그리고 Model은 Controller를 통해서 View와 연결되지만 Controller에 의해서 하나의 View에 연결될 수 있는 Model도 여러 개가 될 수 있어 View와 Model도 여러 개가 될 수 있어 View와 Model이 서로 의존성을 띄게 된다. 즉 Controller에 다수의 Model 과 View가 복잡하게 연결되어 있는 상황이 발생할  수 있다.

 

MVC 패턴의 예시

 

Python django

리액트 로고

MVC 패턴을 이용한 대표적인 라이브러리로는 리액트(React.js)가 있다. 리액트는 유저 인터페이스를 구축하기 위한 라이브러리이다. '가상Dom'을통해 실제 DOM을 조작하는 것을 추상화해서 성능을 높였다.

 

대표적인 특성으론 불변성이 있다. 예를 들어 state는 setState를 통해서만 수정이 가능하고, props를 기반으로 해서 만들어지는 컴포넌트인 pureComponent가 있다. 단방향 바인딩이 적용되어 있고, 자유도가 높고, 메타(페이스북)가 운영하고 있으며 넷플릭스, 트위터, 드롭박스, 우버, 페이팔, 마이크로소프트 등에서 사용된다.

 

props, pureComponent 등 용어는 https://goddaehee.tistory.com/300 에 자세하게 나와있다.