UIKit에는 있고 SwiftUI에는 없는 것 - viewDidAppear

[shippingpark]

안녕하세요! 3기 보노입니다.

최근 UIKit으로

1. 커스텀 화면 전환(transition)이 끝난 뒤
2. 뷰의 애니메이션을 실행을 수행해야 하는 화면을 만들다가

SwiftUI에는 커스텀 화면 전환(transition)이 끝난 시점을 알려주는 메서드가 없음을 깨달았습니다.

onAppear는 화면이 자리 잡은 시점이 아닌, 보이는 시점에 불리는 메서드이기 때문입니다.

과거에 onAppear가 실행되는 시점에 대한 고민을 한 적이 있습니다.
그러니 onAppear는 UIKit의 뷰컨트롤러 생명주기 메서드와의 비교하자면 무엇과 같은 지,
제가 필요로 하는 커스텀 화면 전환(transition)이 끝난 시점은 어떤 메서드를 통해 알 수 있는 지 가볍게 적어 보았습니다!
(보다 딥한 내용은 다루지 않습니다! )

SwiftUI의 onAppear 메서드란?

SwiftUI에서 onAppear는 뷰가 사용자에게 보이기 시작할 때 실행되는 메서드입니다.

예를 들어, A 화면에서 B 화면으로 전환할 때, B의 onAppear는 B 화면이 생성되어 뷰 계층에 포함될 때 호출됩니다.
이 시점은 전환 애니메이션이 끝나기 전일 수 있어, 후속 애니메이션이 전환 도중에 시작되게 됩니다.
(영상 첨부하겠습니다!)

UIKit의 ViewController LifeCycle

UIKit에서는 뷰의 상태에 따라 호출되는 여러 생명주기 메서드가 있습니다.

그중 본문에서 언급될 두 가지는 다음과 같습니다:

• viewWillAppear(_:): 뷰 컨트롤러의 뷰가 화면에 표시되기 직전에 호출. SwiftUI의 onAppear가 실행되는 시점과 같음
• viewDidAppear(_:): 뷰 컨트롤러의 뷰가 완전히 화면에 표시된 후 호출. 화면이 제 자리를 잡은 후에 실행되는 메서드

저는 화면 전환이 끝난 뒤, B 화면이 자리 잡은 시점에 애니메이션 실행을 구현해야 합니다.
그러니 viewWillAppear 메서드가 아닌 viewDidAppear를 필요로 했습니다!

둘의 시점에는 어떤 차이가 있을까요?

먼저 SwiftUI의 onAppear 메서드 실행시점을 보며 viewWillAppear의 실행 시점도 추측해 보겠습니다

코드 예시

SwiftUI 코드

import SwiftUI

struct AView: View {
  @State private var showB = false
  
  var body: some View {
    VStack {
      Button("Go to B") {
        showB.toggle() // B 화면을 나타내기 위해 상태 변경
      }
    }
    .fullScreenCover(isPresented: $showB) {
      BView() // BView가 화면에 나타날 때 `onAppear` 호출
    }
  }
}

struct BView: View {
  @State private var showDetail = false
  
  var body: some View {
    HStack(spacing: 10) {
      Text("This is B")
        .onAppear {
          withAnimation(Animation.easeIn(duration: 1.0)) { 
            showDetail = true // 애니메이션으로 상세 텍스트 표시
          }
        }
      
      if showDetail {
        Text("onAppear")
          .background(.red)
          .transition(.opacity) // 애니메이션 전환 효과
      }
      Spacer() // 오른쪽 여유 공간
    }
    .frame(width: 300) // 전체 뷰의 가로 길이 설정
  }
}

설명:

• AView에서 버튼을 눌러 showB 상태를 변경하면 BView가 표시됩니다
• **onAppear**는 B 뷰가 화면에 추가될 때 호출됩니다
• onAppear가 실행되면 Text("onAppear")이 화면에 서서히 나타나게 됩니다

onAppear가 실행되는 시점을 확인하면 아래와 같습니다

This is B 텍스트와 onAppear의 생성이 동일한 게 보이실 겁니다!

onAppear의 실행이 뷰가 정해진 위치에 도달하는 순간이 아닌, 생성을 자체를 기준으로 함을 알 수 있습니다

현재 제가 구현해야 하는 화면은 전환 애니메이션이 끝난 뒤 실행 되기를 기대하기 때문에
화면 전환에 소모되는 시간만큼 애니메이션 실행 delay를 주어야 원하는 화면을 구현할 수 있습니다

UIKit 코드

