[SwiftUI] @State와 @Binding 이해하기

haram·2025년 2월 26일
0

@State 와 @Binding을 사용하는 이유는 무엇일까?

  • 데이터의 변화에 따른 뷰 업데이트를 위해 사용한다.
  • 아래 코드를 보면 BindingView라는 커스텀뷰에서는 Counter라는 인스턴스를 초기화 과정에서 주입받는다
    그리고 부모뷰에서 버튼을 통해 counter의 값을 증가 시켰을때 출력값은 정상적으로 증가하지만 뷰는 업데이트 되지 않는 현상이 발생한다.

부모뷰에서 Counter클래스를 사용한 이유는?

  • struct는 값타입이므로 Immutable하다. 따라서 View구조체도 Immutable하므로,
    값을 증가시키는 로직을 @State를 사용하지 않고 구현하기 위해 참조타입인 Counter을 통해 내부의 값을 증가시키는 방법을 사용하였다.
import Foundation
import SwiftUI

class Counter{
    var count = 1
}

struct StateBinding:View {
    
    private var counter = Counter()
    
    var body: some View {
        
        BindingView(counter: counter)
        
        Button("Add Value"){
            counter.count += 1
            print(counter.count)
        }
    }
}

struct BindingView:View {
    
    private var counter:Counter
    init(counter: Counter) {
        self.counter = counter
    }
    
    var body: some View {
        Text(String(counter.count))
    }
}

데이터 변화에 따른 뷰의 업데이트를 어떻게 구현해야 할까?

  • 일반적인 변수로는 데이터의 변화에 따른 뷰의 업데이트를 구현할 수 없다. 그렇기 때문에 사용하는 것이 @State와 @Binding이다.
  • 상태 변화에 따라 UI에 반영하기 위한 데이터는 @State로 선언한다.
  • 자식뷰에서 부모뷰의 @State변수를 전달받아 사용하고 싶다면 @Binding 변수를 선언하여 사용한다.
    @Binding변수에는 자동으로 이니셜라이저가 구현된다.
import Foundation
import SwiftUI

struct StateBinding:View {
    
    @State private var count = 1
    
    var body: some View {
        
        BindingView(count: $count)
        
        Button("Add Value"){
            count += 1
            print(count)
        }
    }
}

struct BindingView:View {
    
    @Binding var count:Int
    
    var body: some View {
        Text(String(count))
    }
}

0개의 댓글