[팀프로젝트 4일차] 하프모달 구현에 대한 고민

 

예매하기 버튼을 클릭하면 하프모달을 띄워야하는 상황이다. 

사실 지난 키오스크 앱을 구현할 때와도 비슷하다. 

그치만 그때보다 지금 고민이 되는 부분이 있다면, 

예매하기 버튼은 뷰에 있고 버튼을 눌렀을 때 addTarget으로 모달을 띄우려고 한다. 

이때, 별도의 뷰컨을 만들지 않고 함수 안에서 만들어 보려고 했는데

모달을 구현할 때 사용하는 present 메서는 UIViewController 클래스의 메서드라 

UIView에서는 직접 호출할 수가 없다고 한다. 이게 문제가 된 것이다...

 

 

 

MovieInfoViewController.swift

 

 

 

 

MovieInfoView.swift

showModal 뒤에 ()는 오타!

이렇게 작성하면 아래와 같은 오류가 발생한다. 

 

 

이 오류는 movieInfoVC 인스턴스를 초기화하는 시점에 self가 아직 초기화되지 않았기 때문이다.

이 문제를 해결하기 위해, reservationButton의 addTarget 설정을 init 메서드 내부에서 수행하도록 변경해야 한다.

addTarget은 init 메서드 내에서 설정하여, self가 초기화된 후에 movieInfoVC 인스턴스에 접근할 수 있게 한다.

 

 

이렇게 위치를 바꿔 주었더니 오류는 없어졌으나 화면이 움직이지가 않는 오류가 다시 발생...

 

 

MovieInfoView와 MovieInfoViewController 사이에 명확한 역할 구분이 필요합니다. MovieInfoView에서 모달을 직접 띄우는 것은 바람직하지 않을 수 있으므로, 액션을 설정할 때 MovieInfoViewController의 메서드를 직접 호출하는 대신, 델리게이트 또는 클로저를 사용하여 상호작용을 관리하는 것이 좋습니다.

 

📌 추가) gpt가 이렇게 말한 건 이 구조가 잘못된 이유는

뷰컨에서 뷰를, 뷰에서 뷰컨을 호출하고 있는 구조였던 것...

이렇게 하니까 작동이 잘 된다..ㅎ

 

 

아래는 델리게이트와 클로저를 사용하는 방법도 있다고 한다.

---

UIView 내에서 UIButton의 액션을 설정하고 다른 뷰 컨트롤러와 상호작용을 효율적으로 관리하기 위해서는 몇 가지 디자인 패턴과 방법을 사용할 수 있습니다. 여기에는 델리게이트 패턴, 클로저 콜백, 그리고 노티피케이션 센터를 사용하는 방법이 포함됩니다. 각각의 방법을 설명하고, 코드 예시를 제공합니다.

 

1. 델리게이트 패턴

델리게이트 패턴은 한 객체가 다른 객체에게 작업을 위임하는 패턴입니다. 이 패턴을 사용하면 UIView와 UIViewController 간의 상호작용을 명확하게 관리할 수 있습니다.

 

1. 프로토콜 정의:

protocol MovieInfoViewDelegate: AnyObject {
    func didTapReservationButton()
}

 

 

2. 뷰 클래스에 델리게이트 프로퍼티 추가:

class MovieInfoView: UIView {
    weak var delegate: MovieInfoViewDelegate?
    
    // 예약하기 버튼
    var reservationButton: UIButton = {
        let button = UIButton()
        button.setTitle("예매하기", for: .normal)
        button.setTitleColor(.mainWhite, for: .normal)
        button.backgroundColor = .mainRed
        button.layer.cornerRadius = 8
        button.addTarget(self, action: #selector(reservationButtonTapped), for: .touchUpInside)
        return button
    }()
    
    @objc
    private func reservationButtonTapped() {
        delegate?.didTapReservationButton()
    }
}

 

 

3. 뷰 컨트롤러에서 델리게이트 설정 및 구현:

class YourViewController: UIViewController, MovieInfoViewDelegate {
    private let movieInfoView = MovieInfoView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.addSubview(movieInfoView)
        movieInfoView.snp.makeConstraints { $0.edges.equalToSuperview() }
        movieInfoView.delegate = self
    }
    
    func didTapReservationButton() {
        let modalVc = ModalViewController()
        if let modal = modalVc.sheetPresentationController {
            modal.detents = [.medium()]
        }
        present(modalVc, animated: true)
    }
}

 

 

 

2. 클로저 콜백

