[ios] SwiftUI 모달

18 Dec 2023

iOS 앱을 개발하다보면 사용자에게 추가 정보나 선택을 요청하기 위해 모달 팝업을 표시해야 하는 경우가 있습니다. SwiftUI에서는 모달을 쉽게 구현할 수 있습니다. 이번 글에서는 SwiftUI를 사용하여 모달을 어떻게 표시하는지 알아보겠습니다.

모달 띄우기

모달을 띄우기 위해서는 sheet modifier와 함께 사용할 수 있는 @State나 @Binding property가 필요합니다. 아래는 간단한 예제 코드입니다.

struct ContentView: View {
    @State private var isModalPresented = false
    
    var body: some View {
        Button("모달 띄우기") {
            isModalPresented = true
        }
        .sheet(isPresented: $isModalPresented) {
            ModalView()
        }
    }
}

struct ModalView: View {
    var body: some View {
        Text("모달 뷰")
    }
}

위 코드에서 ContentView에는 상태 변수 isModalPresented가 선언되고, 이 변수가 true로 설정되면 모달이 표시됩니다. Button을 터치할 때마다 isModalPresented의 값을 변경하여 모달을 띄울 수 있습니다. ModalView는 모달로 표시될 내용을 담고 있습니다.

모달 내부 뷰 화면 닫기

모달 내부 뷰에서 닫기 버튼을 추가하여 모달을 닫을 수 있습니다. 아래는 모달 내부 뷰에 닫기 버튼을 추가한 예제 코드입니다.

struct ModalView: View {
    @Environment(\.presentationMode) var presentationMode
    
    var body: some View {
        VStack {
            Text("모달 뷰")
            Button("닫기") {
                presentationMode.wrappedValue.dismiss()
            }
        }
    }
}

모달 내부 뷰에는 @Environment(\.presentationMode) 속성이 선언되어 있습니다. 이를 사용하여 dismiss() 메서드를 호출하여 모달을 닫을 수 있습니다.

이제 SwiftUI를 사용하여 iOS 앱에 모달을 구현하는 방법을 알아보았습니다. 모달은 사용자와의 상호작용을 위한 좋은 도구이므로, 적절하게 활용하는 것이 중요합니다.