MVC란?
모델은 소프트웨어 내에서 데이터를 의미하고, 뷰는 사용자에게 보이는 화면 내용을 의미한다. 이러한 모델과 뷰의 상호 작용을 관리하는 것이 컨트롤러이다.
예를 들어, 사용자의 입력이 컨트롤러로 들어오면 컨트롤러는 모델에서 데이터를 불러오고, 해당 데이터를 뷰를 통해 화면으로 출력한다. 모델, 뷰, 컨트롤러가 기능별로 독립적으로 분리되어 있어서 여러 명의 개발자가 동시에 각각의 기능을 개발할 수 있고, 일부 기능이 추가될 경우도 기존의 구성 요소를 재사용할 수 있어 코드 재사용성이 향상된다.
노르웨이 컴퓨터 과학자인 트리베 린스카우그(Trygve Reenskaug)가 1970년대에 최초로 MVC 개념을 제안하였다. 당시에는 PC용 소프트웨어를 개발하기 위한 모델로 제시되었지만, 현재는 웹 애플리케이션을 개발하는 데에도 상당히 많이 사용된다.
[네이버 지식백과] 모델 · 뷰 · 컨트롤러 [Model-View-Controller] (IT용어사전, 한국정보통신기술협회)
MVC
MVC (모델-뷰-컨트롤러) 는 사용자 인터페이스, 데이터 및 논리 제어를 구현하는데 널리 사용되는 소프트웨어 디자인 패턴이다. 소프트웨어의 비즈니스 로직과 화면을 구분하는데 중점을 두고 있다. 이러한 "관심사 분리" 는 더나은 업무의 분리와 향상된 관리를 제공한다. MVC 에 기반을 둔 몇 가지 다른 디자인 패턴으로 MVVM (모델-뷰-뷰모델), MVP (모델-뷰-프리젠터), MVW (모델-뷰-왓에버) 가 있습니다.
MVC 소프트웨어 디자인 패턴의 세 가지
모델: 데이터와 비즈니스 로직을 관리합니다.
뷰: 레이아웃과 화면을 처리합니다.
컨트롤러: 명령을 모델과 뷰 부분으로 라우팅합니다.
모델 뷰 컨트롤러 예시
간단한 쇼핑 리스트 앱이 있다고 상상해봅시다. 우리가 원하는 것은 이번 주에 사야할 각 항목의 이름, 개수, 가격의 목록이다.
모델
모델은 앱이 포함해야할 데이터가 무엇인지를 정의한다. 데이터의 상태가 변경되면 모델을 일반적으로 뷰에게 알리며(따라서 필요한대로 화면을 변경할 수 있다) 가끔 컨트롤러에게 알리기도 한다(업데이트된 뷰를 제거하기 위해 다른 로직이 필요한 경우).
다시 쇼핑 리스트 앱으로 돌아가서, 모델은 리스트 항목이 포함해야 하는 데이터 — 품목, 가격, 등. — 와 이미 존재하는 리스트 항목이 무엇인지를 지정한다.
뷰
뷰는 앱의 데이터를 보여주는 방식을 정의한다.
쇼핑 리스트 앱에서, 뷰는 항목이 사용자에게 보여지는 방식을 정의하며, 표시할 데이터를 모델로부터 받는다.
컨트롤러
컨트롤러는 앱의 사용자로부터의 입력에 대한 응답으로 모델 및/또는 뷰를 업데이트하는 로직을 포함한다.
예를 들어, 쇼핑 리스트는 항목을 추가하거나 제거할 수 있게 해주는 입력 폼과 버튼을 갖는다. 이러한 액션들은 모델이 업데이트되는 것이므로 입력이 컨트롤러에게 전송되고, 모델을 적당하게 처리한다음, 업데이트된 데이터를 뷰로 전송한다.
단순히 데이터를 다른 형태로 나타내기 위해 뷰를 업데이트하고 싶을 수도 있다(예를 들면, 항목을 알파벳순서로 정렬한다거나, 가격이 낮은 순서 또는 높은 순서로 정렬). 이런 경우에 컨트롤러는 모델을 업데이트할 필요 없이 바로 처리할 수 있다.
웹에서의 MVC
웹 개발자로써, 여러분이 이 패턴을 이전에 의식적으로 사용한 적이 없더라도 아마 상당히 친숙할것이다. 여러분의 데이터 모델은 아마 어떤 종류의 데이터베이스에 포함되어있었을 것이다(MySQL 과 같은 전통적인 서버 사이드 데이터베이스, 또는 IndexedDB 같은 클라이언트 사이드 솔루션). 여러분의 앱의 제어 코드는 아마 HTML/JavaScript 로 작성되었을 것이고, 사용자 인터페이스는 HTML/CSS 등 여러분이 선호하는 것들로 작성되었을 것 이다. 이는 MVC 와 아주 유사하게 들리지만, MVC 는 이러한 컴포넌트들이 더 엄격한 패턴을 따르도록한다.
웹의 초창기에, MVC 구조는 클라이언트가 폼이나 링크를 통해 업데이트를 요청하거나 업데이트된 뷰를 받아 다시 브라우저에 표시하기 위해 대부분 서버 사이드에서 구현되었다. 반면, 요즘에는, 클라이언트 사이드 데이터 저장소의 출현과 필요에 따라 페이지의 일부만 업데이트를 허용하는 XMLHttpRequest 를 포함해 더 많은 로직이 클라이언트 사이드에 추가되었다.
