onAppear와 onDisappear의 실행 시점 이해하기

화면이 보일 때 데이터를 불러오고 사라질 때 작업을 정리하는 코드는 어디에 두어야 할까. onAppear와 onDisappear는 간단하지만 뷰가 다시 계산되는 흐름 속에서 호출 시점을 주의해서 봐야 한다.

onAppear

뷰가 화면 상에 나타날 때 입력된 코드를 실행한다.

struct OnAppearStudy: View {
    
    @State var myText: String = "Star Text"
    
    var body: some View {
        Text(myText)
            .font(.largeTitle)
            // 뷰가 나타난 직후 해당 코드 실행
            .onAppear(perform: {
            	// 3초 후 해당 코드 실행
                DispatchQueue.main.asyncAfter(deadline: .now() + 3) {
                    myText = "Next Text"
                }
            })
    }
}

LazyVStack으로 화면에 나타난 후에 데이터를 로드하면, 화면에 나타날 때 onAppear내의 코드가 실행된다.

struct OnAppearStudy: View {

    @State var count: Int = 0
    
    var body: some View {
        NavigationView {
            ScrollView {
            	// 화면에 나타날 때 데이터 로드
                LazyVStack {
                    ForEach(0..<20) { _ in
                        RoundedRectangle(cornerRadius: 20)
                            .frame(height: 200)
                            .padding()
                            // 화면에 나타날 때 해당 코드 실행
                            .onAppear {
                                count += 1
                            }
                    }
                }
            }
            .navigationTitle("On Appear \(count)")
        }
    }
}

onDisappear

뷰가 화면 상에서 사라질 때 입력된 코드를 실행한다.

struct OnAppearStudy: View {
    
    @State var myText: String = "Star Text"
    
    var body: some View {
        Text(myText)
            .font(.largeTitle)
            // 뷰가 사라진 직후 해당 코드 실행
            .onDisappear(perform: {
            	myText = "End Text"
            })
    }
}