SwiftUI) ContentView 이해하기 (2/2) - ContentView 사용하기

 

안녕하세요!! 소들입니다 :D

이번엔 ContentView 이해하기 2편입니당!!!

1편이 생각보다 되게 내용이 깊고 어려웠어서.. 이해하기 힘들었을 거 같은데

(Opaque Types에 대해 아직 내용 추가할 게 산더미;;)

 

그 산만 잘 넘었다면 이번 포스팅은 매우 간단하고 쉽고 짧습니다! :)

가볍게 읽어주세요!!

모든 포스팅은 편의 말투로 합니다~!!

 

 

 

 

1. ContentView는 뭐 하는 애일까?

 

struct ContentView: View {     var body: some View {         Text("Hello, world!")             .padding()     } }

 

 

맨 처음 프로젝트를 생성하면 나오는 구조체잖음?

우리가 지금껏 ViewController 혹은 View에서 화면을 그리고

변수를 생성하고 어쩌고 하던 작업들을

이 ContentView라는 구조체의 부에서 한다고 생각하면 됨!!!

 

다만, 이때 View라는 것은 이전 포스팅에서 공부 했듯이,

 

 

 

 

프로토콜로 구현되어 있고, body라는 프로퍼티를 갖고 있음!!

(상속이 안 되는 구조체에서 채택하는 것을 보면 당연히 프로토콜임!)

 

따라서 View를 채택하고 있는

ContentView 구조체 안에 body라는 프로퍼티는 당연히 있어야 되고,

이 body가 바로 ContentView의 최상위 View의 역할을 하는 것임!!!

참고로 이 body는 연산 프로퍼티(computed property)로 구현하면 됨!!

 

맨 첨에 봤던 코드처럼,

ContentView에서 최상위 View 역할을 하는 body 안에 Text라는 것을 넣을 경우,

(Text는 SwiftUI에서의 Label이라고 생각하셈)

 

 

 

 

이렇게 화면에 View가 그려지게 되는 것임!!

그럼이제 ContentView의 몇 가지 속성에 대해 알아보자 :)

 

 

 

 

2. ContentView 이해하기

 

2-1. body는 단 한개의 View만 반환해야 한답니다

 

body 연산 프로퍼티는 단 "한 개"의 View만 리턴해야 함!

따라서 만약 다음과 같이 Text를 두개 쓸 경우,

 

 

struct ContentView: View {     var body: some View {         Text("Hello, Sodeul!")         Text("Hello, DeulSo!")     } }

 

 

시뮬레이터로 돌리면

 

 

아무 문제 없는데용?? 잘나오는데용??

싶겠지만,

 

 

 

 

프리뷰가 쌍둥이가 되고요 👼👼

 

따라서, 만약 이렇게 여러 개의 배를 배치하고 싶을 땐

차근차근 포스팅 할 예정인

Stack / Group 등등..을 사용해서

여러 개의 뷰들을 하나의 뷰로 감싸줘서 하나의 View로 리턴해야 함!!! 

 

 

 

 

이런 식으로!! :)

 

실제 위 코드에서 body의 타입은

VStack<TupleView<Text,Text>>으로 VStack이라는 하나의 View로 반환되는 것임!

다만 우린 위의 복잡한 타입에 대해 알 필요 없고 명시할 필요도 없다! 왜 와ㅏ이?

body가 some View 즉, 불투명 타입을 리턴하니까! 하하

 

 

 

2-2. ContentView에 변수나 상수를 추가하고 싶으면 어떻게 하나요?

 

원래 해주던 것 처럼 해주시면 됩니다ㅋㅎㅎㅋ

 

 

 

 

이런 식으루!!

body에서 물논 사용 가능 함 :)

 

 

 

2-3. View의 생애주기를 관리하고 싶다면 어떻게 하나요?

 

그.. UIKit으로 개발할 때 사용하는 View Controller의 생애주기 있잖음?

 

ViewDidAppear

ViewDidDisappear

...

 

등등.. 이런 거 어떻게 사용하냐면

 

onAppear

onDisappear

 

 라는 modifier를 이용하면 됨!! :)

 

 

struct ContentView: View {
    var name = "Sodeul"
    var body: some View {        VStack {
            Text("Hello, \(name)!")
            .onAppear {
                print("Text가 보입니다!!")
            }
            .onDisappear {
                print("Text가 사라집니다!!")
            }
        }
    }
}

 

 

위와 같이 modifier를 이용해서

onAppear / onDisappear를 달아줄 수 있음!!

 

 

 

 

실제 시뮬레이터로 실행시켜 보면,

이렇게 잘 작동 한답니다 :)

 

 

+ 참고로

위의 body 프로퍼티는 View가 생성되고 한 번만 만들어지는 게 아니라

View의 Life Cycle 동안 필요할 때마다 여러 번씩 새로 만들어져서 리턴됨

(이 부분에 대해선 나중 포스팅에서 볼게욥!)

 

그럼 성능에 ㄱㅐ문제있는 거 아닌가요? 싶겠지만,

SwiftUI에선 View 자체가 클래스가 아닌 구조체로 매우매우 가볍기 때문에

말단 개발자인 우리가 걱정할 문제가 아니라고 한다^^;;

 

 

 

 

 

 

.

.

.

 

SwiftUI ContentView에 대해 이번엔 아주 가볍게 기본에 대해 알아보았으빈다

다음엔 어떤 내용일지 하하 고민좀 해보겠음

오타 및 잘못된 내용 피드백 대환영입니다!!