[SwiftUI] - Stanford CS193P : Spring 2021(1강)

Lecuter 1 : Getting started with SwifUI

 

 강의 주요 타임스탬프 

타임라인	Content
40:00	View처럼 행동하는 것이란?
43:09	some View에 대한 질문 + Lego 비유
50:03	View에서의 함수형 프로그래밍
53:30	some View에 대한 답
58:59	View Modifier란?
1:05:00	stroke 메서드
1:07:15	Add Modifier
1:09:25	ZStack이란?
1:10:38	View Builder란?
1:14:34	view modifier 적용의 2가지 케이스
1:18:02	SwiftUI 코드 스타일

---

강의 내용 정리

 

View란?

• View는 스크린 상의 직사각형의 영역에서 사용자로부터 입력을 받고 출력을 나타내는 것
• simple view , combining view , bag of views의 3가지 종류가 있다.

        * Bag of Views : 여러 View들을 View Builder를 통해 한 영역에 모아둔 것

        * Combining View : Bag of Views들을 조합한 것

 

 struct ContentView: View {
 	var body: some View {
 		Text("Hello World!")
 	}
 }

위의 코드는 View와 같이 행동하기 위한 가장 기본적인 코드이다. ContentView라는 Struct안에 작성된 코드들을 자세히 보자.

View처럼 행동하기 위해서는 body라는 변수가 필요하다. 이때, body 변수는 변수 메모리에 저장되어서 변수처럼 쓰이는 것이 아니라 여러 View들이 조합된 최종 View가 스크린 상에 나타나게 하기 위한 연산의 목적으로 쓰인다.

---

some View란 무엇일까?

 

보통 Swift 문법에서 변수 옆의 콜론 다음에는 변수의 타입을 기재한다. 따라서 some View라는 것은 타입이라는 이야기인데 왜 굳이 정확한 타입을 기재하지 않고 모호하게 some View라고 해야 할까?

 

이유는 간단하다. body 변수는 앞서 설명했듯이 연산의 결과로 하나의 최종적인 View를 나타낸다. 이러한 View가 어떠한 View 타입일지는 우리가 예상할 수 없다. 왜냐하면 ZStack같이 View Combiner나 View Modifier 같은 것들이 조합되는 복잡한 코드가 작성되어서 연산될 텐데 이 연산의 결과가 어떤 View 타입일지 사람이 일일이 판단할 수는 없기 때문이다. 따라서 특정한 View 타입을 기재하지 않고 some View라고 기재함으로써 일단 View 타입 중에 하나일 것이라고만 명시하는 것이다.

---

View Modifier란?

 

simple View에 color, padding 같이 속성을 정해주는 역할을 한다. 이러한 Modifier들이 붙은 View는 이전과 다른 새로운 Modified View가 된다. 즉, Modifier가 여러개인 경우 붙은 순서대로 순차적으로 적용되며 적용될 때마다 매번 새로운 View가 생겨난다는 것이다.

View Modifier는 상속과 오버라이딩이 가능하다.

---

ZStack이란?

 

ZStack은 View Combiner로써 Combining View를 만든다. View Builder들이 만든 여러 Bag of Views들을 조합하는데 ZStack은 이것들을 Z축 기준으로 조합한다. 

* View Builder가 리턴하는 Bag of Views들은 tuple Views라고 한다.

 

 ZStack {
 	RoundedRectangle(cornerRadius: 25.0)
		.stroke(lineWidth: 3)
	Text("Hello World!")
 		.foregroundColor(.orange)
 }
 .padding(.horizontal)
 .foregroundColor(.red)

 

위의 코드는 ZStack의 예시이다. 눈여겨 봐야할 것은 Modifier들이다. ZStack 외부에서 선언된 것들과 ZStack 내부 즉, 안에 있는 View Builder에서 선언된 것들이 존재한다. 앞서 말했듯이 Modifier들은 상속과 오버라이딩이 가능하다고 했다.

foregroundColor를 보면 쉽게 알 수 있다. 외부에서 즉 ZStack 자체에서 선언된 것은 상속이 되어 안에 있는 모든 View Builder들에게 적용된다. 또한, 내부에 선언된 foregroundColor가 적용되는 것을 봐서는 오버라이딩도 가능하다는 것을 의미한다.

하지만, padding의 경우는 다르다. padding의 경우는 foregroundColor처럼 외부에서 선언되었을 때 상속되어 모든 View Builder들에서 적용될 것 같지만 실제로 보면 ZStack 자체에서만 적용되고 내부의 Builder들에겐 적용이 되지 않았다.

 

이처럼, ZStack같은 View Combiner에 적용되는 View Modifier들에는 2가지 케이스가 존재한다. 한 케이스는 상속이 되는것, 다른 한 케이스는 상속이 되지 않는 것이다.

* 사실 이 부분은 강의에서 명확하게 집어주시지는 않아서 정확한 정보인지는 모르겠지만 나는 이렇게 이해했다...

---

1강을 마치며...

 

아무래도 영어 강의이기 때문에 자막을 키더라도 명확하게 정보를 받아드리기에는 힘들었다. 하지만, 단순히 SwiftUI의 사용법을 가르쳐주는 것이 아니라 근본적으로 왜 이렇게 사용하는 가를 예시를 들어가면서 가르쳐주셔서 정말 좋았다! 또한 함수형 프로그래밍과 객체지향형 프로그래밍이 둘 다 가능한 Swift의 강력함을 처음으로 실감했던 것 같다.