MVC

in CS on Design Pattern, Mvc


MVC 디자인 패턴

MVC

MVC는 Model-View-Controller로, 사용자 인터페이스, 데이터/논리 제어를 구현하는데 널리 사용되는 소프트웨어 디자인 패턴이다.

디자인 패턴은 소프트웨어를 개발할 때 공통적으로 발생하는 문제에 대해 재사용 가능한 방법이다.

MVC는 비즈니스 로직과 화면을 구분하는데 중점을 두고 있다. MVC에 기반한 다른 디자인 패턴에는 MVVM(Model-View-ViewModel), MVP(Model-View-Presentor), MVC(Model-View-Whatever)가 있다.

MVC 소프트웨어 디자인 패턴의 세 구성 요소는 다음과 같다.

  1. Model : 데이터, 비즈니스 로직을 관리한다.
  2. View : 화면, 레이아웃을 관리한다.
  3. Controller : Model이나 View에 명령을 보낸다.

image

위 그림은 Model, View, Controller가 어떤 역할을 맡아 상호작용하는지를 보여준 것이다.

Model

모델은 앱이 가져야 할 데이터를 정의한다. 데이터가 변경됨에 따라 뷰에게 이를 알려서 화면을 변경할 수 있고, 컨트롤러에게 알려서 업데이트 된 뷰를 제거하는 등의 작업을 할 수 있다.

예시를 들면 쇼핑 앱의 모델에서 장바구니에 새로운 상품 데이터가 추가되면, 뷰에게 이를 알려 뷰가 업데이트된 상품 목록을 보여줄 수 있게 해줄 수 있다.

View

뷰는 앱이 데이터를 보여주는 방식, UI를 정의한다. 모델에게서 화면에 출력할 데이터를 받는다.

예를 들어 쇼핑 앱에서 뷰는 장바구니 목록을 보여주기 위해 모델에서 상품 리스트 목록과 이미지 url 정보 등을 받아 이를 화면에 목록형으로 보여줄 것이다.

Controller

컨트롤러는 사용자 입력에 대한 응답으로 모델/뷰를 업데이트하는 로직을 포함한다.

쇼핑 앱을 다시 예시로 들면 뷰에서는 장바구니에 상품을 추가하거나 삭제할 수 있는 버튼이 있을 것이고, 사용자가 이를 누를 수 있다. 이를 누르면 컨트롤러에게 전달되어 모델을 적절하게 처리하고, 업데이트된 데이터를 다시 뷰에 전달 할 수 있다.

뷰에 들어온 사용자 입력이 꼭 모델을 업데이트할 필요가 있는 경우가 있는 것은 아니다. 가령 뷰에 나타난 상품 목록을 특정 조건(이름순, 인기순)에 맞게 정렬하고 싶다면 모델을 업데이트 할 필요 없이 컨트롤러 단에서 정렬 후 이를 뷰에 반영하면 된다.

그래도 헷갈린다 하면 MVC를 단번에 이해하기 쉬운 예시가 있다. 바로 바(bar)다.

바에 가면 술을 시킬 것이다. 나는 사용자고, 내가 한 주문은 사용자 요청(위 쇼핑 앱에서의 예시에서는 장바구니에 상품을 추가하는 등의 요청)이 된다.

술을 시키면 바텐더는 주문을 받아 술을 만들 것이다. 바텐더의 두뇌는 컨트롤러다. 내가 술 이름을 말하면, 바텐더가 알아들을 것이고 술을 만들기 시작할 것이다. 바텐더는 바에 있는 도구들과 술 등을 사용해서 술을 만들 것이다.

이 도구들과 술이 모델이 된다. 술이 다 만들어지면 바텐더는 술을 나에게 준다. 내가 본 잘 만들어진 술과 이를 마시는 건 뷰에 해당한다.

이 과정을 통해 MVC의 세 요소의 역할과 각각이 어떻게 상호작용하는지를 바로 이해할 수 있다. 웹 개발에서 MVC를 사용한다면?

  • 사용자가 request를 보낸다. (/home url을 주소창에 친다.)
  • Controller가 요청을 받고 관련 명령을 내린다. 이 명령은 view를 업데이트 해서 새로운 페이지를 보여줄 수도 있고, model을 업데이트하는 작업이 될 수도 있다. (모델이 업데이트 되는 명령이라고 가정해보자.)
  • 모델은 controller의 명령에 따라 특정 작업을 거쳐 반환된다.
  • Controller는 받은 데이터를 view에 보내 사용자 인터페이스를 업데이트한다.

한 줄 요약

MVC 패턴은 Model-View-Controller의 약자로 사용자 인터페이스와 데이터와 관련된 로직을 구현하는데 널리 사용되는 디자인 패턴이다. 비즈니스 로직과 화면을 구분하는 것이 목적이다.

  • 출처
  • https://developer.mozilla.org/ko/docs/Glossary/MVC
  • https://medium.com/free-code-camp/model-view-controller-mvc-explained-through-ordering-drinks-at-the-bar-efcba6255053