[WWDC 가보자고] WWDC 2019 / Building Custom Views in SwiftUI - 1

아래 내용은 WWDC영상을 보고 제 자신이 중요하다고 생각된 부분들을 정리한 글입니다.
보다 자세한 내용 혹은 전체 내용은 WWDC영상을 통해 확인하는 것을 추천드립니다.

두 줄 요약 🚀

• SwiftUI 에서 레이아웃이 어떤 프로세스로 그려지는지 알 수 있다. (with. Text)
• 프로세스를 이용해서 커스터마이징 된 뷰를 만들 수 있다.

영상 링크🔗

• https://developer.apple.com/videos/play/wwdc2019/237

Building Custom Views with SwiftUI - WWDC19 - Videos - Apple Developer

---

레이아웃이 그려지는 순서

SwiftUI에서 레이아웃이 그려지는 순서는 이렇습니다.

1. 부모 뷰가 자식 뷰를 위해 사용할 수 있는 공간을 제안합니다.
2. 자식 뷰는 스스로 자신의 사이즈를 결정합니다. (Self-sizing)
3. 부모 뷰가 사이즈가 결정된 자식뷰를 자신의 공간에 위치시킵니다. 

이렇게만 읽어서는 처음에 무슨 소리지 싶을겁니다..😇 읽었지만 뭘 읽었는지 모르겠다 느낌... 하나씩 예를 통해서 이해해봅시다!
WWDC 2019 SwiftUI세션에서는 항상 등장하는 아보카도 토스트가 등장하나봅니다ㅋㅋㅋㅋ 여기에서도 등장하네요.
아래에 간단한 SwiftUI코드를 가지고 레이아웃이 그려지는 순서를 차례대로 봅시다!

먼저 봐야할 부분은 뷰의 계층 구조입니다. SwiftUI 코드만 보고 생각했을 때는 Text 하위에 Padding, Padding 하위에 Background가 위치할 줄 알았지만, 자료에서는 반대로 위치하더군요.. 왜 그럴까요?
SwiftUI에서는 .padding(..), .background(..)와 같은 녀석들이 전달 받은 뷰를 변형해서 새로운 뷰를 만드는 것이기 때문에 Padding, Background가 더 상위 계층에 속합니다. padding, background가 기존의 뷰를 wrapping해서 뷰를 만든다! 라고 생각하면 편할 것 같네요.
위와 같은 처리 방식으로 인해 결론적으로 Root View 바로 하위에 가장 마지막으로 변형된어 생성된 뷰인 Background가 위치합니다.

이제 위에서 언급한 레이아웃 그리는 순서대로 진행을 해봅시다. 첫번째로 레이아웃을 그리는 순서는
1. 부모 뷰가 자식 뷰를 위해 사용할 수 있는 공간을 제안합니다. 입니다!
가장 최상위에 있는 뷰는 Root View이고 자식으로 Background를 가지고 있으므로 자식에게 사용할 수 있는 공간을 제안합니다. Root View는 모든 뷰의 최상위 뷰를 의미하며 화면 전체 영역의 공간을 가지고 있습니다. Root View에서 자식인 Background에게 자신의 영역을 사용할 수 있다고 제안을 합니다!

그럼 다음 차례는 부모로 부터 영역을 제안 받은 Background가 액션을 시작합니다. Background도 자식 뷰를 가지고 있기 때문에 Root View와 마찬가지로 자신의 영역을 Padding에게 제안합니다. 여기서 Background도 아무런 제약사항이 없으니 Root View와 동일한 공간을 사용할 수 있고 그대로 자식인 Padding에게 전달합니다.  

Background로부터 영역을 받은 자식인 Padding도 부모 자식관계를 보니 Text라는 자식을 가지고 있습니다. 그럼 위와 마찬가지로 자신의 영역을 자식인 Text에게 제안할겁니다. 하지만 자신은 .padding(10)이 걸려있으니, 부모로 부터 받은 영역 중 .padding(10)을 적용한 영역을 자식에게 제안합니다.

Padding으로부터 10의 패딩이 제외된 영역을 받은 Text는 더이상 자식을 가지고 있지 않기 때문에 드디어 2번 액션을 실행합니다.
2. 자식 뷰는 스스로 자신의 사이즈를 결정합니다. (Self-sizing)
현재 자료에서는 들어가있는 문자가 "Avocado Toast" 이므로 해당 글자가 들어가는 영역으로 사이즈가 할당됩니다. 사이즈를 정한 이후 자신의 부모에게 나 사이즈가 이만하다!! 라고 알려줍니다.

Text로부터 영역을 받은 Padding은 받은 Text의 영역에 패딩을 적용하는 것으로 자신의 사이즈를 결정하는 액션을 합니다. Text 영역에서 상하좌우에 10만큼 패딩을 적용하는 것으로 Padding의 영역을 결정합니다. 그 이후 자신의 영역을 부모인 Background에게 전달합니다.

Background는 Padding으로부터 전달 받은 영역에 인자로 들어가 있던 Color.green으로 색깔을 칠해줍니다. 그 외에 padding처럼 사이징을 하는 변수는 없기 때문에 Padding으로 받은 영역으로 자신의 사이즈를 결정짓고 마지막으로 Root View에게 자신의 영역을 전달합니다. Root View는 Background로부터 결정된 사이즈를 받아보고 자신의 영역(Root View는 화면 전체)에 위치 시킵니다. 이 액션이 
3. 부모 뷰가 사이즈가 결정된 자식뷰를 자신의 공간에 위치시킵니다. 
입니다. 여기서 Root View는 모든 뷰의 최상위 뷰이고 Root View는 neutral layout을 가지고 있습니다. 즉 중립기어로 놓고 있기 때문에 자식으로부터 전달받은 레이아웃을 자신의 중앙에 위치시킵니다!
이로써 레이아웃을 그리는 3가지 방법을 모두 거쳐서 최종 뷰의 레이아웃과 영역이 선정되었습니다.

이번 영상에서 가장 중요하게 생각하는 부분이 위 프로세스라고 생각합니다. SwiftUI에서 레이아웃이 그려지는 근본적인 원리를 설명했기 때문에 SwiftUI를 이해하는데 큰 도움이 되었습니다. 한 스텝씩 자료를 가지고 설명하느냐 글의 길이가 길어져서 두개의 글로 나누어 작성하고 있는데, 이해하는 관점에서는 효율적이라 생각합니다.

다음 글에서는 같은 영상의 중반부에서 얘기하는 Stack의 레이아웃이 어떻게 동작하는지를 정리하고자 합니다!