SwiftUI의 상태프로퍼티

Zoe·2024년 3월 10일
0

💡SwiftUI

목록 보기
3/3
post-thumbnail

SwiftUI는 선언적, 상태 중심의 프레임워크

  • ViewHierarchy를 통해 View 참조 가능
  • 이벤트에 대한 반응을 직접적으로 View로 변경 가능 → View에 바인딩 되어 있는 상태를 변화시킴.
  • Delegates, target-actions, responder chain, KVO 등의 모든 callback 기술들은 closure와 binding으로 대체

상태프로퍼티(State Property)

공식문서 바로가기🍎

State

SwiftUI에서 관리하는 값을 읽고 쓸 수 있는 속성 래퍼 유형

  • 뷰 계층 구조에 저장하는 지정된 값 유형에 대한 단일 정보 소스로 상태 사용
  • Property를 선언할 때 속성을 적용하고 초기값을 제공하여 상태값을 만듦
  • 상태에 대한 가장 기본적인 형태

사용

  • 뷰 레이아웃의 현재 상태를 저장하기 위해서만 사용
  • 상태 프로퍼티는 String, Int 처럼 간단한 데이터 타입을 저장하기 위해 사용됨.

선언

  • @State 프로퍼티 래퍼를 사용하여 선언됨
  • 상태 프로퍼티는 뷰 안에 속한 것이기 때문에 private으로 선언
  • 상태 프로퍼티가 벼견되면 그 프로퍼티가 선언된 뷰 계층 구조를 다시 렌더링
    => 해당 프로퍼티에 의존하는 모든 view는 항상 최신값이 반영되도록 업데이트
  • 상태 프로퍼티는 선언 후에 레이아웃의 view와 바인딩, 바인딩되어 있는 view에 변경이 일어나면 해당 상태 프로퍼티에 자동 반영
    - 바인딩은 프로퍼티 앞에 $

상태 바인딩

상태 프로퍼티는 선언된 뷰와 그 하위 뷰에 대한 현재 값
어떤 뷰가 하나 이상의 하위뷰를 가지고 있으며, 동일한 상태 프로퍼티에 대해 접근해야 하는 경우, @Binding 상태 프로퍼티를 이용

예시 코드

//
//  StateDemoView.swift
//  HMH_Practice
//
//  Created by 지희의 MAC on 3/11/24.
//

import SwiftUI

struct StateDemoView: View {
    @State private var wifiEnabled = true
    @State private var username = ""
    
    var body: some View {
        VStack {
            Toggle(isOn: $wifiEnabled, label: {
                Text("EnableWifi")
            })
            TextField("Enter User Name", text: $username)
            Text(username)
            WifiImageView(wifiEnabled: $wifiEnabled)
        }
    }
}

struct WifiImageView: View {
    
    @Binding var wifiEnabled: Bool
    
    var body: some View {
        Image(systemName: wifiEnabled ? "wifi" : "wifi.slash")
    }
}

#Preview {
    StateDemoView()
}

바인딩 된 wifiEnabled의 값이 변할 때마다 뷰가 업데이트 됩니다. TextField에 작성하는 내용도 실시간으로 반영되는 것을 확인할 수 있습니다.

0개의 댓글