SwiftUI 스터디 1주차 !!
참고로 SwiftUI는 맥북이 없어도! 아이패드에 Playgrounds를 설치해서 코드를 실행해 볼 수 있다.
공부 자료 - Apple 공식 문서

Chapter 1. SwiftUI Essentials

> Creating and Combining Views

Section 1.

Create a New Project and Explore the Canvas

(간단요약) step1 ~step7: 프로젝트를 생성하는 방법과 기본 세팅에 대해서 설명해준다.

Step5

SwiftUI에서 view 파일이 기본적으로 두 구조체로 만들어진다. 첫번째 구조체는 View protocol를 준수하고 view의 콘텐츠와 레이아웃을 묘사한다. 두번째 구조체는 해당 미리보기에 대한 view이다.

그렇다면 View Protocol 이란??

• 프로토콜이고, body라는 computed property를 가지고 있는 타입
• view를 입력할 수 있게하는 인터페이스를 제공하는 역할

SwiftUI에서 뷰들을 Struct으로 정의하는 이유

• 성능 🛠

  • Struct는 Class보다 단순하고 빠른 특징이 존재

  • UIView같은 경우에는, constrant, layer 등 많은 property와 메서드를 가진 클래스에의 subclass인데, UIView의 서브클래스들은 모두 UIView의 속성을 그대로 가져가야만 하는 구조 ( 애플 문서만 봐도, UIView관려 속성이 200개 넘게 존재)

  • SwiftUI에서는 상속을 대신하여 ViewModifier 개념을 사용하여 컴포넌트화 할 수 있도록 제공

• 가변성을 최소화 (함수형 프로그래밍의 핵심) 🩹

  • class는 reference type이므로 어디에서도 값을 쉽게 바꿀 수 있지만, Struct는 value type이므로 앱의 전체 상태를 고려할 필요 없이 코드의 일부에 대해서 더 쉽게 추론할 수 있는 장점이 존재
  • 가변성을 최대한 멀리하는게 함수형 프로그래밍의 핵심인데 이때 class보다 Struct가 더 유리 (=프로그램 실행 중에 상태가 변화하는 것을 최소화하는게 좋은 코드)

• 메모리릭 방지 🧰

  • Reference type을 사용하다보면 retain cycle때문에 메모리에서 해제가 안되는(memory leak) 현상이 발생하는데, 이 때 계속해서 메모리를 차지하는게 늘어나면서 크래시가 나는 반면에, value type인 struct을 쓰면 Memory leak에 안전한 프로그래밍이 가능

참고 자료

Section 2.

Customize the Text View

(간단요약) step1 ~step6: Text View 요소 변경하는 방법

• Show SwiftUI Inspector 보는 법!! => command + click

  

• SwiftUI Inspector
  : 여기서 들어가야 하는 Text or Font or Color 등을 바꿀 수 있고, Inspector에서 요소르 바꾸면 코드가 알아서 변경된다!!

  

Section 3.

Combine Views Using Stacks

(간단요약) step1 ~step9: SwiftUI에서 레이아웃과 컨텐츠 등을 body property 안에 구성하는데, body property는 하나의 뷰만 반환하기 때문에!! stack안에 여러 개의 view를 combine하거나 embed 해야한다.
(방법: horizontally, vertically, or back-to-front)

• Embed in VStack & Embed in HStack
  • stack 종류를 embed 해주고, library에서 text를 추가해준다.
    
    
• 정렬
  • Inspector에서 정렬 옵션을 선택해준다. (default: center)
  • VStack(alignment: .leading) 코드에 해당 문장이 생성된다.
    
• Spacer()
  : view 간의 간격을 "띄우고 싶을 때" 사용하는 것!
  • Stack안에서 사용되며, Stack의 크기만큼 내부 크기의 공백이 채우고 싶을때 사용
    

    HStack {
    		Text("Joshua Tree National Park")
    			.font(.subheadline)
    		Spacer()
    		Text("California")
    			.font(.subheadline)
        }
    		```

Section 4.

Create a Custom Image View

(간단요약) step1 ~step7: 이미지 추가하는 방법을 배우고 mask, border 그리고 drop shadow까지 만드는 방법에 대해서 설명해준다.

• asset catalog’s editor에 사진을 Import 해준다.
• mask, border, drop shadow를 만들어본다. + 사이즈 조절
  
  • 이미지를 유지하고 이미지가 담긴 뷰의 크기를 조절하려고 할 때
    • Image("imageName").frame(witdh: 200, height: 200)
  • 이미지 크기를 리사이징 하기 ( resizable()은 frame 앞에 있어야 한다.)
    • Image("imageName").resizeble().frame(witdh: 200, height: 200)

var body: some View {
        Image("turtlerock")
            .resizable()
            .frame(width: 200, height: 200)
            .clipShape(Circle())
            .overlay{
                Circle().stroke(.white, lineWidth: 4)
            }
            .shadow(radius: 7)
    }

참고 자료

Section 5.

Use SwiftUI Views From Other Frameworks

(간단요약) step1 ~step5 MapKit 사용해서 map render 해보기

• Frameworks 사용해보기

  • import MapKit

  • map 정보를 받아올 수 있는 state 변수 만들어주기

  • body에서 Map함수를 불러와서 보여준다.

    import MapKit
    
    struct MapView: View {
        @State private var region = MKCoordinateRegion(
            center: CLLocationCoordinate2D(latitude: 34.011_286, longitude: -116.166_868),
            span: MKCoordinateSpan(latitudeDelta: 0.2, longitudeDelta: 0.2)
        )
    
      var body: some View {
          Map(coordinateRegion: $region)
      }
    }
    	```

• @State: state property

  • State value 값이 변경되면 뷰는 해당 value의 appearance를 무효화하고 다시 body 값을 계산
  • state 변수값이 변경되면 view를 다시 랜더링 하기 때문에 항상 최신 값을 가진다.
  • 현재 뷰 UI의 특정 상태를 저장하기 귀해 만들어진 것이기 때문에 보통 private
  • state 변수를 사용 할 때는 변수 이름 앞에 $(달러) 표시를 해줘야 한다.

참고 자료

Section 6.

Compose the Detail View

(간단요약) step1 ~step10 뷰 위에 여러 뷰 올리기

• view 위에 view를 올릴 때 height만 적으면 width는 알아서 계산해서 만들어 준다.
  MapView().frame(height: 300)

• offset -> relative position
  : 오프셋이란, 기준이 되는 주소에 더해지는 값을 의미

  • 주의할 점 !! offset modifier을 사용하더라도 view의 original dimension은 변하지 않는다.
  • .offset(x: 100, y: 100)
    

• Position -> absolute position
  : View의 available한 space를 모두 사용

  • position(x: 100, y: 100)
    

• ignoresSafeAreaEdges
  : safe area 를 무시할 edges 를 지정한다.

  • 옵션 지정 안했을 때 (좌)
  • .ignoresSafeArea(edges: .top) top에 있던 safe area가 없어진다. (우)
    
    ო͈̮
  • .ignoresSafeArea(edges: .bottom) bottom 있던 safe area가 없어진다. (좌)
  • .ignoresSafeArea(edges: .all) bottom 있던 safe area가 없어진다. (우)
    
    ო̤̻

참고 자료 ദ്ദി˶˙ᵕ˙˶ )
참고 자료2