brandnew-one / practice-swiftui Goto Github PK

View Code? Open in Web Editor NEW

0.0 0.0 0.0 7.8 MB

Swift 99.59% Ruby 0.41%

practice-swiftui's Introduction

Sangwon Shin 👋

who am I?

👯 I majored in Electronic Engineering
📫 Konkuk University (2015.03 ~ 2021.08)

practice-swiftui's People

Contributors

Watchers

practice-swiftui's Issues

Spacer

공식문서를 확인해보면 스택 레이아웃에 포함되어 있으면 주 축을 따라 확장되고 스택 레이아웃에 포함되어 있지 않으면 두 축 모두 확장되는 유연한 공간이라고 합니다.

즉 VStack의 경우에는 Vertical 하게 확장되고, HStack의 경우에는 Horizontal하게 확장되는 공간을 의미합니다.
예제를 통해서 확인해보겠습니다.

VStack {
  Image("turtlerock")
    .resizable()
    .frame(width: 150, height: 150)
  Spacer()
  Image("turtlerock")
    .resizable()
    .frame(width: 150, height: 150)
}

HStack {
    Image("turtlerock")
      .resizable()
      .frame(width: 150, height: 150)
    Spacer()
    Image("turtlerock")
      .resizable()
      .frame(width: 150, height: 150)
  }

위의 예제들만 봐도 Spacer가 어떤 기능을 하는지 알 수 있습니다. Spacer 구조체 내부를 살펴보겠습니다.

minLength라는 프로퍼티가 존재하는데 앞선 예제들과 같이 우리가 직접 값을 설정하지 않으면 nil 값이 설정되고 view들 사이에 시스템 최대 간격이 설정됩니다.

HStack {
  Image("turtlerock")
    .resizable()
    .frame(width: 150, height: 150)
  Spacer(minLength: 200)
  Image("turtlerock")
    .resizable()
    .frame(width: 150, height: 150)
}

minLength를 설정하면 변수명에서도 확인 할 수 있듯이 Spacer의 최소길이를 우리가 직접 설정할 수 있습니다. 위는 최소길이를 200으로 지정해 spacer 길이를 보장하기 위해 Image가 짤려서 나오는것을 확인 할 수 있습니다.
frame을 통해 고정된 크기의 spacer를 생성할 수도 있습니다.

`ZStack`에서 Spacer는 어떤 의미를 가질까요?

Stack을 공부할 때 ZStack에서는 Spacing을 설정할 수 없었습니다. 그럼 Z축으로 view 들 사이의 최대간격을 설정하는 Spacer는 어떤 의미를 가질까요?

링크를 통해 학습하고 있는데 아직 정확한 의미를 파악하지 못했습니다. 추가적으로 정리하도록 하겠습니다.

[화면전환] Re-rendering 시 하위뷰가 매번 init 되는 현상

문제점

1) SwiftUI4 로 업데이트 되면서 Bingding 타입에 @published를 넣으면 Warning이 발생한다.

final class ContentViewModel: ObservableObject {
  @Published var sheetisShow: Bool = false
  private var cancellables = Set<AnyCancellable>()

  let sheetSubject = PassthroughSubject<Void, Never>()

  enum Action {
    case sheetisShow
  }

  func action(_ action: Action) {
    switch action {
    case .sheetisShow:
      sheetSubject.send()
    }
  }

  init() {
    transform()
  }

  func transform() {
    sheetSubject
      .throttle(for: 0.1, scheduler: RunLoop.main, latest: false)
      .subscribe(on: RunLoop.main)
      .sink(receiveValue: { [weak self] in
        guard let self = self else { return }
        self.sheetisShow = true
      })
      .store(in: &cancellables)
  }
}

  var body: some View {
    VStack {
      Text("This is Parent View")

      Button(
        action: { viewModel.action(.sheetisShow) },
        label: {
          Text("PRESS")
        }
      )
      .buttonStyle(.plain)

      ChildView()
    }
    .padding()
    .fullScreenCover(isPresented: $viewModel.sheetisShow) {
      ModalView()
    }
  }

SwiftUI로 코드를 작성할 때, modal full screen이나 push등 화면전환에 필요한 값들을 보통 뷰모델에서 가지고 뷰에서 해당 값들을 Binding 형태로 관찰하고 있다가 해당 값들이 변하면 화면 전환이 발생하도록 코드를 작성했다.

분명 처음 SwiftUI를 공부할 때는 위의 코드가 Warning을 발생시키지 않았던것 같은데(모르고 있었을 수 있다..)
Xcode 14.0 이후부터는 Binding 값에 @published 값을 넣어주면 위와 같이 보라색 경고를 만나게 되는 것 같다.

