ViewModifier사용해보기

윤지하·2025년 9월 8일

swift

목록 보기

8/9

이번에 토스트를 추가하면서 ViewModifier를 사용해 봤습니다. 처음엔 단순히 코드를 따라 쳤는데, 알고 보니 SwiftUI에서 정말 유용한 패턴이더라고요. 한번 제가 사용한 방법을 정리해 보겠습니다.

ViewModifier란?

ViewModifier는 SwiftUI에서 뷰를 변경하고 꾸미는 재사용 가능한 컴포넌트입니다. 쉽게 말해 "뷰 변환기" 같은 역할을 한다고 보시면 됩니다.

protocol ViewModifier {
    func body(content: Content) -> some View
}

기존 뷰(Content)를 받아서 수정된 새로운 뷰를 반환하는 구조입니다.

ToastModifier 구현

저는 이런식으로 ViewModifier를 만들었습니다.

struct ToastModifier: ViewModifier {
    @ObservedObject var toastManager: ToastManager
    
    func body(content: Content) -> some View {
        content
            .overlay(
                VStack {
                    if let toast = toastManager.currentToast {
                        ToastView(message: toast, isShowing: $toastManager.isShowing)
                            .padding(.horizontal, 20)
                            .padding(.top, 60)
                    }
                    
                    Spacer()
                }
                .allowsHitTesting(false) // 터치 이벤트 통과
                , alignment: .top
            )
    }
}

이 ViewModifier를 채택해서 사용하면 항상 같은 위치에서 토스트가 표시되도록!

ViewModifier를 사용하는 이유

1. 코드 재사용성

ViewModifier 없이 토스트를 구현한다면 중복 코드가 많아 져요

// 매번 이렇게 반복해야 함
struct ContentView: View {
    @StateObject var toastManager = ToastManager()
    
    var body: some View {
        VStack {
            // 메인 컨텐츠
        }
        .overlay(
            // 토스트 오버레이 코드 반복...
        )
    }
}

struct SettingsView: View {
    @StateObject var toastManager = ToastManager()
    
    var body: some View {
        VStack {
            // 설정 컨텐츠
        }
        .overlay(
            // 또 같은 토스트 오버레이 코드...
        )
    }
}

ViewModifier를 사용하면

// 한 줄로 끝!
ContentView()
    .modifier(ToastModifier(toastManager: toastManager))

SettingsView()
    .modifier(ToastModifier(toastManager: toastManager))

2. 관심사의 분리

토스트 관련 로직이 모두 ToastModifier에 캡슐화되어 있어서:

메인 뷰는 본연의 역할에만 집중
토스트 UI 수정시 한 곳만 변경하면 됨
코드가 더 깔끔하고 유지보수하기 쉬움

3. 일관된 UI

앱 전체에서 동일한 토스트 스타일을 보장할 수 있습니다.

더 편리하게 사용하기

저는 View의 Extension을 만들어서 더 깔끔하게 사용할 수 있도록 해봤습니다!

extension View {
    func toast(toastManager: ToastManager) -> some View {
        self.modifier(ToastModifier(toastManager: toastManager))
    }
}

// 사용할 때
ContentView()
    .toast(toastManager: toastManager)