본문 바로가기

App Dev/iOS

iOS SwiftUI @State 문법 어떻게 사용하면 될까?

반응형

@State

SwiftUI는 속성의 저장소를 관리합니다. 값이 변경되면 SwiftUI는 값에 의존하는 보기 계층 구조의 일부를 업데이트합니다. 상태의 기본 값에 액세스하려면 해당 속성을 사용합니다. 그러나 단축키로 Swift를 사용하면 상태 인스턴스를 직접 참조하여 래핑된 값에 액세스할 수 있습니다. 위의 예는 속성을 직접 참조하여 상태 속성의 래핑된 값을 읽고 씁니다

 SwiftUI가 제공하는 스토리지 관리와 충돌할 수 있는 멤버 단위 초기화에서 설정하는 것을 방지하기 위해 비공개로 선언합니다 . 상태 객체와 달리 항상 위의 예에서와 같이 상태 선언에 기본값을 제공하여 상태를 초기화합니다. 보기 및 해당 하위 보기에 로컬인 저장소에만 상태를 사용합니다.

import SwiftUI

struct ContentView: View {
    // @State 값의 변화를 감지 -> 뷰에 적용
    @State
    private var isActivated : Bool = false
    
    var body: some View {
        
       
            NavigationView{
                VStack{
                    HStack{
//                        MyVstackView()
//                        MyVstackView()
//                        MyVstackView()
                        CircleImageView()
                        
                        
                    }.padding(isActivated ? 100.0 :50.0)
                        .background(isActivated ? Color.black : Color.indigo)
                    // 탭 제스쳐 추가
                        .onTapGesture {
                            print("HStack 클릭 되었다.")
                            //에니메이션과 함께
                            withAnimation{
                                // toggle() true 이면 false 로 false 이면 true
                                self.isActivated.toggle()
                            }
                        }// Hstack
                    
                    // 네비게이션 버튼 (링크)
                    NavigationLink(destination:MyTextView()){
                        Text("Navigation")
                            .fontWeight(.bold)
                            .padding()
                            .font(.system(size: 40))
                            .background(Color.green)
                            .foregroundColor(Color.white)
                            .cornerRadius(30)
                        
                        
                        
                    }.padding(.top,50)
                }
                
            }//NavigationView
            
        
}

일단 선언한 변수 위에 작성하면 되고 선언한 변수는 private으로 선언해야 한다. 

로컬 저장소라고 생각하면된다. 

변화된 값을 감지하여 뷰에 즉시 반영한다. 

withAnimation {

변수.toggle()

}

애니메이션 효과에 toggle 함수와 함께 써보았다.

 

 

반응형