[Design Pattern] MVC패턴이란? (Model-View-Controller)

안녕하세요 Foma 입니다!

 

오늘 알아볼 주제는 흔히 가장 많이 사용되는 디자인 패턴인 Model - View -Controller 에 대해서 알아보도록 하겠습니다.

 

바로 시작할게요!

---

MVC 패턴이란?

 

"MVC는 소프트웨어 공학에서 사용되는 소프트웨어 디자인 패턴이다. 이 패턴을 성공적으로 사용하면, 사용자 인터페이스로부터 비즈니스 로직을 분리하여 애플리케이션의 시각적 요소나 그 이면에서 실행되는 비즈니스 로직을 서로 영향 없이 쉽게 고칠 수 있는 애플리케이션을 만들 수 있다. MVC에서 모델은 애플리케이션의 데이터를 나타내며, 뷰는 텍스트, 체크박스 항목 등과 같은 사용자 인터페이스 요소를 나타내고, 컨트롤러는 데이터와 비즈니스 로직 사이의 상호동작을 관리한다." - 위키 백과-

 

장점

 

다른 패턴에 비해 구조를 비교적 쉽게 설계할 수 있어

 

규모가 작은 프로젝트 진행 시 빠르게 개발할 수 있습니다.

 

또한 보통 개발자에게 친숙한 구조이기 때문에 쉽게 협업이 가능합니다.

 

단점

 

모델은 뷰의 인터랙션에 따라서 데이터가 바뀌고 뷰는 모델의 바뀐 데이터에 의해 업데이트 되기 때문에

 

서로 완벽한 분리가 어렵다는 단점이 있습니다.

 

특히 iOS의 경우 View의 라이프 사이클을 Controller에서 관리하여 강하게 연결되어 있습니다.

 

고로 뷰컨트롤러가 뷰에서 하는 역할과 컨트롤러에서 하는 역할을 모두 다 수행하게 되어 뷰컨트롤러 내 코드가

 

복잡해지고 이는 유지보수의 어려움을 가져온다는 단점이 있습니다.

 

 

---

View

 

뷰는 사용자의 입력값에 따라 화면을 출력하는 역할을 합니다.

 

이미지,텍스트,텍스트필드,버튼 등이 모두 포함되며 사용자의 터치나 드래그 등 인터랙션을 컨트롤러에

 

전달하고 컨트롤러로부터 데이터를 전달받아 화면을 업데이트 합니다.

 

아래와 예제 화면으로 설명하면 이전 버튼과 다음 버튼이 눌린 것을 컨트롤러에게 알려주고

 

컨트롤러로부터 받은 캐릭터 모델을 화면에 출력하는 역할을 합니다.

 

코드로 작성하면 아래와 같습니다.

 

화면을 구성하고 있는 요소들과 뷰가 업데이트 되는 메소드를 가지고 있습니다.

import UIKit

class CharacterView: UIView {

    //화면을 구성하고 있는 요소들
    @IBOutlet weak var image:UIImageView! //이미지
    @IBOutlet weak var gender:UILabel! //성별
    @IBOutlet weak var name:UILabel! //이름
    @IBOutlet weak var country:UILabel! //국가
    @IBOutlet weak var nextButton:UIButton! //다음 버튼
    @IBOutlet weak var previousButton:UIButton! //이전 버튼
    
    //컨트롤러로부터 받은 캐릭터로 업데이트 함.
    func updateView(character:Character) {
        self.image.image = character.image
        self.gender.text = character.gender
        self.name.text = character.name
        self.country.text = character.country
    }
    
}

---

Model

 

모델을 뷰를 구성하는 데이터를 가지고 있는 역할을 합니다.

 

이미지가 어떤 이미지인지, 크기, 텍스트 자체, 폰트, 굵기 등 화면을 구성하고 있는

 

모든 요소를 포함하고 있습니다.

 

뷰에서 사용자의 인터랙션이 발생하면 모델은 컨트롤러로부터 인터랙션에 맞는 데이터로 업데이트 하라고 지시를 받습니다.

 

모델은 알맞은 데이터로 업데이트하고 컨트롤러에게 알려줍니다.

 

예제 화면은 아래와 같습니다.

 

코드로 설명하면 아래와 같이 캐릭터를 구성하는 데이터와 초기화하는 메소드를 가지고 있습니다.

import UIKit

struct Character {
    
    //화면을 구성할 데이터
    let image:UIImage
    let name:String
    let gender:String
    let country:String
    
    //초기화
    init(name:String,image:UIImage,gender:String,country:String,previousButtonText:String,nextButtonText:String) {
        self.name = name
        self.image = image
        self.gender = gender
        self.country = country
    }
}

---

Controller

 

컨트롤러는 뷰와 모델의 다리 역할을 하며 

 

뷰로부터 사용자의 인터랙션을 받아 모델에 전달하고

 

바뀐 모델 데이터를 뷰에 다시 전달하여 업데이트 하도록 합니다.

 

코드는 아래와 같습니다.

import UIKit

class CharacterController: UIViewController {
    
    //전체 모델 데이터
    let characters:[Character] = [
        Character(name:"스폰지밥",image: #imageLiteral(resourceName: "스폰지밥"), gender: "남자", country:"미국"),
        Character(name:"뚱이",image: #imageLiteral(resourceName: "뚱이"), gender: "남자", country:"미국"),
        Character(name:"징징이",image: #imageLiteral(resourceName: "징징이"), gender: "남자", country:"미국"),
        Character(name:"플랭크톤",image: #imageLiteral(resourceName: "플랑크톤"), gender: "남자", country:"미국"),
        Character(name:"퐁퐁여사",image: #imageLiteral(resourceName: "퐁퐁부인"), gender: "여자", country:"미국")
    ]
    //캐릭터뷰
    @IBOutlet weak var characterView: CharacterView!
    //현재 인덱스
    var index:Int = 0
    //현재 모델 데이터
    var character:Character!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        configure()
        notifyFromView()
    }
    
    //모델과 뷰 초기화
    func configure() {
        character = characters[index]
        updateView()
    }
    //뷰로부터 이전버튼과 다음버튼에 인터랙션을 전달받음
    func notifyFromView() {
        characterView.nextButton.addTarget(self, action: #selector(nextButtonTapped(_:)), for: .touchUpInside)
        characterView.previousButton.addTarget(self, action: #selector(previousButtonTapped(_:)), for: .touchUpInside)
    }
    //다음버튼이 눌렸다면
    @objc func nextButtonTapped(_ sender: UIButton) {
        //다음 인덱스로 변경
        if index < 4 {
            index += 1
        }
        //뷰 업데이트
        updateView()
    }
    //이전 버튼이 눌렸다면
    @objc func previousButtonTapped(_ sender: UIButton) {
        //이전 인덱스로 변경
        if index > 0 {
            index -= 1
        }
        //뷰 업데이트
        updateView()
    }
    //뷰를 업데이트하라고 지시
    @objc func updateView() {
        //캐릭터 뷰의 캐릭터를 현재 캐릭터로 바꿈.
        characterView.updateView(character: characters[index])
    }
}

 

아래와 같이 뷰에서 받은 사용자 인터랙션에 따라 데이터가 바뀌고 바뀐 데이터에 따라서

 

뷰가 업데이트 되는 것을 볼 수 있습니다.