ch10 현상금 랭킹앱 코드리뷰(MVVM)

이번 시간에는 강의는 짧았지만, 공부할 내용은 왕창인 시간이었다...

 

(목차)

 - MVVM Review

 - Model 실전 설명

 - ViewModel 실전 설명

 - View 실전 설명

 - 구조체 배열을 정렬하는 코드에 대해서 정리

 

✅ MVVM Review

 - Model : 데이터(struct)

 - View : UI요소(UIView, UIViewController)

 - ViewModel : 중계자(ViewModel) -> 뷰와 모델이 직접 소통하는게 아니라, ViewModel을 통해 간접 소통해야 한다.

 

💡이론에 대해 더 구체적인 사항이 궁금하다면...

2021.06.21 - [iOS/패캠공부] - MVVM 패턴

MVVM 패턴

 

 

✅ 자 그럼 이제 본격적으로 이번 시간에는 이론을 바탕으로 코드에서 MVVM 패턴을 적용해보면서 실전에서 어떻게 사용되고 나만의 언어를 사용하여 정리해보도록 하자

 

1️⃣  Model은 데이터(struct)라고 했지? 말그래도 struct다. 

struct BountyInfo {
    let name : String
    let bounty : Int
    
    var image : UIImage? {
        return UIImage(named: "\(name).jpg")
    }
    
    init(name : String, bounty: Int) {
        self.name = name
        self.bounty = bounty
    }
}

내 코드에서 작성된  Model인데, struct로 BountyInfo를 구성하였다.

Model에는 우리가 갖고 있는 데이터고, 만약 서버가 있다면 서버에서 가져올 데이터의 변수들을 모아둔 오브젝트 같은 느낌이다. 

Model에는 선언과 init만 수행한다.

즉, 데이터를 캡슐화 했다고 생각해!! 

 

 

2️⃣  다음은 ViewModel인데 코드를 보면서 이해를 도와보자

class BountyViewModel {
    let bountyInfoList : [BountyInfo] = [
        BountyInfo(name: "brook", bounty: 33000000),
        BountyInfo(name: "chopper", bounty: 50),
        BountyInfo(name: "franky", bounty: 44000000),
        BountyInfo(name: "luffy", bounty: 300000000),
        BountyInfo(name: "nami", bounty: 16000000),
        BountyInfo(name: "robin", bounty: 80000000),
        BountyInfo(name: "sanji", bounty: 77000000),
        BountyInfo(name: "zoro", bounty: 120000000)
    ]
    
    var sortedList : [BountyInfo] {
        let sortedList = bountyInfoList.sorted { prev, next  in
            return prev.bounty > next.bounty
        }
        
        return sortedList
    }
    
    var numOfBountyInfoList : Int {
        return bountyInfoList.count
    }
    
    func bountyInfo(at index : Int) -> BountyInfo {
        return sortedList[index]
    }
    
}

ViewModel 에서는 Model을 사용해 데이터를 가공하는 작업을 여기서 수행한다.

조금 특이한 점은 변수를 선언할 때 return을 사용한다는 것인데,  다른 곳에서 참조할 때, 데이터 값을 return 해줘야 하기 때문!

 

3️⃣  마지막은 View

뷰는 코드를 따로 첨가하여 설명하지는 않겠는데, View에는 UI구성과 관련한 코드나 평소에 작성하던대로 작성하면 돼.

❗️주의할 점은 변수를 Model에서 선언해야 한다는 것과 참조할 때에는 ViewModel을 통해서 데이터를 참조해야한다는 점이야.

 

4️⃣  구조체 배열을 정렬하는 코드

let bountyInfoList : [BountyInfo] = [
        BountyInfo(name: "brook", bounty: 33000000),
        BountyInfo(name: "chopper", bounty: 50),
        BountyInfo(name: "franky", bounty: 44000000),
        BountyInfo(name: "luffy", bounty: 300000000),
        BountyInfo(name: "nami", bounty: 16000000),
        BountyInfo(name: "robin", bounty: 80000000),
        BountyInfo(name: "sanji", bounty: 77000000),
        BountyInfo(name: "zoro", bounty: 120000000)
    ] //C에서 구조체 배열과 형식이 비슷해서 구조체 배열이라고 이름 붙임 
    // 구조체 배열을 선언
    
    var sortedList : [BountyInfo] {
        let sortedList = bountyInfoList.sorted { prev, next  in
            return prev.bounty > next.bounty
        } // 내림차순으로 정렬 (큰수에서 -> 작은수로)
        
        return sortedList // 다른 곳에서 참조해야 하기 때문에!
    } // 구조체 배열인데 정렬된 변수
    // 선언된 구조체 배열을 갖고 정렬

이런 코드는 처음봐서 생각하는데 도움이 많이 되었따. 우선 bounty값을 갖고 정렬한 것이 상당히 신선했다!!