[SwiftUI] @State와 @Binding의 projectedValue ($)

1. projectedValue란?

projectedValue는 @propertyWrapper에서 정의할 수 있는 선택적 프로퍼티.

이는 원래의 wrappedValue와는 다른 추가적인 정보를 제공하거나 특정 작업을 수행할 수 있도록 함.

• wrappedValue: 주로 데이터를 읽고 쓰는 데 사용.
• projectedValue: 추가적인 동작이나 값을 제공하기 위해 정의.

SwiftUI에서의 주요 사례는 @State의 Binding 제공.

---

2. SwiftUI에서 @State와 projectedValue

@State의 동작

@State는 뷰의 상태를 관리하는 SwiftUI의 프로퍼티 래퍼.

@State 프로퍼티는 상태를 직접 수정할 수 있지만, 하위 뷰에 상태를 전달할 때는 Binding 객체로 전달해야 함.

struct ParentView: View {
    @State private var counter = 0

    var body: some View {
        ChildView(counter: $counter) // $counter는 Binding<Int>
    }
}

struct ChildView: View {
    @Binding var counter: Int

    var body: some View {
        Button("Increment") {
            counter += 1 // 상위 뷰의 상태를 수정
        }
    }
}

• @State는 상태를 관리하고, 해당 상태를 Binding 객체로 노출하기 위해 projectedValue를 사용.
• $counter는 @State의 projectedValue로, Binding<Int> 타입의 객체를 반환.

projectedValue의 실제 역할

@State의 projectedValue를 통해 반환되는 Binding은 다음과 같은 역할을 함.

• 상태를 하위 뷰에 공유
  • @Binding은 Binding 객체를 받아 상위 뷰의 상태를 읽고 수정.
• 양방향 데이터 흐름
  • Binding을 통해 하위 뷰에서 상위 뷰의 상태를 수정.
• 동기화된 UI 업데이트
  • Binding을 통해 상태가 변경되면, SwiftUI는 UI를 자동으로 업데이트.

---

3. @State와 Binding의 관계

코드 예제

struct ExampleView: View {
    @State private var isOn = false

    var body: some View {
        Toggle("Switch", isOn: $isOn) // $isOn: Binding<Bool>
    }
}

동작 과정

1. @State 선언
   • isOn 상태 값은 @State로 선언되어 SwiftUI가 관리.
2. projectedValue로 Binding 생성
   • $isOn은 projectedValue를 통해 Binding<Bool> 객체를 반환.
3. Binding 전달
   • Toggle은 Binding을 받아 상태를 읽고 수정.
4. 상태 변경과 UI 업데이트
   • 사용자가 Toggle을 변경하면, Binding이 isOn 값을 업데이트하고 SwiftUI는 UI를 다시 렌더링.

Binding의 내부 동작

Binding은 상태 값에 대한 읽기와 쓰기를 캡슐화.

struct Binding<Value> {
    var wrappedValue: Value { get nonmutating set } // 상태 읽기/쓰기
    var projectedValue: Binding<Value> { self } // 자체 반환
}

• wrappedValue
  • 상태 값을 읽거나 수정.
  • 예: counter += 1은 wrappedValue를 사용해 값을 수정.
• projectedValue
  • Binding 객체를 반환해 하위 뷰에서 사용.

---

4. SwiftUI의 렌더링 시점과 projectedValue

SwiftUI에서 @State의 상태 변경은 렌더링 사이클과 밀접하게 연결되어 있음.

렌더링 시점에서의 동작

1. 초기 렌더링
   • @State의 상태를 초기화
2. 상태 변경
   • projectedValue를 통해 Binding 객체가 전달되고 상태 변경을 감지.
3. UI 업데이트
   • 상태 변경이 감지되면, SwiftUI가 UI를 다시 렌더링.

---

5. 요약: projectedValue의 핵심 역할

속성	설명
wrappedValue	프로퍼티 래퍼가 관리하는 기본 값에 접근.
projectedValue	프로퍼티 래퍼가 추가적으로 노출하는 객체(Binding, Environment, 등).
@State 예시	projectedValue를 통해 Binding을 생성하여 하위 뷰와 상태를 공유.
SwiftUI에서 중요성	projectedValue는 상태 공유 및 UI 업데이트를 위한 양방향 데이터 바인딩의 핵심.

 

결론적으로, SwiftUI의 @State와 @Binding은 projectedValue를 활용하여 상태 관리와 데이터 바인딩을 구현.