[Swift] - @State와 Binding

sai06266·2024년 1월 7일
0

Swift 문법

목록 보기
8/9

State: 데이터의 상태를 나타냄

구조체가 새로 만들어질때 초기화되지 않고 다른 곳에 저장되어짐.
-> SwiftUI에서 사용(UIKIT은 class로 구성)

SwiftUI에서 @State 속성 래퍼는 뷰의 변경 가능한 상태를 저장하고 해당 상태가 변경될 때 뷰를 다시 그리도록 하는 데 사용된다. 이는 사용자 인터페이스의 동적인 측면을 처리하고 뷰가 모델 데이터의 변경을 반영할 수 있도록 하는 데 도움이 된다.

@State 속성이 선언된 변수는 해당 뷰의 상태를 나타내며, SwiftUI는 이 변수의 변경을 감지하여 자동으로 뷰를 업데이트한다. @State 속성은 주로 단일 뷰에서 사용되는 데이터나 상태를 나타내는 데에 적합하며, 데이터가 여러 뷰 간에 공유되어야 하는 경우에는 다른 속성 래퍼 또는 외부 모델을 고려해야 할 수 있다.


import SwiftUI

struct ContentView: View {
    // @State 속성을 사용하여 뷰의 상태를 저장
    @State private var count = 0

    var body: some View {
        VStack {
            Text("Count: \(count)")

            // 버튼을 탭할 때마다 count가 증가하도록 설정
            Button("Increment") {
                count += 1
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

@State 속성인 count를 사용하여 뷰의 상태를 저장하고, 버튼을 탭할 때마다 count가 증가하며 해당 변경이 자동으로 뷰에 반영된다.
즉 count값이 바뀔 때마다 뷰가 다시 랜더링 됨.

요약: 화면이 새로 그려져야할 때를 나타냄

해당 변수의 값이 변경되면 화면이 새로 그려짐


바인딩이란?

Binding은 외부에서 뷰의 @State 속성에 접근하고 값을 변경할 때 사용된다.
상위 뷰에서 하위 뷰로 데이터를 전달하거나 뷰 간의 양방향 데이터 바인딩을 설정할 때 활용

변수이름 앞에 $를 붙여 사용

struct DetailView: View {
    @Binding var count: Int

    var body: some View {
        Text("Count: \(count)")
    }
}

struct ContentView: View {
    @State private var count = 0

    var body: some View {
        VStack {
            Text("Count: \(count)")

            // DetailView에 Binding 전달
            DetailView(count: $count)
        }
    }
}

여기서 $count는 Binding을 생성하는데 사용되며, DetailView는 이 Binding을 받아와서 count를 읽거나 쓸 수 있다.

주의사항

  • Binding은 주로 하위 뷰에서 상위 뷰의 @State 값을 변경하거나 읽을 때 사용된다.
  • Binding을 생성할 때에는 $ 기호를 사용하여 @State 속성에 접근한다.
  • @State는 뷰 내에서만 사용 가능하고 해당 뷰의 생명주기에 종속적이지만, Binding은 여러 뷰 간에 데이터를 전달하고 공유하는 데 사용된다.

0개의 댓글