Ios AutoLayout 5 - MVC 패턴

Ios AutoLayout 4 -  MVC 패턴 

● 들어가기 전

이번 포스팅에서는 mvc 패턴에 대해서 살펴보겠다. mvc 패턴은 아주아주 간단하게 말해서 어플리케이션을 만들때, m 모델단, v 화면단, c 컨트롤단으로 구분지어서 소스코드를 제작하는 방법이다. 반드시는 아니지만 굳이 구분을 하자면 프론트 엔드 즉, 디자이너는 v 부분 소스코드를 짜고, 개발자는 c 부분 소스코드를 짜고, db모델러는 m 부분을 담당한다.(쉽게 설명해서) 이러는 이유는 앞에서도 설명했는데, 페이지 하나에 화면소스, 컨트롤소스, 모델 소스를 짜버리면 나중에 유지보수하기가 힘들고 개발할때도 복잡해서 효율성이 떨어지기 때문이다. 아주 간단하게 설명하면 이렇다. 그렇다면 ios에서 mvc가 어떻게 활용되는지 보자. 

● 실습순서

1.모델객체 만들기

2.모델 객체를 컨트롤 부분에서 참조

3.cell을 구성하는 함수에서 모델 객체 데이터를 view로 할당해줌

4.view에서는 감지했다가 받은 데이터를 화면에 뿌려준다.

● 모델 객체 만들기

파일을 하나 만들어서 모델 객체를 하나 만들어 준다. 모델 객체는 struct 타입으로 만들어 준다.

 
import Foundation
 
struct Page {
    //이미지 데이터 변수
    let imageName: String
    //글 제목 변수
    let headerText: String
    //글 본문 변수
    let bodyText: String
    
}
 
 
 
 

● 컨트롤 부분에서 모델 객체 참조

SwipingController러 class 위에 모델객체에 값을 넣어준다. 사진과 사진제목은 각자 알아서 넣어 주도록 하자. 

    let pages = [
        Page(imageName: "mypic1", headerText: "ios 프로그래밍 입문 레슨", bodyText: "초보자도, 할머니도, 할아버지도 원숭이도 하는 코딩공부~ 글보다는 직접 쳐보면서 만들어보는게 훨씬 이해도 쉽고 효율적이에요~ 같이 열공해용~!"),
        Page(imageName: "mypic2", headerText: "안드로이드 프로그래밍 입문 레슨", bodyText: "세계에서 가장 많이 사용하는 os 안드로이드~! 프로그래밍 입문자는 java에 대한 개념부터 다지고 바로 앱으로 고고씽~!"),
        Page(imageName: "mypic3", headerText: "php 프로그래밍 쉽게 알려줌", bodyText: "나는 웹도 앱도 먼지 모르겠다. 일단 운영이되는 사이트를 바로 만들어 보고싶다. 그런분들께 쉽지만 아주 강력한 php를 추천합니다~!")
    ]
    

다음 cell 구성을 담당하는 함수 내부에서 view에 데이터를 뿌려준다. 그리고 위쪽에 컬렉션뷰의 cell 개수를 담당해주는 함수에서 return 값을 4에서 pages.count 로 변경해준다. 이건 고정적으로 정해주기보다는 동적으로 정해주는것이 효율적이다.

    //cell을 구성하는 함수
    override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        
        //as! PageCell로 케스팅해준다.
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cellId", for: indexPath) as! PageCell
        //위에서 정의 한 배열의 값(모델객체값)을 각각 하나씩 빼서
        let page = pages[indexPath.item]
        //view에 page 변수에 할당
        cell.page = page
 
        return cell
    }

● view에서 받은 객체모델값 뿌려주기

view단에서 컨트롤러에서 넘어올 모델객체 데이터를 받을 변수를 선언해 준다. 그리고 didSet으로 변수에 값이 할당되면 즉시 밑에서 만들었던 이미지 객체, 텍스트 객체 속성에 모델객체에 담겨진 값을 담아준다.

 //컨트롤에서 넘겨줄 모델 데이터 받을 변수
    var page: Page? {
        didSet {
            
            //언래핑:널값을 안전하게 처리하기 위해서 언래핑 해준다.
            guard let unwrappedPage = page else { return }
            //위에서 언래핑한 객체모델.변수 이름으로 데이터 view에 뿌려주기
            myImageView.image = UIImage(named: unwrappedPage.imageName)
            //마찬가지
            let attributedText = NSMutableAttributedString(string: unwrappedPage.headerText, 
            attributes: [NSAttributedStringKey.font: UIFont.boldSystemFont(ofSize: 18)])
            
            attributedText.append(NSAttributedString(string: "\n\n\n\(unwrappedPage.bodyText)", 
            attributes: [NSAttributedStringKey.font: UIFont.systemFont(ofSize: 13), NSAttributedStringKey.foregroundColor: UIColor.gray]))
            
            myTextView.attributedText = attributedText
            myTextView.textAlignment = .center
        }
    }

● 실행

이제 어플리케이션을 실행해보자. controller에서 모델객체를 참조하고 값을 넣어주었다. 그 값들이 정확히 view에 뿌려지는지 확인해보자.

▲ 실행결과 모두다 잘 나온다.

● 마무리

이번 포스팅에서는 완벽한 MVC 패턴에 대해서 살펴보았다. 물론 아주완벽한 MVC 패턴은아니다. 일단은 view(여기서는 커스텀 셀), controller(여기서는 SwipingController), model(여기서Page) 이렇게 나누어 주었다는것만 기억하고 다음 포스팅으로 넘어 가겠다.