[Design Pattern] MVP 패턴이란?

안녕하세요 Foma👟 입니다!

 

오늘은 Model - View - Presenter로 이뤄져있는 M.V.P 디자인 패턴에 대해서 알아보도록 하겠습니다.

 

지금부터 자세히 살펴보겠습니다.

---

MVP란?

 

Model - View - Presenter 로 이뤄진 디자인 패턴이며 MVC에서 Controller가 하는 역할을 

 

Presenter가 한다고 보면 됩니다.

 

"그러면 MVC 쓰면 되지 왜 MVP를 써?"

 

MVC는 Model과 View가 서로 연결되어 있어 의존관계를 갖게 됩니다.

 

하지만 MVP는 Model과 View 분리되어 있고 오직 Presenter를 통해서 상태나 변화를 알려줄 수 있습니다.

 

 

 

 

이렇게 View와 비지니스 로직이 완전히 분리가 되어 테스트가 용이해진다는 장점이 있습니다.

 

뷰가 업데이트 되는 과정을 간단히 설명하면

 

1. View에 사용자의 인터랙션이 들어온다.

 

2. View는 Presenter에 액션이 들어왔다고 전달한다.

 

3. Presenter는 View 액션대로 Model을 구성한다. (보통 Service를 가지고 있고 요청하는 경우가 많습니다.)

 

4. Update된 Presenter의 데이터를 View에 업데이트 합니다.

 

이러한 MVP의 단점은 View와 Model을 분리시켜 MVC나 Apple의 MVC에서 하기 힘들었던 테스트가 용이해졌지만

 

View와 Presenter의 의존관계가 강해지고 Controller 대신 Presenter가 복잡해지는 문제는 여전히 남아있습니다.

---

Model

 

Character의 이미지,사진,성별,나라를 가지고 있는 모델입니다.

 

import UIKit

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

---

Protocol

 

Presenter에 필요한 함수나 변수 등을 정의합니다.

 

protocol MVP_CharacterPresenterProtocol {
    var character:MVP_Character? { get set }
    func decrementIndex()
    func incrementIndex()
}

---

Presenter

 

Protocol에서 정의한 함수와 변수들을 구현합니다.

 

보통 Service를 가지고 있고 View에서 받은 인터랙션대로 요청하여 Presenter의 데이터를 변경합니다.

 

(간단한 예시를 위해 미리 모델들을 가지고 있는 characters를 만들어두었습니다.)

 

View에 필요한 데이터 character를 가지고 있고 View에서 일어나는 액션에 따라 데이터가 바뀌게끔 구현해놓습니다.

 

//전체 모델 데이터
let characters:[MVP_Character] = [
    MVP_Character(name:"스폰지밥",image: #imageLiteral(resourceName: "스폰지밥"), gender: "남자", country:"미국"),
    MVP_Character(name:"뚱이",image: #imageLiteral(resourceName: "뚱이"), gender: "남자", country:"미국"),
    MVP_Character(name:"징징이",image: #imageLiteral(resourceName: "징징이"), gender: "남자", country:"미국"),
    MVP_Character(name:"플랭크톤",image: #imageLiteral(resourceName: "플랑크톤"), gender: "남자", country:"미국"),
    MVP_Character(name:"퐁퐁여사",image: #imageLiteral(resourceName: "퐁퐁부인"), gender: "여자", country:"미국")
]

class MVP_CharacterPresenter:MVP_CharacterPresenterProtocol {
    
    var character: MVP_Character?
    
    var index:Int = 0
    
    func incrementIndex() {
        //이전 인덱스로 변경
        if index > 0 {
            index -= 1
        }
        character = characters[index]
    }
    
    func decrementIndex() {
        //다음 인덱스로 변경
        if index < 4 {
            index += 1
        }
        character = characters[index]
    }
}

---

View

 

아래와 같이 캐릭터의 이미지,성별,이름,나라를 표시하고 다음 캐릭터로 넘어가는 Next버튼과

 

이전 캐릭터로 돌아가는 Previous 버튼이 있습니다.

 

 

 

View는 아래와 같이 Presenter를 가지고 있습니다.

 

그리곤 Button의 액션을 Presenter에서 구현해놓은 기능에 맞게 전달합니다.

 

액션에 따라 바뀐 Presenter character의 데이터에 맞게 View를 업데이트 합니다/

 

import UIKit

class MVP_CharacterViewController: UIViewController {
    
    //MARK:- IBOutlets
    
    @IBOutlet weak var country: UILabel!
    @IBOutlet weak var name: UILabel!
    @IBOutlet weak var gender: UILabel!
    @IBOutlet weak var image: UIImageView!
    @IBOutlet weak var nextButton: UIButton!
    @IBOutlet weak var previousButton: UIButton!
    
    //MARK:- Properties
    
    let presenter:MVP_CharacterPresenterProtocol = MVP_CharacterPresenter()
    
    //뷰 업데이트
    private func updateView() {
        //새로운 모델에 맞게 뷰 변경
        self.image.image = presenter.character?.image
        self.name.text = presenter.character?.name
        self.gender.text = presenter.character?.gender
        self.country.text = presenter.character?.country
    }
    
    @IBAction func tapPreviousButton(_ sender: Any) {
        presenter.decrementIndex()
        updateView()
    }
    
    @IBAction func tapNextButton(_ sender: Any) {
        presenter.incrementIndex()
        updateView()
    }
}

---

 

실행화면

 

---

Test

 

View와 비지니스 로직이 분리가 되었으므로 Test가 용이하다고 앞서 말씀드렸습니다.

 

또한 Protocol로 Presenter의 기능의 정의했던 것도 테스트를 하기 위해서였는데요.

 

아래와 같이 Mock 버전의 Presenter를 Protocol을 채택해 만들 수 있습니다.

 

import Foundation
@testable import Architecture_Example

class Mock_CharacterPresenter:MVP_CharacterPresenterProtocol {
    var character: MVP_Character?
    
    var index:Int = 3
    
    func incrementIndex() {
        //다음 인덱스로 변경
        if index < 4 {
            index += 1
        }
    }
    
    func decrementIndex() {
        //이전 인덱스로 변경
        if index > 0 {
            index -= 1
        }
    }
}

 

위의 Mock Presenter를 이용해서 프레젠터의 테스트를 아래와 같이 할 수 있습니다.

 

import XCTest
@testable import Architecture_Example

class CharacterPresenterTests: XCTestCase {

    var sut:Mock_CharacterPresenter!
    
    override func setUpWithError() throws {
       sut = Mock_CharacterPresenter()
    }

    override func tearDownWithError() throws {
        sut = nil
    }

    func testSignupPresenter_WhenTapNextButton_ShouldIndexIncrement1() throws {
        let index = sut.index
        sut.incrementIndex()
        XCTAssertEqual(sut.index, index+1)
    }
    
    func testSignupPresenter_WhenIndexGreaterThanZero_ShouldIndexDecrement1() throws {
        let index = sut.index
        sut.decrementIndex()
        XCTAssertEqual(sut.index, index-1)
    }
}