SwiftUI_Tutorial 간단 정리(1/3) - SwiftUI essentials

이 글은 누군가에게 지식을 전달하기 위한 글 보다는 개인이 알아보기 편하게 정리한 글 입니다.

 

다음 글 : https://dev-doogie.tistory.com/24

 

SwiftUI_Tutorial에는 크게 네 가지 챕터가 있다

 

SwiftUI essentials, Drawing and animation, App design and layout 그리고 Framework integration

 

그리고 Framework integration 에는 UIKit과 연결하여 SwiftUI를 사용하는 방법 + watchOS, macOS에 관련된 내용들이 있는데

나는 이 튜토리얼을 빠르게 공부 하고 TCA튜토리얼로 넘어가기, 더 나아가 현재 출시 되어 있는 어플을 SwiftUI로 전환하는 것이 목표이기 때문에 Framework integration챕터의 첫 강의 까지 해서 3개의 게시글로 작성하려고 한다

---

 

해당 글은 깃 허브 PR 에 작성된 글을 확인하기 편하게 블로그로 재 작성한 글 입니다.

 

Creating and combining views

• SwiftUI의 선언형 뷰 구성 방식과 Mapkit에 대해 주로 다룸
• 크게 이렇다할 정리 내용은 없다.

Building lists and navigation

1. List를 통해 뷰를 반복문을 돌려 간단하게 화면을 표시할 수 있다

        NavigationSplitView {
            List(landmarks) { landmark in
                NavigationLink {
                    LandmarkDetailView(landmark: landmark)
                } label: {
                    LandmarkRowView(landmark: landmark)
                }
            }
            .navigationTitle("Landmarks")
        } detail: {
            Text("Select a Landmark")
        }

• UIKit과 비교했을 때 (Cell을 만드는 것 ≒ View를 만드는 것) 이지만 List를 만드는 코드가 진짜 엄청난 차이를 보인다.
  (Cell과 같은 View를 구성하는 코드는 과정은 비슷하니 제외하고, TableView를 만들 때도 기본 몇 십줄의 코드가 필요한 반면 위 코드가 List구현의 끝이다... 위 코드로 UIKit의 TableView를 만드는 것이다...!)

2. List를 만들 때는 List요소당 id가 필요하다

• id: \.id 파라미터를 통해 전달할 수 도 있지만 List를 구성하는 모델이 Identifiable를 채택하면 생략 가능

List(landmarks) { landmark in 
// or
List(landmarks, id: \.id) { landmark in

 

3. NavigationSplitView를 이용하면 별도의 코드 없이 큰 화면 대응이 가능하다(단, 17.0 이상에서만 사용 가능, 이하 버전에서는 NavigationView 사용)

 

Handling user input

(이 강이 이번 챕터의 핵심이지 않은가 싶다)

@state

• @state로 선언한 프로퍼티는 값이 변경되면 뷰에도 반영됨
• 이는 SwiftUI에 의해 관리되는데 자식뷰로 전달해 자식뷰가 초기화 되는 과정에서 storage에 문제가 생길 수 있어 정보를 갖는 가장 최상위 뷰에 private으로 선언해야함
• 만약 자식 뷰가 해당 프로퍼티를 사용해야한다면 @Binding으로 전달하거나 상위 뷰에서 read-only property로 설정하여 공유 해야함
• toggle과 같이 해당 값에 의해 뷰가 변경되는 경우라면 직접 토글을 해줄 필요 없이 $프로퍼티이름을 전달헤 자동으로 연결되게 할 수 있음

@Observable

• @Observable로 선언된 class는 변화가 일어나면 이를 감지해 뷰로 반영할 수 있게 즉, 관찰 가능한 객체로 만들어준다
• @Observable로 선언된 class를 @state 프로퍼티로 만들어 사용한다

@Binding

• 어떤 변경 가능한 속성과 뷰 사이의 양방향 연결을 생성
• @Binding은 데이터를 직접 저장하는 대신 다른 곳에 연결되어 @Binding이 연결된 뷰에서 변경이 일어나면 원래 데이터도 변경한다

@Bindable

• Observable 프로토콜을 준수하는 데이터 모델 개체의 변경 가능한 속성에 대한 바인딩을 생성할 수 있게 해줌
• 이 튜토리얼에서는 ModelData라는 @Observable객체가 있는데 이 객체 안에서 변경 가능한 속성을 Binding으로 변환할 수 있게 해준다
• 즉, @Observable객체는 관잘하여 뷰에 반영할 수 있게 한다, 그리고 이 객체를 @Bindable로 감싸주면 그 객체 한에 있는 속성을 Binding프로퍼티로 만들 수 있게 해준다