뷰단에서 @State로 Bool 값을 들고 있다가 해당값에 변화가 발생할 때, 뷰를 다시 Re-Rendring 하는 것과 뷰모델에 @published값이 변경될 때, objectWillChange를 통해서 뷰모델의 변화를 캐치해서 뷰를 다시 Re-Rendring 하는 것이 어떤 차이가 있는걸까?

지금까지 @State, @binding, @published 등 SwiftUI를 사용할 때 보던 프로퍼티 래퍼들을 어떤 역할을 하는지 간단한게 파악하고 있었는데 정확하게 분석이 필요할 것 같다.

2) Parent뷰가 Re-Rendring 되면 child 뷰가 init되는 문제점

Parent뷰에 Subview 여러개가 있는 case를 생각해보자. Parent 뷰가 다시 Re-Rendring 될 때, SubView들이 다시 init 된다.
어찌보면 당연하지만 다시 init되는 시점이 상이하다.

1. @published를 Binding 값으로 사용한 경우

struct ContentView: View {
  @StateObject
  var viewModel = ContentViewModel()

  @State
  var isShow: Bool = false

  init() {
    print("Content View Init")
  }

  var body: some View {
    VStack {
      Text("This is Parent View")

      Button(
        action: { viewModel.action(.sheetisShow) },
//        action: { isShow = true },
        label: {
          Text("PRESS")
        }
      )
      .buttonStyle(.plain)

      ChildView()
    }
    .padding()
    .fullScreenCover(isPresented: $viewModel.sheetisShow) {
      ModalView()
    }
  }
}

Binding를 뷰모델의 @published 값으로 사용한 경우에, 버튼을 눌러 modal full screen이 띄웠다가 다시 내릴 경우 child view가 여러번 init되는 것을 확인 할 수 있다. 물론 @StateObject로 선언된 child view의 뷰모델이 child view init 시점에 계속 init되지 않아 큰 문제가 발생하지 않지만 다음 예시 결과를 보면서 다시 확인해보자

2. @State를 Binding 값으로 사용한 경우

struct ContentView: View {
  @StateObject
  var viewModel = ContentViewModel()

  @State
  var isShow: Bool = false

  init() {
    print("Content View Init")
  }

  var body: some View {
    VStack {
      Text("This is Parent View")

      Button(
//        action: { viewModel.action(.sheetisShow) },
        action: { isShow = true },
        label: {
          Text("PRESS")
        }
      )
      .buttonStyle(.plain)

      ChildView()
    }
    .padding()
    .fullScreenCover(isPresented: $isShow) {
      ModalView()
    }
  }
}

위와 동일하게 버튼을 눌러 modal full screen을 띄우고 다시 content view로 돌아온 경우다. @published와 @State 밖에 차이가 없는데 왜 이번 경우에는 child view가 여러번 init되지 않았을까?

만약 부모뷰가 Re-Rendring 되면서 자식뷰가 init되는 거라면, 부모뷰의 @State값이 변하든 @StateObject가 변하든 자식뷰는 init이 되어야 한다고 생각하는데 무슨 차이 때문에 이런 현상이 발생하는지 정확하게 이해하지 못했다.

1)과 마찬가지로 프로퍼티 래퍼를 까서 정확하게 문제를 파악하는게 필요하다.

GeometryReader

@State

struct MapView: View {
  var coordinate: CLLocationCoordinate2D
  @State private var region = MKCoordinateRegion()
  
  var body: some View {
    Map(coordinateRegion: $region)
      .onAppear {
        setRegion(coordinate)
        print("MapView onAppear")
      }
  }
  
  private func setRegion(_ coordinate: CLLocationCoordinate2D) {
    region = MKCoordinateRegion(
      center: coordinate,
      span: MKCoordinateSpan(latitudeDelta: 0.2, longitudeDelta: 0.2)
    )
  }
}

애플 예제코드를 확인해보면 @State와 같은 키워드를 확인 할 수 있습니다. 어떤 의미를 가지는 걸까요?

우선 위의 코드를 중심으로 살펴보면 MapView는 coordinate라는 2차원 좌표를 통해 초기화 되고 View가 그려지는 시점에서 setRegion 메서드를 통해서 region 값을 변경해 지도를 그려주게 됩니다.

만약 좌표값이 계속 바뀔 경우에는 어떻게 대응해야 할까요?

UIKit의 경우에는 Observer를 통해서 값이 변경될 때 마다 뷰를 업데이트 하는 방식을 사용할 수 있습니다.
하지만 SwiftUI는 View가 구조체로 구성되어 있기 때문에 참조값이 없기 때문에 View를 새로 그려줘야 합니다. 이때 @State 로 선언된 변수의 값이 변경될 때 마다 View를 계산해서 다시 그려주게 됩니다.

이를 Property Wrapper라고 합니다.
확실히 추가적으로 정리학 필요한 부분입니다. 일단 대략적인 역할만 이해하고 다른 wapper들과 함께 정리하도록 하겠습니다.

