SwiftUI - View 사이즈가 결정되는 방법

Swift UI 에서 뷰를 작성하다보면 기본적인 위치와 크기가 잡히는 방식에서 묘한 위화감이 생긴다.

1. 하위뷰로 Text("a") 를 추가했더니 텍스트에 딱 맞는 사이즈로 추가된다.
2. Text("a") 는 상위뷰에 중앙으로 노출된다.

결과는 단순하고 그러려니~ 하고 넘어가려고 했더니 이 Text 컴포넌트의 위치값(Position) 을 잡을 방법이 애매해졌다. 결국 스텍뷰로 감싸고, Spacer() 를 적절한 위치에 추가함으로서 원하는 위치로 정렬시키는게 가능했다.

그런데, 어째서 이런 결과가 나왔을까?

만약 UIKit 을 사용한 추가였다면

1. UIKit 으로 UILabel 을 추가한다.
2. 해당 베이스 뷰에서 UILabel 이 위치할 Position 값(x,y) 과 프레임을 지정한다. (혹은 오토레이아웃을 작성한다)
3. 베이스뷰에 추가된 라벨이 원하는 위치에 표기된다.

이런 식으로 흘러갔을것이다. UIKit 에서는 추가되는 컴포넌트 자신이 어떤 위치로 들어가야할지 위치값이나 제약조건을 가진다. 그러나 Swift UI 에선 이게 미묘하게 다르다.

SwiftUI 에서 뷰가 사이즈를 결정하는 방법

Swift UI 는 기본적으로 하위뷰에 맞게 아무 사이즈를 지정하지 않는다면 하위뷰의 사이즈로 뷰가 작성된다. 예시를 위해 다음과같은 뷰를 만들고 ViewHierarchy 를 열어서 적용된 사이즈를 확인해봤다.

struct ContentView: View {
    var body: some View {
        ParentView()
            .border(.black, width: 1)
    }
}

struct ParentView: View {
    var body: some View {
        Text("Text")
            .foregroundColor(Color.red)
            .border(.red, width: 1)
    }
}

ParentView 와 Text 컴포넌트 모두 사이즈를 지정하지 않았더니, 두가지 크기가 모두 동일하게 Text에 fit 된 사이즈로 맞춰진것을 볼 수 있다.

즉, 별도의 세팅이 없다면 ParentView 의 사이즈는 자식뷰의 크기에 맞게 조정된다.

1. 부모뷰는 하위뷰에게 자신이 사이즈를 문의한다.
2. 자식뷰는 자신이 표기되기 위한 사이즈를 부모뷰에게 전달한다.
3. 부모뷰는 자식뷰가 전달한 사이즈로 자신의 크기를 변경한다.

여기서 부모뷰에 크기를 100 x 100 으로 고정하면 어떻게 될까?

struct ContentView: View {
    var body: some View {
        ParentView()
            .frame(width: 100, height: 100)
            .border(.black, width: 1)
            .background(Color.green)
    }
}

(뷰 하이라이키가 좀 이상하지만) 100 x 100 의 사이즈 안에서 텍스트뷰는 자신의 사이즈를 고수했고, 대신 중앙에 정렬되었다.

4. 부모뷰의 사이즈가 지정되어있다면 자식뷰가 전달한 사이즈를 무시한다.
   4-1 이때 자식뷰는 부모뷰의 중앙에 위치한다.

여기까지가 뷰가 그려지는 기본 공식.
이를 토대로 ParentView 또한 자신의 바로 상위의 뷰인 디바이스스크린 크기의 ContentView 에서 자신에게 지정된 크기를 가지고 센터로 정렬되었다.

마무리

1. 모든 뷰는 바로 자신의 상위뷰와 소통을 통해 사이즈가 결정된다.
2. UIKit 을 쓸때 오토레이아웃의 상관관계를 생각하며 뷰를 짰던것처럼 SwiftUI 는 상위뷰와의 관계를 생각하며 짜야한다.
3. 만약 상위뷰의 크기를 자식뷰가 알고싶다면 GeometryReader 를 써야한다.