[SwiftUI] 데이터 바인딩의 세가지 방법(1)

공부중에 여러 어트리뷰트과 객체 이름이 헷갈려 한번 정리하기로 했다

데이터 바인딩

SwiftUI에서 사용자 인터페이스 레이아웃을 구성하는 뷰는 코드 내에서 직접 업데이트 하지 않는다.
그 대신, 뷰와 바인딩된 상태 객체가 시간이 지남에 따라(동작중에) 변하면 그 상태에 따라 자동으로 뷰가 업데이트 된다.

즉, 뷰 내부에서 외부에 저장된 데이터와 연결되어 데이터가 변하면 자동으로 뷰를 업데이트 하는것..

1. 상태 프로퍼티

뷰 레이아웃의 현재 상태를 저장하기 위해서만 사용
(간단한 데이터 타입을 저장할 때 쓰자!)

@State 프로퍼티 래퍼를 사용해 선언

struct ContentView: View {
	//선언
	@State private var name: String = "hashswim"
   	var body: some View {

        VStack {
        	//$사인으로 선언된 'name'객체와 바인딩
            TextField("Enter your name", text: $name)
			Text(name)
        }
    }
}

1. TextField에 값을 입력할 때 마다 name에 저장
2. name에 저장되는 값이 변할때 마다 Text 뷰가 업데이트 됨

State 바인딩

앞서 살펴본 상태 프로퍼티는 선언된 뷰와 하위 뷰에 대한 현재 값이였다.

하지만 데이터가 저장된 범위 밖으로 하위뷰가 분리되어 있다면 어떻게 할까?

	struct ContentView: View {
    
    	@State private var name = ""
        
        var body: some View {
        	VStack {
            	TextField("Enter your name", text: $name)
                MyTextView()
            }
        }
    }
    
    struct MyTextView: View {
    	
        var body: some View {
        	Text(name)
        }
    }

MyTextView 내부에서 name 프로퍼티를 찾을 수 없게 된다...

이때는 다음과 같이 @Binding 프로퍼티 래퍼를 사용해 해결 할 수 있다..!

	struct ContentView: View {
    	//State 바인딩, internal(default)로 변경
    	@Binding var name = ""
        
        var body: some View {
        	VStack {
            	TextField("Enter your name", text: $name)
                //name에 대한 바인딩 전달
                MyTextView(name: $name)
            }
        }
    }
    
    struct MyTextView: View {
    	
        var body: some View {
        	Text(name)
        }
    }

그럼 하위뷰가 아니라 다른 뷰에서 접근할 수는 없을까..?
(다음 장에서)