Modifier

참고 링크

struct ContentView: View {
  var body: some View {
    Text("Turtle Rock")
      .font(.title)
  }
}

SwiftUI에서 .font() 와 같은 메서드를 통해서 Text View의 font를 변경할 수 있습니다.
SwiftUI에서는 이렇게 Modifier를 통해서 View를 변경할 수 있습니다.

Modifier를 통해서 뷰가 변경되면 기존의 뷰를 수정하는 것이 아니고 새로운 뷰를 만든다고 합니다!

SwiftUI에는 각 View 마다 미리 정의된 Modifier를 통해서 View를 변경할 수 있고 ViewModifier프로토콜을 채택하는 커스텀한 Modifier를 만들 수도 있습니다. (공식 홈페이지에 설명이 있네요)

struct BorderedCaption: ViewModifier {
    func body(content: Content) -> some View {
        content
            .font(.caption2)
            .padding(10)
            .overlay(
                RoundedRectangle(cornerRadius: 15)
                    .stroke(lineWidth: 1)
            )
            .foregroundColor(Color.blue)
    }
}

extension View {
    func borderedCaption() -> some View {
        modifier(BorderedCaption())
    }
}

와 같이 커스텀 Modifier를 만들고 익스텐션을 통해 추가하면 View 프로토콜을 채택하는 View에서 모두 사용할 수 있습니다.

Modifier는 순서에 따라 결과값이 바뀔 수 있습니다

VStack {
    Text("Hello, World!")
      .frame(width: 200)
      .border(.gray, width: 2)
    Divider()
    Text("Hello, World!")
      .border(.gray, width: 2)
      .frame(width: 200)
  }

SwiftUI는 정말 직관적이네요..

Modifier 적용은 해당 뷰의 자식뷰에도 적용됩니다.

VStack {
      Text("Hello, World!")
        .frame(width: 200)
        .border(.gray, width: 2)
      Divider()
      Text("Hello, World!")
        .border(.gray, width: 2)
        .frame(width: 200)
    }
    .foregroundColor(.green)
  }

Vstack View에 컬러를 설정하는 것만으로 자식뷰(Text, Text) 도 함께 적용되는 것을 확인 할 수 있습니다.

Stack

VStack

VStack {
  Text("Hello SwiftUI")
    .frame(width: 200)
  Text("Hello")
    .frame(width: 200)
}

VStack(alignment: .leading, spacing: 15) {
  Text("Hello SwiftUI")
  Text("Hello")
}
.padding()
.font(.subheadline)

Alignment를 통해 정렬방식을 설정하고 spcaing을 통해서 간격을 설정할 수 있습니다.

HStack

HStck은 Vstack과 크게 다르지 않습니다. Vertical을 Horizontal 하게 바꾸기만 하면 동일합니다.

HStack(spacing: 100) {
  Text("Hello SwiftUI")
  Text("Hello")
}
.padding()
.font(.subheadline)

ZStack

ZStack은 Z축으로 자식뷰들을 쌓을 수 있는 컨테이너 뷰 입니다. 약간은 생소할 수 있는 개념인데 애플 예제코드와 함께 확인해보겠습니다.

ZStack {
  Rectangle()
    .fill(.red)
    .frame(width: 100, height: 50)
  Rectangle()
    .fill(.blue)
    .frame(width: 50, height: 100)
}

Alignment 기본값이 Center이기 때문에 중앙을 기준으로 두 개의 사각형이 겹치는 것을 확인 할 수 있습니다.
그리고 파란색 사각형이 빨간색 사각형 위에 위치하고 있습니다. 즉, 스택에 선언된 순서에 따라 보이는 값이 달라질 수 있습니다.
특이한 점으로 Zstack에는 Spacing을 설정할 수 없습니다. 디스플레이가 2D니까 당연한 거겠죠?

Hashable, Identifiable

[Combine] 버튼 tap action 에 API call

@Published var signupButtonTapped = PassthroughSubject<Void, Never>()

private func transform() {
    signupButtonTapped
      .print("Before")
      .flatMap { _ in
        return AuthApiService.register(name: self.userName, email: self.userID, password: self.userPassword)
      } // weak self
      .print("After")
      .sink(receiveCompletion: { completion in
        print("completion:", completion)
      }, receiveValue: { value in
        print("ReceiveCompletion: ", value)
      })
      .store(in: &cancellables)
  }

현재 버튼을 탭했을 때, view에서 viewModel에 있는 signupButtonTapped에 Void를 send 해준다
현재 값들을 기준으로 API 통신한다

위와 같이 코드를 작성하면 만약 API 통신에서 error로 스트림이 종료되면 버튼 동작에 더 이상 flatMap을 통해 생성된 스트림 연결이 끊기게 된다(?)