SwiftUI - ViewModifier(커스텀 뷰 수식어) 만들기

그림) ViewModifier(1)

SwiftUI에서 View를 조금 더 간편하게 사용할 수 있도록 돕는 ViewModifer 프로토콜에 대해서 살펴보겠습니다.

 

그림) ViewModifier(1)

보통 SwiftUI에서 View를 우리의 입맛대로 꾸미기 위해서 수식어를 적용합니다. 위의 그림과 같이 말이죠. 그런데, 문득 반복적으로 사용하는 뷰와 그에 따른 수식어들이 있다는 것을 느낍니다.

 

그때마다 똑같은 수식어들을 작성해주는 것은 코드의 양이 많아져 보기에도 좋지 않을 뿐만 아니라, 스트레스(?)를 유발하지요. 그때 바로 ViewModifer 프로토콜을 적절히 사용하면 아주 편리한데요.

 

그렇다면  ViewModifer 프로토콜은 어떻게 생겨먹은 물건(?)인지, 그 모습을 보면 아래의 그림과 같은데요. 보기만 해도 현기증이 나지 않나요? 아직 SwiftUI가 익숙하지 않은 분들은 저와 같으리라 봅니다.

 

먼저 내용을 살펴보기 전에 이전에 제가 포스팅했던 ContentView의 관련 글을 보고 오시면 내용을 이해하는데 더욱 수월할 수 있습니다. value-of-life.tistory.com/155

SwiftUI - ContentView 구조 이해하기

그림) ViewModifier(2)

그림) ViewModifier(2)에 ViewModifer 프로토콜에서 구현해야 하는 것은 body 함수인 것을 확인할 수 있고요. 반환 값은 역시 View 프로토콜을 준수하는 어떤 타입이면 되는 것을 알 수 있습니다.

 

body의 매개변수 content에는 뷰를 전달받는데, 우리가 적용하고 싶은 수식어들의 대상이 되는 뷰를 말합니다. 말하는 저도 어려운데요. 결과적으로 우리가 적용하고 싶은 수식어들을 content에 적용하면 됩니다.

 

자신만의 ViewModifier를 만들고 아래와 같이 modifier라는 수식어를 이용해 적용하게 되면 직접 모든 수식어를 지정한 것과 같은 결과를 얻을 수 있습니다.

 

그림) ViewModifier(3)

그림) ViewModifier(4)

다른 방법으로도 같은 결과를 낼 수 있는데요. 바로 ModifiedContent(content:modifier:) 함수를 이용하는 것입니다. content에는 수식어들의 대상이 되는 뷰를 전달하고, modifier에는 만든 ViewModifier를 전달합니다.

 

사실, 우리가 작성한 뷰와 그 수식어들은 some View라는 타입에 포함되어 반환이 되는데요. 그 실체를 들여다보면 실제로는 아래의 형태로 반환되는 것을 확인할 수 있습니다.

 

그림) ViewModifier(5)

그림) ViewModifier(6)

지금 Viewmodifier 프로토콜의 사용법과, 그 내부 원리를 조금 살펴보았습니다. 이를 조금 더 응용하여 편리하게 사용할 수 있는 방법들이 있는데요. 두 개의 ViewModifier가 있는데, 모두 적용하고 싶다면 어떻게 해야 할까요?

 

concat이라는 단어 많이 들어보셨지요? 여기서도 이 함수를 사용하면 되는데요. 사용법은 매우 간단합니다. myViewmodifier_1, myViewmodifier_2 이렇게 2개를 만들어 놓았다고 가정하겠습니다.

 

Text("hello world")      .modifier(myViewmodifier_1().concat(myViewmodifier_2()))

위와 같이 사용하게 되면, 작성한 2개의 커스텀 수식어가 모두 적용하게 됩니다. 그런데, 한 가지 아쉬운 점은 이렇게 사용하는 형식이 익숙하지 않아 불편한 느낌이 있습니다.

 

.modifier를 사용하거나 ModifiedContent는 우리가 수식어를 적용할 때 사용하는 방식과는 조금 거리가 있습니다. 같은 형식으로 사용하면 보기도 좋고 가독성도 좋아질 것 같은데요. 여기에도 방법이 있습니다.

 

Extension을 활용하는 것인데요. 우리가 사용하는 수식어들은 View프로토콜에 존재하는 프로퍼티이기 때문에 커스텀 수식어 역시 View 프로토콜에 Extension을 통해 추가로 정의해주면 됩니다.

 

위와 같이 View 프로토콜에 커스텀 뷰를 추가해주면, 실제 적용할 때는 기존에 사용하던 방식으로 수식어를 적용하여 눈이 편합니다. 즉, 아래와 같이 사용할 수 있게 됩니다.

그림) ViewModifier(7)

읽어주셔서 감사하며, 궁금하신 점이나 오류가 있다면 댓글 부탁드립니다.

 

참조한 책 : 스윗한 SwiftUI