MVC(Model-View-Controller) 디자인 패턴 이란?

2020. 5. 12. 16:40·개발/React
728x90

MVC(Model-View-Controller) 패턴 이란?

출처: 오픈듀토리얼스

MVC 패턴은 여러 디자인 패턴 중 하나입니다.

 

디자인 패턴들은 좀 더 나은 유지보수를 위해 만들어진 특정한 방법들인데, 그 중 하나가 MVC 패턴입니다.

 

MVC 패턴은 어플리케이션 또는 프로젝트의 구성을 Model, View, Controller 세 가지의 구성요소로 나눈 패턴입니다.


모델(Model)

모델(Model)은 백그라운드에서 데이터에 관한 로직을 처리하는 역할을 담당합니다.

 

모델은 컨트롤러에 의해 호출되어 데이터베이스에 데이터를 저장하거나,

데이터베이스에서 데이터를 가져와 뷰가 사용할 수 있는 형태로 컨트롤러에 반환합니다.

 

다음과 같은 규칙을 지켜주어야 합니다.

 

  1. 사용자가 편집하길 원하는 모든 데이터를 가지고 있어야 한다.

  2. 뷰나 컨트롤러에 대해 몰라야한다.

  3. 변경이 일어나면, 변경이 일어났음을 알리는 방법을 구현해주어야 한다.

ex) 게시판을 예로 들면,

게시판에 쓰인 글들은 데이터베이스에 데이터로써 저장됩니다.

이런 데이터의 형식을 지정하고, 데이터를 저장하고 불러오는 작업에 관한 코드들이 모델에서 이루어 집니다.


뷰(View)

뷰(View)는 사용자에게 정보(데이터)를 출력하는 역할을 담당합니다.

사용자에게 실질적으로 보여지는 화면부분입니다.

 

뷰는 컨트롤러에 의해 호출되어,

사용자의 요청에 대한 응답으로 제공할 템플릿(HTML, XML, JSON 등)을 생성해서 컨트롤러에 반환합니다.

 

다음과 같은 규칙을 지켜주어야 합니다.

 

  1. 모델이 가지고 있는 정보를 따로 저장해서는 안된다.

  2. 컨트롤러나 모델에 대해 몰라야한다.

  3. 변경이 일어나면, 변경이 일어났음을 알리는 방법을 구현해주어야 한다.

ex) 게시판을 예로 들면,

컨트롤러로 부터 게시판의 글들에 대한 정보를 받아 사용자가 글을 읽을 수 있도록 출력해 줍니다.

또한, 사용자가 버튼을 누르면 이에 대한 응답을 반환하기도 합니다.


컨트롤러(Controller)

컨트롤러(Controller) 사용자의 요청을 처리하고 응답을 반환하는 전체 흐름을 담당하는 역할을 합니다.

 

다음과 같은 규칙을 지켜주어야 합니다.

 

  1. 모델이나 뷰에 대해서 알고 있어야 한다.

  2. 모델이나 뷰에게 변경이 일어났음을 인지하고 이에 따라 행동해야 한다.

ex) 게시판을 예로 들면,

사용자가 버튼을 누르면 뷰에 데이터를 반환하기 위한 이벤트처리를 담당합니다.


행동 순서

  1. 사용자가 브라우저를 통해 요청을 전송하면 컨트롤러가 받습니다.
  2. 컨트롤러가 모델에게 데이터 처리를 요청하고
  3. 모델은 처리된 데이터를 컨트롤러에 반환합니다.
  4. 컨트롤러는 모델로부터 되돌려받은 데이터를 뷰에 전달합니다.
  5. 뷰는 응답을 생성하여 컨트롤러에 반환합니다.
  6. 컨트롤러가 브라우저에 뷰로 부터 되돌려 받은 응답을 전송합니다.

참고한 글

 

PHP 예제로 알아보는 MVC 패턴

웹 애플리케이션을 작성할 때 관심사 분리를 위해 가장 흔히 사용되는 것이 MVC 패턴입니다. 현재 많은 PHP 프레임워크들이 MVC 패턴을 사용하고 있고, 다른 언어에서도 각각 가장 인기있는 프레임

medium.com

 

 

[개발자 면접준비]#1. MVC패턴이란

​오늘은 개발자면접에 많이 나오기도 하는 MVC패턴에 대해서 알아보고자 합니다. 과연 MVC패턴이 무...

blog.naver.com

 

저작자표시 (새창열림)

'개발 > React' 카테고리의 다른 글

React-Redux 개념 잡기 #1  (0) 2020.05.26
React Flux 란?  (0) 2020.05.14
React Lifecycle #2 (Update와 Unmount에 대해)  (1) 2020.05.09
React Lifecycle #1 (lifecylce설명과 Mount)  (0) 2020.05.08
React를 다루면서 생긴 궁금증들..  (0) 2020.05.06
'개발/React' 카테고리의 다른 글
  • React-Redux 개념 잡기 #1
  • React Flux 란?
  • React Lifecycle #2 (Update와 Unmount에 대해)
  • React Lifecycle #1 (lifecylce설명과 Mount)
기짜낭
기짜낭
생각이 많지만, 지금 내가 해야할 것을 하자.
  • 기짜낭
    So tired
    기짜낭
    • 분류 전체보기 (199)
      • 개발 (11)
        • Javascript (19)
        • Typescript (5)
        • Canvas (8)
        • React (13)
        • C (3)
      • 활동 (63)
        • 개인 프로젝트 (33)
        • 나눔 서포터즈 3기 (9)
        • 멋쟁이 사자처럼 (7)
        • 0&1 C++ 자료구조 스터디 (0)
        • 제 9회 창업 아이디어톤 (3)
        • Poom (ZeroWasteShop) (3)
        • 해커톤 (2)
        • 우테코 프리코스 7기 (6)
      • 알고리즘 (27)
        • 알고리즘 정리 (5)
        • 백준 (18)
        • 프로그래머스 (4)
      • 강연 (7)
      • 독서 (18)
      • 회고 & 생각 (16)
        • 연간회고 (4)
      • 기타 (5)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

    • ※ 예전 블로그
  • 인기 글

  • 태그

    개념
    한양대학교
    대학
    HTML5
    독후감
    tutorial
    1주 1권
    프로젝트
    HTML
    백준
    개발
    디자인
    1주에 1권씩
    3기
    독서
    알고리즘
    Erica
    타입스크립트
    프로그래밍
    canvas
    react
    우테코
    TypeScript
    개발자
    ES6
    프론트엔드
    CSS
    군대
    에리카
    Javascript
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.0
기짜낭
MVC(Model-View-Controller) 디자인 패턴 이란?
상단으로

티스토리툴바