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

###### title: ` `

###### tags: `💻 TIL`

###### date: `2023-12-18T10: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에 대해 학습해보자. 이 글은 내가 다른 사람이 쓴 글을 참고해서 공부했다는 것을 기록하기 위해서 작성한다.

## Thinking in SwiftUI

View tree와 render tree는 SwiftUI가 작동하는 것을 이해하기 위해 가장 기본적으로 중요한 개념이라고 할 수 있다. 우리가 원하는 Layout을 얻기 위해서 우리는 view tree가 어떤 구조로 이루어져 있는지 이해할 필요가 있다.

SwiftUI에서 State가 어떻게 작동하는지 이해하기 위해, 뷰의 lifetime과 우리가 만든 view tree가 어떻게 관계되는지 이해하는게 중요하다.

lifetime을 이해하는 것은 데이터를 적재하거나 필요할 때 뷰를 업데이트하기 위해 SwiftUI코드를 효율적으로 작성하는 것만큼 중요하다.

마지막으로 애니메이션과 전환에는 view tree에 대한 이해가 필요하다.

- view tree에 대한 이해가 어디서든 필요함.

Text("Hello")
    .padding()
    .background(Color.blue)

view tree로 보면
.background 아래에 padding, Color가 있고,
padding 아래에 Text가 있다.

위의 내용을 더 자세히 설명하면, background modifier는 view tree의 root에 있다. 그리고 하위 뷰로는 padding과 Color뷰로 맨 위에 그려지게 된다.

**NOTE**

> background view의 modifier 자체에는 아무것도 그리지 않는다. 심지어 background modifier가 view tree에서 가장 상위의 뷰이지만, 실제 배경은(파란색) 여전히 텍스트 뒤에 그려져 있다.