35. [SwiftUI] Toggle() 토글

iOS에서 흔히 사용해 봤을 토글에 대해 알아보자. 

@State변수를 Binding해서 전달해준다. ($)

-> Toggle와 isToggleOn 변수 간 *양방향 데이터 바인딩 설정
토글을 누르면 isToggleOn 변수가 자동으로 업데이트 됨. (상태 변화 감지 후 뷰 업데이트)

 

*양방향 데이터 바인딩이란?

변수 간 양방향 데이터 바인딩은 두 개의 변수 간에 상호작용이 일어날 때, 두 변수가 항상 동기화되도록 하는 방식!

이는 한 변수의 값이 변경될 때, 다른 변수에도 이 변경 사항이 즉시 반영되도록 하고,

그 반대로 다른 변수의 값이 변경될 때에도 첫 번째 변수에 즉시 변경 사항이 반영되도록 하는 것을 의미한다.

 

-> 데이터와 UI 간의 동기화를 보장하며, 복잡한 UI 구현을 간소화하고 코드의 가독성을 높이는 데 큰 도움을 줌

 

//  Created by Toughie on 2023/04/30.
//

import SwiftUI

struct TogglePrac: View {
    
    @State var isToggleOn = false
    
    var body: some View {
        
        VStack {
            
            HStack(alignment: .bottom) {
                Text("Status : ")
                    .font(.title)
                Text(isToggleOn ? "Online" : "Offline")
                    .foregroundColor(isToggleOn ? Color.green : Color.gray)
                    .font(.title2)
                
            }
            Toggle(
                isOn: $isToggleOn) {
                    Text("Connect")
                }
                .toggleStyle(SwitchToggleStyle(tint: Color.cyan))
            Spacer()
            Text(isToggleOn ? "Welcome 🙋🏻‍♂️" : "Zzz😴")
            
            Spacer()
        }
        .padding(.horizontal, 30)
    }
}