<h1><center> SwiftUI View Rendering (1) </center></h1>

###### title: `SwiftUI View Rendering`

###### tags: `💻 TIL`, `SwiftUI`, `View Rendering`

###### date: `2023-11-14T10:39:33.284Z`

> [color=#724cd1][name=데릭]

> [SwiftUI View Lifecycle - Vadim Bulavin](https://www.vadimbulavin.com/swiftui-view-lifecycle/)

> [Thinking in SwiftUI](https://www.objc.io/books/thinking-in-swiftui/)

> [The SwiftUI render loop - Rens Breur](https://rensbr.eu/blog/swiftui-render-loop/)

> [Exploring SwiftUI 3: View Hierarchies and State Updates - Benedict Quinn](https://blog.scottlogic.com/2020/01/28/Exploring-SwiftUI-3-View-Updates.html)

> [Understanding View Rendering Cycle in SwiftUI - azamsharp(YouTube)](https://www.youtube.com/watch?v=imiKAwYTX6s)

> [SwiftUI’s relationship to UIKit and AppKit - WWDC by Sundell](https://wwdcbysundell.com/2019/swiftui-relationship-to-uikit-appkit/)

> [Advanced Graphics and Animations for iOS Apps - WWDC NOTES by Federico Zanetello](https://www.wwdcnotes.com/notes/wwdc14/419/)

> [블로그 - Coden](https://velog.io/@ictechgy/SwiftUI%EC%9D%98-View-%EB%A0%8C%EB%8D%94%EB%A7%81%EC%9D%80-%EC%96%B8%EC%A0%9C-%EC%9D%B4%EB%A3%A8%EC%96%B4%EC%A7%80%EB%8A%94%EA%B0%80)

## 개요

> SwiftUI의 View의 Rendering 과정이 어떻게 되는가? <br>
> 이 과정이 궁금한 이유는 View의 UIComponent의 상태 값이 변경될 때마다, onAppear가 호출되기 때문이다. onAppear 메서드가 호출되면 문제가 무엇이 있냐면, 내가 예기치 못한 상황에서도 호출이 되기 때문이다. UIKit으로 생각해보면 layout의 subviews를 다시 그려라는 메서드(setneedslayout, layoutifneeded)를 실행 시키지 않으면 viewWillAppear가 다시 호출되는 상황은 생각하기 어렵다. <br>

- 그래서 일단 어떻게 View Rendering을 하고 View의 Lifetime에 대해 공부하고자 한다.
- 너무 내용이 방대하기 때문에 시리즈로 나눠서 해당 내용을 작성할 것이다.

## UnderStanding SwiftUI Views

> UIKit도 마찬가지지만, SwiftUI 또한 앱을 만들 때 라이프 사이클을 이해하는 것이 필수적이다.

View에 표시되는 Content를 설명하기 위해 조회수 그래프를 만든다.

SwiftUI는 UI를 업데이트 하기 위해 View 그래프를 직접 변경하지 않는다. 상태가 변경되었을 때, 새로운 상태 값을 통해 새로운 View 그래프가 계산된다. 그 다음 SwiftUI는 변경 사항을 위해 Rendering 작업을 진행한다.

> SwiftUI의 identity와 lifetime은 SwiftUI에 정의된 struct의 lifetime과는 별개로 분리된다.

SwiftUI의 ViewGraph는 뷰의 Rendering, non-Rendering 계층 구조를 관리한다.

**Non-Rendering 계층구조**

- Screen에 표시되어야 하는 항목들에 대한 정의이다.
- SwiftUI는 struct의 body를 사용하여 View가 생성된다. SwiftUI는 UI에 대한 모든 업데이트를 Non-Rendering 계층 구조의 이전 내용과 새롭게 만들어진 Snapshot을 탐색하여 변경된 내용들을 계산한다.
- 변경된 내용을 비교하기 위해 private AttributeGraph Framework를 사용한다.

**Rendering 계층구조**

- SwiftUI는 Rendering 계층구조를 통해 실제 그려질 부분을 생성하게 된다. 이 때, 계층구조의 뷰에는 각각 고유한 ID가 있으며, 각 뷰들의 lifetime은 Screen에 표시되는 동안의 시간을 말한다.

> View Body의 타입은 전체 뷰의 하위 그래프를 Encoding한다.

앱의 root View 내 body 타입을 검사하면 뷰 전체 계층구조가 포함되어 있는 것을 알 수 있다.

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, world")
            .background(Color.yellow)
            .font(.title)
            .dump()
    }
}

extension View {
    func dump() -> Self {
        print(Mirror(reflecting: self))
        return self
    }    
}

// Mirror for ModifiedContent<ModifiedContent<Text, _BackgroundModifier<Color>>, _EnvironmentKeyWritingModifier<Optional<Font>>>

print하면 위와 같은 내용을 확인할 수 있다.
이 print에는 View에 나타날 수 있는 모든 변형들이 포함된다.
이 내용은 아래에서 다시 검증한다.

struct ContentView_: View {
    var body: some View {
        Group {
            if true {
                Color.yellow
            } else {
                Text("Impossible")
            }
        }
        .dump()
    }
}

// Mirror for Group<_ConditionalContent<Color, Text>>

- Text는 보여질 수 없지만, `_ConditionalContent<Color, Text>`에는 있는 것을 확인할 수 있다.

**NOTE**

> `Thinking in SwiftUI`에 따르면 현재 보이는 계층 구조보다 뷰 전체의 계층 구조를 인코딩하면 더 효율적인 비교가 가능하다는 이점이 있다.

전체 뷰 계층 구조를 body의 타입으로 인코딩하면 뷰 그래프의 큰 부분이 미리 구성된다. 더 나아가서, SwiftUI의 Data Essentials에 따르면 뷰는 자주 복사되는데 이 때 두 가지 사항을 염두에 두고 개발해야 한다.

- initialization의 비용이 적게 들게 만들어야 한다.
- body 함수는 side effect가 없게 pure하게 만들어야 한다. 어떤 추가적인 추적이 필요한 작업없이 body 내에서 단순하게 뷰를 만들고 반환해야 한다.