[OS - 🍎 macOS] SwiftUI

카테고리	게시글 작성 날짜	게시글 최근 수정 날짜	작성자
Operating System	2022.02.16. 01:29	2022.05.10. 20:11	Dev.Yang

 

SwiftUI는 Swift 언어의 모든 특성을 최대한 활용할 목적으로, Swift를 기반으로 처음부터 새롭게 구성한 프레임워크입니다. Swift의 장점을 최대한 살리면서 AppKit, UIKit처럼 구분하지 않으며 유저 인터페이스 영역까지 SwiftUI 하나로 모든 플랫폼에서 사용할 수 있도록 만들어졌습니다.

 

장점

• 코드를 읽고 이해하기 용이하여 오류가 발생할 수 있는 여지가 줄어들며 여러명의 개발자들과 협업에도 유용합니다.
• 모든 애플 플랫폼에서 동일한 프레임워크와 코드로 개발이 가능하고, 다른 운영 체제를 위한 애플리케이션으로 쉽게 이식할 수 있습니다.

---

🛠 그룹 (Group)

자식 뷰에 공통적으로 동일한 수식어를 적용하고자 하는 경우에 사용합니다.

🌎 https://developer.apple.com/documentation/swiftui/group 

 

Group {
    Text("SwiftUI")
    Text("Combine")
    Text("Swift System")
}
.font(.headline)

---

🛠 리스트 (List)

하나의 열에 여러 개의 행으로 표현이 되는 UI를 구성하여 다중 데이터를 손쉽게 나열할 수 있도록 구성 된 뷰를 의미합니다.

 

iOS에서는 아래와 같이 총 3가지 형태의 스타일을 제공하고 있습니다.

 

구분	설명
DefaultListStyle	리스트의 기본적인 스타일이며 iOS 환경에 따라서 자동으로 스타일을 적용합니다.
PlainListStyle	데이터의 목록을 각 행마다 하나씩 나열하는 형태의 기본적인 스타일입니다.
GroupedListStyle	각 섹션을 분리된 그룹으로 묶어서 표현하는 형태의 스타일입니다. iOS 또는 tvOS에서만 사용이 가능합니다.

---

🛠 뷰 레이아웃 과정 (View Layout)

SwiftUI에서는 뷰의 레이아웃을 아래의 형태의 순서로 구성합니다.

 

1. 부모 뷰가 활용 가능한 크기를 자식 뷰에 제안합니다.
2. 자식 뷰는 그 자신의 크기를 결정합니다.
3. 부모 뷰는 자신의 좌표 공간에서 자식 뷰를 적절하게 배치합니다.

---

🛠 중요 문법

• @ViewBuilder → 함수로 정의 된 매개 변수에 뷰를 전달받아 하나 이상의 자식 뷰를 생성하는 기능을 수행합니다. 또한, @ViewBuilder는 buildBlock이라는 타입 메서드에 값을 전달하고, 2개 이상의 View일 때에는 TupleView라는 타입을 반환합니다. 최대 10개까지 전달할 수 있습니다.
• @State → View 자체에서 가져야하는 상태 프로퍼티이자 원천 자료로, 어떠한 데이터에 대한 영속적인 상태를 저장하고 관찰하는 역할을 수행합니다.
• @Binding → 상위 View가 가진 상태를 하위 View에서 사용하고 수정할 수 있게 해주는 파생 자료에 사용합니다.
• @Observedobject → View 외부의 모델이 가진 원천 자료를 다루기 위해서 사용이되며, 그 중에서도 값 타입 (Value Type)이 아닌 참조 타입 (Reference Type)을 사용하는 경우에 사용합니다. 쉽게 설명하자면 View 외부의 모델에 의존성을 가지도록하여 그 데이터의 변화를 감지하기 위해서 사용합니다.
• @GestureState → @State와 비슷하게 상태를 저장하는 역할을 수행하지만, Gesture가 동작하는 순간에만 값이 변화하였다가 제스처 인식이 종료되면 다시 초기값으로 돌아오는 특성가졌습니다.

---

🛠 수식어 (Modifier)

SwiftUI View에서 사용 가능한 메서드를 뜻하며, 해당 메서드를 호출하였을 때 추가 동작이나 시각적 변화가 가미된 새로운 뷰를 반환합니다. 쉽게말하여 View가 다시 또 다른 View를 반환하게 하는 메서드를 뜻합니다.

 

• [P] padding → View에 적용 될 방향과 폭을 지정하여 여백을 추가하는 수식어입니다.
• [C] clipped → View를 벗어나는 이미지를 잘라 내기 위해서 사용하는 수식어입니다.
• [C] colorInvert → 색을 반전시켜주는 수식어입니다.
• [E] edgeIgnoringSafeArea → 지정 한 방향의 안전 영역을 무시할 수 있도록 하는 수식어입니다.
• [C] cornerRadius → View의 모서리를 둥글게 하기 위하여 사용하는 수식어입니다. SwiftUI에서는 clipToBounds 프로퍼티를 별도로 활성화 작업을 수행하지 않아도 됩니다.
• [S] Shadow → View에 그림자 효과를 적용하기 위하여 사용하는 수식어이며 불투명한 상태의 View에 모두 그림자 효과를 적용하기에 의도하지 않는 결과를 나타낼 수 있습니다.
• [F] frame → SwiftUI에서의 프레임은 예정 방식과 같이 제약 조건을 설정하는 것이 아닌, 액자처럼 콘텐츠를 담고 있는 하나의 뷰를 뜻한다.
• [R] Row → List에서 내용을 표시하는 하나의 뷰를 가리키는 용어입니다.
• [E] EmptyView → 어떠한 내용도 표현하지 않으며 공간도 차지하지 않는 View입니다.

---

🛠 용어 정리

• 원천 자료 (Source Data) → 데이터 자체가 본질적인 데이터를 의미합니다.
• 파생 자료 (Deribed Value) → 원천 자료로부터 부차적으로 파생되어 생성 된 데이터를 의미합니다.
• 단일 원천 자료 (Single Source of Truth) → 동일한 데이터 요소가 여러 곳으로 나뉘어 중복되지 않고 한 곳에서 다루어지고 수정되어야 합니다.

---

🚀 REFERENCE

SwiftUI개요 - Xcode - Apple Developer

GitHub - ChangYeop-Yang/iOS-SwiftUI

GitHub - giftbott/SweetSwiftUIExamples: 스윗한 SwiftUI 기본기 다지기

 

Apple Developer Documentation