[SWIFTUI] #문법 - @Binding

오늘은 진짜 정말로 오랜만의 swiftui시간이다. 아직 완벽하지는 않지만 swiftui로 프로젝트도 몇개 완성했고 많이 익힌것 같다. 당연히 사용하는 여러 문법들이지만 그 역할을 자세하게 공부해본적은 없는 것 같아서 오늘 포스팅을 시작하게 되었다.

 

우리가 한 뷰로 모든 기능을 구현하는 것은 매우 힘든일이다.(특히나 사용자 입장에서..) 그렇기 때문에 여러뷰로 이루어질 어플리케이션을 개발해야할텐데 뷰마다 보여지는 정보가 모두 다르겠지만 분명 같은 데이터를 공유하는 뷰도 있을 것이다. 그 방법중에 하나는 바로 Binding을 사용하는 것이다.

 

@Binding

 

 

상위 뷰에서 하위 뷰와 데이터를 공유하려할 때 사용하는 어노테이션

지난시간의 State의 이어서 Binding이다. State와 마찬가지로 View 프로토콜을 준수하고 있다. State는 변수가 선언된 struct에서 밖에 사용하지 못하지만 그 하위 뷰와 연결이 되면 Binding을 통해 같이 변경이 될수 있다. 여기서 중요한점은 하위뷰의 데이터 변경으로 상위뷰의 데이터를 변경할 수 있다는 점이다. 보통 다른 뷰 끼리 데이터를 공유하는 것이 아닌, 상위뷰에서 하위뷰를  상황에서 사용하게 되는데, 한번 Binding의 특징부터 알아보자

 

• 상위뷰의 @State 변수와 하위뷰를 연결할때 하위뷰에서 @Binging 으로 변수를 선언하여 사용한다.
• 하위뷰에서는 @State로 선언한 변수를 같이 사용해도 문제가 되지는 않지만 상위뷰에게 영향을 주지는 않는다.
• 하위뷰(상위뷰의 변수 : $하위뷰의 변수) 형태로 호출한다.

오늘도 역시나 말로는 들으면 어떤 느낌인지 감이 안올 수도 있기 때문에 코드로 증명하겠다 ㅋㅋ..

import SwiftUI
import Foundation

struct HighView:View{

@State var backgroundColor:Color = .red		//1
    
    var body:some View{
        ZStack{
            backgroundColor.ignoresSafeArea()	//2
            LowView(backgroundColor: $backgroundColor)		//3
        }
        
    }
}
struct LowView:View{

    @Binding var backgroundColor:Color		//4
    @State var buttonColor:Color = .black

    var body:some View{
        
        Button(action:{		//5
            backgroundColor = .blue		
            buttonColor = .secondary
        }){
                Text("버튼")
                .foregroundColor(.white)
                .padding()
                .padding(.horizontal)
                .background(buttonColor)
                .cornerRadius(10)
        }
    }
}
struct HighView_Previews: PreviewProvider {
    static var previews: some View {
        HighView()
    }
}

위의 코드는 상위뷰에 하위뷰의 내용이 출력이 되고 버튼을 누름에 따라 변수데이터가 바뀌게 되는 코드이다. 

 

숫자 주석으로 표시해놓은 부분을 기준으로 설명하자면 다음과 같다.

 

1. 상위뷰의 State로 배경색깔에 대한 상태변수를 선언한다.

 

2. 상태변수의 색깔로 배경색을 지정한다.

 

3. 하위뷰를 사용한다. -> 버튼 부분은 하위뷰인 것, 또한 상태변수를 공유할때는 $자를 붙여서 사용함

 

4. Binding으로 상위 뷰와  상태 변수를 공유한다.

 

5. 버튼 클릭시 하위뷰의 State와 Binding 변수가 액션을 취하게 되는데 Binding 변수는 상위뷰와 상태변수를 공유하게 되었기 때문에 하위뷰에서 값 변경이 생겨도 상위뷰에도 영향이 가게됨

 

 

 

사용하는 방법은 많이 어렵지는 않다. 상황에 따라서 많은 상태변수를 사용하게 되는데, 나중에 추가로 포스팅 하겠다.