import UIKit
class AViewController: UIViewController {
  let button = {
    let button = UIButton(type: .system)
    button.setTitle("Go to B", for: .normal)
    button.translatesAutoresizingMaskIntoConstraints = false
    return button
  }()
  
  override func viewDidLoad() {
    super.viewDidLoad()
    button.addTarget(self, action: #selector(presentBViewController), for: .touchUpInside)
    
    view.addSubview(button)
    
    NSLayoutConstraint.activate([
      button.centerXAnchor.constraint(equalTo: view.centerXAnchor),
      button.centerYAnchor.constraint(equalTo: view.centerYAnchor)
    ])
  }
  
  @objc private func presentBViewController() {
    let bVC = BViewController()
    bVC.modalPresentationStyle = .fullScreen
    present(bVC, animated: true, completion: nil)
  }
}

class BViewController: UIViewController {
  private let mainLabel: UILabel = {
    let label = UILabel()
    label.text = "This is B"
    label.translatesAutoresizingMaskIntoConstraints = false
    return label
  }()
  
  private let detailLabel: UILabel = {
    let label = UILabel()
    label.text = "onAppear"
    label.alpha = 0 // 초기에는 보이지 않음
    label.backgroundColor = .red
    label.translatesAutoresizingMaskIntoConstraints = false
    return label
  }()
  
  override func viewDidLoad() {
    super.viewDidLoad()
    view.backgroundColor = .white
    view.addSubview(mainLabel)
    view.addSubview(detailLabel)
    
    // 레이블을 수평으로 배치
    NSLayoutConstraint.activate([
      mainLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 30),
      mainLabel.centerYAnchor.constraint(equalTo: view.centerYAnchor),
      detailLabel.leadingAnchor.constraint(equalTo: mainLabel.trailingAnchor, constant: 10),
      detailLabel.centerYAnchor.constraint(equalTo: mainLabel.centerYAnchor),
      detailLabel.trailingAnchor.constraint(lessThanOrEqualTo: view.trailingAnchor, constant: -30)
    ])
  }
  
  override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    // **전환이 완료된 후** 호출됨
    UIView.animate(withDuration: 1.0, delay: 0, options: .curveEaseIn, animations: {
      self.detailLabel.alpha = 1 // 알파 값 애니메이션
    })
  }
}

설명:

• viewDidAppear 메서드가 실행되면 detailLabel이 화면에 등장하게 됩니다

화면이 고정된 뒤에 onAppear 텍스트가 등장함을 확인할 수 있습니다

영상을 통해 확인할 점

영상을 보면 두 가지 상황을 비교할 수 있습니다:

1. SwiftUI: onAppear: 화면 생성과 동시에 호출
2. UIKit: viewDidAppear: 화면 전환이 끝난 후에 호출

UIKitviewWillAppear

• UIKit의 VC 생명주기 메서드 중 viewDidAppear가 아닌 viewWillAppear도 간단히 확인해보겠습니다.

화면 생성과 동시에 빨간색 텍스트가 올라옴 을 확인할 수 있습니다 !

즉, UIKit의 viewWillAppear와 SwiftUI의 onAppear는
화면이 보이는 시점에 호출되는 메서드임을 알 수 있습니다.

마치며

두 프레임 워크가 화면 생성 시점을 알려주는 시점을 이해하고,
필요에 따라 적절한 시점을 고려하는 데 도움이 되기를 바랍니다!

[namudongs]

좋은 정보 감사합니다! 이 부분에 대해서 궁금해서 더 찾아보았는데,

Hacking With Swift에서는 각각 viewDidAppear() 와 viewDidDisappear()에 대응된다고 나와있고, 이 문서에서는 "SwiftUI는 UIKit(AppKit)과 같은 방식의 뷰와 뷰 생명주기를 가지고 있지 않습니다." 라고 합니다. 공식 문서에서는 또 적용하는 뷰 유형에 따라 다르다고 나와있네요.. 아무래도 이렇게 경험적인 방법으로 추측하는게 가장 정확할 듯 싶습니다..

[shippingpark]

오! 적용하는 '뷰 유형에 따라 다르다' 로 언급되어 있군요. 본문에는 실행 시점을 언급하기 위해 '화면이 보여지는 순간'이라는 표현을 썼지만 onAppear는 뷰 최초 실행 뿐 아니라 재생성되는 지점에도 호출되기 때문에 해당 언급이 혼란을 야기할 수 있을 것 같습니다😱😱 또 말씀해 주셨듯 각 프레임워크 속 화면 상태를 알리는 메서드는 각 프레임워크끼리 1:1 매칭되는 개념이 아니니 이를 유념 해야겠습니다! 👍👍👍