MVVM 정리

소프트웨어 아키텍처 패턴

---

Software architectural pattern은 특정한 규칙과 템플릿의 집합입니다.

앱의 일관성을 높이고 코드를 개선하거나 유지 보수를 원활하게 하는 목적입니다

(Software design pattern)이라고도 합니다

소프트웨어 아키텍처 패턴을 사용하게 된 이유!

초기의 UI 개발방식은 개발자들이 View만들고 그에 관련된 로직을 작성했습니다

이러한 방식은 Class의 덩치를 키우고 UI를 정의하는코드, 데이터코드, 비즈니스코드에

강력한 의존성이 생깁니다, 이러한 경우 보통 두명이상의 개발자들이 같은 View를 작업하는게 불가능합니다

이러한 이유로 인해 탄생하게 대였습니다.

MVVM

---

MVVM에는 3가지의 핵심 파트가 있습니다.

• Model(모델)
  • 앱의 기본적인 데이터와 비즈니스 로직을 구조화합니다. 여기서 중요한 것은 View와 독집적이여야 합니다.
    
• View(뷰)
  • 플랫폼의 제공하는 시각적요소들을 사용하는 UI정의합니다
• ViewModel(뷰모델)
  • 뷰와 모델 사이의 중개자, 뷰에 모델의 데이터를 제공하며 모델에는 업데이트를 요청합니다.

실습

---

우선 Model Code를 작성해줍시다

• Model

  struct My_Information_Model {
  var name: String
  var birthday: Date
  }

  Name, birthday라는 변수와 데이터 타입만 선언해줍니다.
  
• View

  struct ContentView: View {
      
      let deukRyeong = My_Information_Model(name: "득령", birthday: Date())    
      var body: some View {
          
          VStack {
              Text(deukRyeong.name)
                  .padding()
              Text(String(deukRyeong.age))
                  .padding()
  
          }
      }
  }

  ContentView에서 불러왔습니다, 이렇게 하면 MVVM패턴이라고 볼 수 없습니다 왜냐면 Model과 View는 접촉지점이 없어야 됩니다. 이제 이름을 변환하는 함수를 만들어야 합니다 VeiwModel를 만들어봅시다.
  
• ViewModel

  
  class ViewModel: ObservableObject {
      var deukRyeong = My_Information_Model(name: "득령", birthday: Date())
      var name: String {
          deukRyeong.name
      }
      var age: String {
          
          return "27"
      }
      func chName(name: String) {
          deukRyeong.name = name
          
      }
  }

  func chName에서 name 파라미터를 선언하고 ContentView에서 받아오는 코드입니다
  
• ContentView

  struct ContentView: View {
      
      let deukRyeong = My_Information_Model(name: "득령", birthday: Date())
      @StateObject var viewModel = ViewModel()
      @State var text: String = ""
      var body: some View {
          
          VStack {
              HStack {
                  TextField("이름을 입력해주세요.", text: $text)
                      .textFieldStyle(RoundedBorderTextFieldStyle())
                      .padding()
                  Button {
                      viewModel.chName(name: text)
                  } label: {
                      Text("이름변경")
                  }
                  .padding()
              }
              .padding()
              Text(viewModel.name)
                  .padding()
              Text(viewModel.age)
                  .padding()
          }
      }
  }

  이 상태로 실행을 해도 이름이 변경이 안됩니다 ViewModel에 중요한 부분이 빠져있기 때문이죠!

  @Published

  ---

  먼저 해결방법 부터 알아볼게요.

  class ViewModel: ObservableObject {
      @Published var deukRyeong = My_Information_Model(name: "득령", birthday: Date())

  deukRyeong이란 변수에 @Published를 선언 해주어야 됩니다. @Published는 objectWillChangePudlisher가 send 메서드를 호출하는 코드를 좀더 간소화시킨 것 입니다. 간단하게 데이터를 전달해주는 메소드입니다.

💡 SwiftUI 에는 데이터를 다루는 도구들이 많습니다 그중 하나가 @Published 인거죠, 다음 포스팅에서는 데이터를 다루는 도구들을알아보겠습니다

## 전체코드

---

```swift
//Model.swift
struct My_Information_Model {
var name: String
var birthday: Date
}

//ViewModel.swift
class ViewModel: ObservableObject {
    @Published var deukRyeong = My_Information_Model(name: "득령", birthday: Date())
    var name: String {
        deukRyeong.name
    }
    var age: String {
        
        return "27"
    }
    func chName(name: String) {
        deukRyeong.name = name
        
    }
}

//ContentView.swift
struct ContentView: View {
    
    let duekRyeong = My_Information_Model(name: "득령", birthday: Date())
    @StateObject var viewModel = ViewModel()
    @State var text: String = ""
    var body: some View {
        
        VStack {
            HStack {
                TextField("이름을 입력해주세요.", text: $text)
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                    .padding()
                Button {
                    viewModel.chName(name: text)
                } label: {
                    Text("이름변경")
                }
                .padding()
            }
            .padding()
            Text(viewModel.name)
                .padding()
            Text(viewModel.age)
                .padding()
        }
    }
}

```

**Today I Learned Rmx!**