[SwiftUI] @State와 @Binding

숑이·2023년 12월 30일
0

SwiftUI

목록 보기
3/4
post-thumbnail

State

@State는 SwiftUI에서 제공하는 읽기/쓰기가 가능한 Property Wrapper 타입입니다.
@State 속성으로 선언된 프로퍼티의 값이 변경되면, 해당 프로퍼티 값에 의존하는 뷰 계층 구조의 일부를 업데이트합니다.

struct PlayButton: View {
    @State private var isPlaying: Bool = false
    
    var body: some View {
        Button(action: {
            isPlaying.toggle()
        }, label: {
            Image(systemName: isPlaying ? "pause.fill" : "play.fill")
                .resizable()
                .frame(width: 30, height: 30)
        })
    }
}

@State 속성으로 선언된 isPlaying 의 값이 변경될 때마다 버튼의 이미지가 변경됩니다.

@State 속성으로 선언된 프로퍼티는 초깃값을 가져야하고, 생성자를 통해 값이 초기화되지 않도록 private로 선언하는 것을 권장합니다.

Binding

하위뷰에서 상위뷰의 상태값을 변경시키고 싶을 때, 상위뷰에서 하위뷰로 상태값에 대한 바인딩을 전달하여 목적을 달성할 수 있습니다.

// subView
struct PlayButton: View {
    @Binding var isPlaying: Bool
    
    var body: some View {
        Button(action: {
            isPlaying.toggle()
        }, label: {
            Image(systemName: isPlaying ? "pause.fill" : "play.fill")
                .resizable()
                .frame(width: 30, height: 30)
        })
    }
}

하위뷰에서는 상위뷰로부터 바인딩을 전달받기 위해 프로퍼티를 @Binding 속성으로 선언합니다.

// parent view
struct ContentView: View {
    @State private var isPlaying: Bool = false
    
    var body: some View {
        PlayButton(isPlaying: $isPlaying)
    }
}

상태값에 대한 바인딩을 얻기 위해서 프로퍼티의 이름 앞에 달러 기호($)를 붙이면 됩니다.
이 바인딩을 하위뷰 생성자를 통해 전달합니다.

정리

  • @State는 SwiftUI에서 제공하는 읽기/쓰기가 가능한 Property Wrapper 타입이고, 해당 프로퍼티 값이 변경되면, 프로퍼티 값에 의존하는 뷰 계층 구조의 일부가 업데이트됩니다.
  • 하위뷰에서 상위뷰의 상태값을 변경하고 싶다면, 상위뷰에서 하위뷰로 상태값에 대한 바인딩을 전달하면 됩니다. 하위뷰에서 @Binding 속성으로 프로퍼티를 선언하고, 상위뷰에서 하위뷰로 상태값의 바인딩을 전달합니다.
profile
iOS앱 개발자가 될테야

0개의 댓글