💡 일반적으로 struct 내의 변수값 변경은 불가능하다.구조체 내의 변수값을 변경하는 방법, View가 표시되는 동안 값을 변경하는 방법은 뭐가 있을까?

'@' 이건 뭘까?

접두사로 사용되는 '@'는 속성래퍼(property wrapper)이다.
속성 래퍼는 속성의 확장자와 비슷하다. 이런 속성 래퍼를 사용해 속성에 기능 및 논리를 추가할 수 있다.

@State

• 구조체 내 변수 변경 가능
• View가 다시 그려질 때 값 계속 표시

@State의 기본 - 단방향 바인딩(읽기전용 바인딩)

@State private var userName: String = "apple"

Text("아이디: \(apple)")

순서

1. 어떤 동작으로 인해 state 변수 업데이트
2. state 변수값 업데이트 완료
3. View 새로 그려짐
4. 새로운 state 변수값 읽음

'$' 키워드를 이용한 양방향 바인딩

@State private var password: String = "비밀번호"

TextField("비밀번호를 입력하세요", text: $password)

양방향 바인딩에는 '$'키워드를 이용한다.
사용자가 텍스트를 입력할 때마다 새 값은 @State 변수에 저장되고, 관련된 View는 다시 그려진다.

데이터가 주도하는 UI

• 데이터가 UI를 결정
• UI컨트롤을 직접 참조할 수 없음
• UI컨트롤이 연결되거나, 바인딩된 데이터를 참조

Single Source of Truth

💡 정보 시스템의 디자인 이론 중 하나인, 모델과 그와 연결된 스키마를 정의함에 있어서 모든 데이터 요소는 시스템에서 유일한 값으로 존재하도록 하는 것을 의미한다. - 위키피디아

• 즉 UI컨트롤을 둘 이상의 데이터에 바인딩 할 수 없다.
  예를 들어 우리 가족이 키우는 강아지가 한 마리 있다고 가정하자. 나는 강아지에게 "앉아!"라고 하는데, 동생은 강아지에게 "누워!"라고 말한다면, 강아지는 혼란스러워서 누구의 말을 들어야 할 지 갈피를 잡지 못할 것이다. 이와 같은 의미이다.

여러 개의 @State 변수를 그룹화해서 사용

// struct

import SwiftUI

struct ButtonDatas {
    var showColors: Bool = false
    var animateButton: Bool = false
}

struct Home: View {
    
    @State private var buttonData = ButtonDatas()
    
    var body: some View {...}
    
    @ViewBuilder
    func SideBar() -> some View {...}
            .padding(.top, 20)
            .frame(height: buttonData.showColors ? nil : 0)
            .opacity(buttonData.showColors ? 1 : 0)
            .zIndex(0)
        }
        .frame(maxHeight: .infinity, alignment: .top)
        .padding(.vertical)
        .padding(.horizontal, 22)
        .padding(.top, 35)
    }
    
    @ViewBuilder
    func AddButton() -> some View {
        Button {
            withAnimation(.interactiveSpring(response: 0.5, dampingFraction: 0.6, blendDuration: 0.6)) {
                buttonData.showColors.toggle()
                buttonData.animateButton.toggle()
            }
            // Resetting the button
            DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
                withAnimation(.spring()) {
                    buttonData.animateButton.toggle()
                }
            }
        } label: {
            Image(systemName: "plus")
                .font(.title2)
                .foregroundColor(.white)
                .scaleEffect(buttonData.animateButton ? 1.1 : 1)
                .padding(isMacOS() ? 12 : 15)
                .background(Color.black)
                .clipShape(Circle())
        }
        .rotationEffect(.init(degrees: buttonData.showColors ? 45 : 0))
        .scaleEffect(buttonData.animateButton ? 1.1 : 1)
        .padding(.top, 30)

    }
}

// class 

class TextClass {
    var text1: String = ""
    var text2: String = ""
    
    init(text1: String, text2: String) {
        self.text1 = text1
        self.text2 = text2
    }
}

struct Home: View {
    
    @State private var textData = TextClass(text1: "첫번째", text2: "두번째")
}

요약

• View에서 속성을 업데이트하는 경우 사용 (변경 가능하도록)
• 화면에 업데이트 된 후 유지해야 할 값이 있는 경우
• View와 값 타입 간에 양방향 바인딩을 제공하는 경우

@State와 함께 사용할 수 있는 대표적인 값 타입

• String
• Int
• Bool
• struct
• Array
• Tuple
• Dictionary