MVC 패턴

CS 공부를 하다보면, MVC 패턴에 대해 들어본 경험이 있으실 겁니다.

이는 무엇이며, 어떠한 역할을 하는지 알아봅시다!

 

---

1. MVC 패턴

MVC 패턴은 SW 디자인 패턴 중 하나로, 애플리케이션을 세 가지 주요 컴포넌트인 모델(Model), 뷰(View), 컨트롤러(Controller)로 분리하여, 구성하는 방법입니다.

이 패턴은 애플리케이션의 유지보수와 확장을 쉽게 하고, 코드의 재사용성을 높이며, 역할을 분리하여 개발 효율성을 향상시키는 데 목적이 있습니다.

 

---

2. 컴포넌트

그러면, 각 컴포넌트의 역할에 대해 알아봅시다.

 

1) 모델(Model)

모델은 애플리케이션의 데이터와 비즈니스 로직을 담당해요.

DB와의 상호작용, 데이터 검증, 데이터 처리 등의 작업을 수행합니다.

뷰 or 컨트롤러에 의존하지 않으며, 데이터 상태 변화를 관리합니다.

 

2) 뷰(View)

뷰는 사용자 인터페이스(UI)를 담당해요.

모델의 데이터를 사용자에게 보여주는 역할을 합니다.

직접적으로 모델을 수정하지 않으며, 모델의 상태를 반영하여 화면을 갱신합니다.

 

3) 컨트롤러(Controller)

컨트롤러는 주로 애플리케이션의 흐름 제어를 담당해요.

사용자의 입력을 처리하고, 그 입력을 기반으로 모델과 뷰를 업데이트하는 역할을 합니다.

모델과 뷰 사이의 중개자로서, 모델의 상태 변경을 지시하거나 뷰를 갱신하도록 지시합니다.

 

---

3. 동작 과정

출처 : MDN Web Docs

 

그러면 MVC 패턴은 어떻게 동작하는 걸까요?

1. 사용자가 뷰(View)를 통해, 애플리케이션의 요청을 보냅니다. (ex: 버튼 클릭, 데이터 입력 등)
2. 컨트롤러(Controller)가 사용자의 요청을 처리합니다.
3. 컨트롤러는 모델(Model)을 조작하여, 필요한 데이터를 얻거나 수정합니다.
4. 모델은 데이터의 상태를 변경하고, 그 결과를 컨트롤러에 반환합니다.
5. 컨트롤러는 변경된 모델의 상태를 기반으로 뷰(View)를 업데이트합니다.
6. 뷰는 모델의 최신 데이터를 반영하여, 사용자에게 결과를 보여줍니다.

 

---

4. 장단점

MVC 패턴을 사용하면, 어떤 장단점이 있을까요?

MVC 패턴은 모델, 뷰, 컨트롤러의 역할이 명확히 분리되어 있어, 코드의 가독성과 유지보수성이 높아집니다.

또한, 각 컴포넌트가 독립적이므로, 코드의 재사용성이 용이해요.

뷰와 모델은 독립적으로 변경할 수 있어, UI or 비즈니스 로직의 수정이 쉬워집니다.

 

하지만, MVC 패턴은 단순한 애플리케이션에서 오히려 복잡성이 증가할 수 있습니다.

 

---

5. 정리하며

지금까지 MVC 패턴에 대해 알아보았습니다.

이외에도 여러가지 디자인 패턴이 있기에, 다른 패턴도 알아보면 좋을 것 같아요!

 

참고

MDN Web Docs 용어 사전 : 웹 용어 정리 > MVC

lango 님의 여기도 MVC, 저기도 MVC! MVC 패턴이 뭐야?