SwiftUI - Modifier, ViewModifier

Whale·2022년 7월 1일
0

SwiftUI 기초학습

목록 보기
6/7

SwiftUI 를 통해 뷰를 작성하다보면 공통코드에 대한 이슈가 발생한다.

기존 명령형이었던 Swift 에서는 타겟이 되는 특정 뷰 타입에 맞춰서 공통사용이 가능한 Func 을 작성하고 뷰 변수에 적용하거나, 뷰 변수에 상속하는 등 다양한 방법으로 적용이 가능했다.

하지만 SwiftUI 에서는 타겟이 되는 뷰를 변수로 관리하기 어려울 뿐더러, 상속도 힘들어보인다.

목적은 다음과 같다.
1. 특정 텍스트에 font, color, background 를 묶어서 스타일로 적용하고싶다.
2. 매번 각각을 지정하고싶지 않다.

커스텀 폰트를 지정하고, forgroundColor, background 를 지정하는식으로..

이와 동일한 스타일을 쓰고싶을때 그대로 복사해서 가져가는게 제일 쉬운방법. 하지만 관리되지 않을게 뻔하다.
이럴때 ViewModifier를 사용하여 하나의 스타일 뭉터기(?) 를 만들수 있다.

struct FontModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .font(Font.custom("Georgia", size: 20))
            .foregroundColor(Color.white)
            .padding(10)
            .background(
                RoundedRectangle(cornerRadius: 10)
                    .foregroundColor(Color.red)
            )
    }
}

ViewModifier 를 상속하는 별도의 struct 를 만들면, 코드처럼 body 를 하나 생성할 수 있다. 우리가 View를 상속하여 만들던때와 비교하면 인자로 content: Content 가 달려있다는게 다르다.

이 content 가 바로 스타일을 적용하고싶은 대상자라고 볼 수 있다. 이걸 텍스트와 같은 오브젝트로 보고 커스텀한 내용을 달아주고, 아래처럼 실제 사용부에 modifier 룰 통해 적용하면...

struct ModifierTest: View {
    
    let fontModifier = FontModifier()
    
    var body: some View {
        VStack {
            Text(/*@START_MENU_TOKEN@*/"Hello, World!"/*@END_MENU_TOKEN@*/)
                .modifier(fontModifier)
            
            Text("Hello, Modifier!")
                .modifier(fontModifier)
        }
    }
}


완성.

마무리

modifier 를 통해서 작게작게 쪼개서 공통스타일을 만들 수 있지만, 결국 수많은 modifier 가 생기고, 중복되면 답이없는건 마찬가지. 개발자의 꾸준한 유지보수만이 살길이다...

++ modifier 는 특정 인자를 생성자로 받음으로서 여러 상황에 대응도 가능하다.

profile
그저 오래된 iOS 개발자.

0개의 댓글