MVC 패턴

#개발

 

기존에는 MVC 패턴이 그저 스프링 개발 시에 웹의 기능을 분리해주기 위해 사용하는 '특정한' 디자인 패턴인 줄 알았습니다. 웹 개발 시에 사용하는 디자인 패턴 정도로 생각이 갇혀있던 겁니다. 근데, 우테코 6기 '코딩해듀오' 팀 분들의 페어 프로그래밍 행사에 참여했다가 MVC(Model-View-Controller) 패턴에 대한 생각이 확장되었습니다.

 

그래서 다시 한번 MVC를 정리해보고자 이 글을 작성합니다.

 

MDN의 정의

MVC는 사용자 인터페이스, 데이터 및 논리 제어를 구현하는데 널리 사용되는 소프트웨어 디자인 패턴입니다. 소프트웨어의 비즈니스 로직, 화면을 구분하는데 중점을 두며, 이러한 '관심사 분리'로 더 나은 업무의 분리와 향상된 관리를 제공합니다.

 

즉, 어플리케이션을 모델, 뷰, 컨트롤러라는 세 가지의 역할로 분리하여 개발 또는 유지보수 프로세스에서 각각의 역할에만 집중할 수 있도록 만들어진 디자인 패턴을 의미합니다.

 

 

작동 방식

사용자가 컨트롤러를 조작하며, 모델을 통해서 데이터를 가져오거나 저장하고, 뷰를 제어하여 모델의 정보를 바탕으로 사용자에게 시각적인 형태로 전달하는 로직으로 이루어져 있습니다.

 

모델

모델은 애플리케이션에서 데이터인 데이터베이스, 상수, 변수와 비즈니스 로직을 관리합니다.

 

예를 들어, 쇼핑 리스트 앱이 있다면 리스트 항목이 포함해야 하는 품목, 가격, 글자 크기, 위치, 포맷 등에 관한 정보를 모두 가지고 있어야 합니다. 뷰에서 데이터를 생성하거나 수정하면 컨트롤러를 통해 모델을 생성하거나 갱신합니다. 이때, 모델이 직접 자기가 가진 데이터를 조작하여 처리합니다.

 

뷰

뷰는 앱의 데이터를 보여주는 방식을 정의합니다. 즉, 모델을 기반으로 사용자가 볼 수 있는 화면을 의미합니다. 표시할 데이터를 모델로부터 받으며 모델의 정보를 따로 저장하지 않아야 합니다. 또한, 변경이 일어나면 컨트롤러에 이를 전달해야 합니다.

 

컨트롤러

컨트롤러는 하나 이상의 모델과 하나 이상의 뷰를 잇는 다리 역할을 합니다. 즉, 앱의 사용자로부터의 입력에 대한 응답으로 모델 및 뷰를 업데이트 하는 로직을 포함합니다. 또한, 모델과 뷰의 생명 주기도 관리합니다.

 

예를 들어, 쇼핑 리스트 앱에서 항목을 추가하는 버튼을 클릭하면 컨트롤러가 이러한 입력을 받아 모델을 처리하고, 업데이트 된 데이터를 뷰로 전송합니다. 또는, 항목을 정렬하는 경우처럼 뷰에 대해 직접 처리할 수도 있습니다.