클로저를 사용하여 액션이 발생했을 때 수행할 작업을 정의할 수 있습니다.

 

 

클로저 프로퍼티 추가

class MovieInfoView: UIView {
    var onReservationButtonTapped: (() -> Void)?
    
    // 예약하기 버튼
    var reservationButton: UIButton = {
        let button = UIButton()
        button.setTitle("예매하기", for: .normal)
        button.setTitleColor(.mainWhite, for: .normal)
        button.backgroundColor = .mainRed
        button.layer.cornerRadius = 8
        button.addTarget(self, action: #selector(reservationButtonTapped), for: .touchUpInside)
        return button
    }()
    
    @objc
    private func reservationButtonTapped() {
        onReservationButtonTapped?()
    }
}

 

 

뷰 컨트롤러에서 클로저 설정

class YourViewController: UIViewController {
    private let movieInfoView = MovieInfoView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.addSubview(movieInfoView)
        movieInfoView.snp.makeConstraints { $0.edges.equalToSuperview() }
        
        movieInfoView.onReservationButtonTapped = { [weak self] in
            let modalVc = ModalViewController()
            if let modal = modalVc.sheetPresentationController {
                modal.detents = [.medium()]
            }
            self?.present(modalVc, animated: true)
        }
    }
}

 

 

 

요약

델리게이트 패턴: 뷰와 뷰 컨트롤러 간의 명확한 역할 분리를 유지하고, 코드의 가독성과 유지보수성을 높이는 데 유용합니다.

클로저 콜백: 간단하고 직관적인 방법으로 뷰와 뷰 컨트롤러 간의 상호작용을 관리할 수 있습니다.

 

---

Q1: 델리게이트 패턴을 사용할 때, 델리게이트를 weak로 선언하는 이유는 무엇인가요?

델리게이트 패턴을 사용할 때, 델리게이트를 weak로 선언하는 이유는 메모리 누수를 방지하기 위해서입니다.

델리게이트 패턴에서는 객체 간의 상호작용이 주로 일대일로 이루어집니다. 예를 들어, MovieInfoView가 MovieInfoViewController에게 이벤트를 전달하는 경우입니다. 만약 델리게이트가 강한 참조(strong reference)를 가지게 되면, 두 객체 간에 순환 참조(circular reference)가 발생할 수 있습니다. 순환 참조는 두 객체가 서로를 강하게 참조하고 있어 메모리에서 해제되지 않는 상황을 의미합니다.

이를 방지하기 위해 델리게이트를 약한 참조(weak reference)로 선언하여, 델리게이트 객체가 더 이상 필요 없을 때 적절히 메모리에서 해제될 수 있도록 합니다.

weak var delegate: MovieInfoViewDelegate?

 

 

 

Q2: 클로저 콜백을 사용하는 방법과 델리게이트 패턴을 사용하는 방법의 차이점은 무엇인가요?

델리게이트 패턴과 클로저 콜백은 객체 간의 통신을 위해 사용되지만, 그 사용 방식과 목적에는 차이가 있습니다.

 

델리게이트 패턴

목적: 주로 객체 간의 이벤트를 전달하기 위해 사용됩니다.

구조: 하나의 프로토콜을 통해 여러 메서드를 정의하고, 이를 구현한 객체에게 이벤트를 전달합니다.

사용 예: UITableViewDelegate, UICollectionViewDelegate 등.

장점:

코드의 모듈성을 유지할 수 있습니다.

여러 메서드를 그룹으로 묶어 사용할 수 있습니다.

단점:

설정이 다소 번거로울 수 있습니다.

단순한 작업에 대해 과할 수 있습니다.

 

 

 

 

클로저 콜백

// 클로저 콜백 예시
networkManager.fetchData { result in
    switch result {
    case .success(let data):
        // 데이터 처리
    case .failure(let error):
        // 오류 처리
    }
}

목적: 주로 단일 작업이나 비동기 작업의 결과를 전달하기 위해 사용됩니다.

구조: 함수나 메서드의 인수로 클로저를 전달합니다.

사용 예: 네트워크 요청의 완료 핸들러, 애니메이션 완료 핸들러 등.

장점:

단일 작업에 대해 간단하고 명확하게 사용할 수 있습니다.

설정이 간단합니다.

단점:

여러 작업을 처리해야 할 경우 코드가 길어지고 복잡해질 수 있습니다.

메모리 관리에 주의해야 합니다 (특히 [weak self] 캡처 목록 사용).