SwiftUI LifeCycle

오늘은 SwiftUI의 LifeCycle에 대해서 공부해보려고 한다. 

 

swift를 공부하면 ViewController의 LifeCycle에 대해서 먼저 공부할텐데

ViewContoller의 LIfeCycle은 많지만 SwiftUI의 LIfeCycle은 간단하다. 

 

onAppear(perform:)

Adds an action to perform before this view appears

뷰가 나타날 때 수행할 액션 추가

onDisappear(perform:)

Adds an action to perform after this view disappears

뷰가 사라질 때 수행할 액션 추가

 

 

2개의 뷰를 만들고 Navigation으로 뷰 전환을 실행해 보았다. 

struct LifeCycle: View {
    var body: some View {
        NavigationView {
            NavigationLink(destination: LifeCycle2()) {
                Text("뷰 이동")
            }
        }
        .onAppear(perform: {
            print("LifeCycle onAppear")
        })
        .onDisappear(perform: {
            print("LifeCycle Disappear")
        })
    }
}

struct LifeCycle2: View {
    var body: some View {
        Text(/*@START_MENU_TOKEN@*/"Hello, World!"/*@END_MENU_TOKEN@*/)
            .onAppear(perform: {
                print("LifeCycle2 onAppear")
            })
            .onDisappear(perform: {
                print("LifeCycle2 disappear")
            })
    }
}

이렇게 만든 후 

LifeCycle -> LifeCycle2 -> LifeCycle으로 뷰 전환을 해보면 

예상과는 다르게 LifeCycle onDisappear은 호출되지 않았다. 

 

찾아보니 보여진 뷰의 뒤에 뷰가 남아있기 때문에 onDisappear()이 호출되지 않았음을 알 수 있었다.

 

어떻게 사용할 수 있을까?

(유데미 강의의 코드를 빌려왔다.)

 

화면에 animation을 추가하고 싶을 때 .onAppear을 트리거로 사용해 구현할 수 있다. 

struct CircleGroupView: View {
    //MARK: - Propertiy
    @State var ShapeColor: Color
    @State var ShapeOpacity: Double
    @State private var isAnimating: Bool = false //애니메이션 작동 bool 선언
    var body: some View {
        ZStack {
            Circle()
                .stroke(ShapeColor.opacity(ShapeOpacity), lineWidth: 40)
                .frame(width: 260, height: 260, alignment: .center)
            Circle()
                .stroke(ShapeColor.opacity(ShapeOpacity), lineWidth: 80)
                .frame(width: 260, height: 260, alignment: .center)
        } //: ZSTACK
        .blur(radius: isAnimating ? 0 : 10)
        .opacity(isAnimating ? 1: 0)
        .scaleEffect(isAnimating ? 1 : 0.5)
        .animation(.easeOut(duration: 1), value: isAnimating)
        .onAppear(perform: {
            isAnimating = true //뷰가 onAppear일 때 false -> true로 바꿔
            					// animation이 동작하게 만듦
        })
    }
}

 

 

 

 

 

 

https://developer.apple.com/documentation/swiftui/view/onappear(perform:) 

Apple Developer Documentation

https://developer.apple.com/documentation/swiftui/view/ondisappear(perform:) 

Apple Developer Documentation

참고

https://zeddios.tistory.com/936

SwiftUI ) SwiftUI View Lifecycle