[SwiftUI Bootcamp] beginner5

Woozoo·2023년 1월 15일

[SwiftUI]

목록 보기

5/26

@State

뷰가 변하는 상태를 알 수 있게해주는 프로퍼티 래퍼

import SwiftUI

struct StateBootcamp: View {
    
    @State var backgroundColor: Color = .green
    @State var myTitle: String = "My Title"
    @State var count: Int = 0
    
    var body: some View {
        ZStack {            
            backgroundColor
                .ignoresSafeArea()
            
            VStack(spacing: 20) {
                Text(myTitle)
                    .font(.title)
                Text("Count: \(count)")
                    .font(.headline)
                    .underline()
                
                HStack(spacing: 20) {
                    Button("Button 1") {
                        backgroundColor = .blue
                        myTitle = "Button 1 was Pressed"
                        count += 1
                    }
                    Button("Button 2") {
                        backgroundColor = .gray
                        myTitle = "Button 2 was Pressed"
                        count -= 1
                    }
                }
            }
            .foregroundColor(.white)
        }
    }
}

버튼을 누르게 되면 상태가 변하게 됨! 뷰는 이걸 알아채고 바로 렌더링 해주고

Extract Functions & Views

struct ExtractedFunctionBootcamp: View {
    
    @State var backgroundColor: Color = Color.green
    
    var body: some View {
        ZStack {
            //background
            backgroundColor
                .ignoresSafeArea()
            
            //content
            contentLayer
        }
    }
    
    var contentLayer: some View {
        VStack {
            Text("Title")
                .font(.largeTitle)
            Button {
                buttonPressed()
            } label: {
                Text("Press me")
                    .font(.headline)
                    .foregroundColor(.white)
                    .padding()
                    .background(.black)
                    .cornerRadius(10)
            }
        }
    }
    
    func buttonPressed() {
        backgroundColor = .yellow
    }
}

view나 function은 따로 분리 가능

이렇게 직접 스택 자체를 Extract도 가능하다
커맨드 클릭!

@Binding

이렇게 구성한 UI가 있다고 했을 때
버튼을 뷰로 따로 뽑았다고 생각해보자

이렇게되면 원래 뷰에 있던 backgroundColor를 새로운 뷰는 모름
그래서 이 프로퍼티를 알게해주고, 전의 뷰와 연결하는 코드가 필요할텐데
그 때 사용하는 게 @Binding임

이렇게 구성하고 원래의 뷰에서 버튼뷰를 넣으면 초기값을 넣으라는 게 나옴

$프로퍼티이름 으로 접근하면 오케이!
그럼 알아서 연결된다!!
타입만 맞춰놓으면 알아서 맞춰짐

그리고 내 안에 있는 UI 바꿀 때도 @State 필요한 거 기억하기!

How to use Conditional Statements

import SwiftUI

struct ConditionalBootcamp: View {
    
    @State var showCircle: Bool = false
    
    var body: some View {
        VStack(spacing: 20) {
            Button("Circle Button: \(showCircle.description)") {
                showCircle.toggle()
            }
            
            Circle()
                .frame(width: 100, height: 100)
        }
    }
}

🤔 왜 $ sign이 안붙었을까?

$ sign은 프로퍼티와의 바인딩을 만들 때, 서브뷰가 패런트뷰에서 선언된 프로퍼티에 접근해서 읽고 쓰는 작업을 해야할 때 붙음. 바인딩이 되게되면 서브뷰는 현재의 밸류를 읽고 업데이트 가능하며, 프로퍼티에 생긴 변동사항들은 뷰를 리렌더 해줌

ProgressView라는 로딩뷰가 있음

Ternary Operators

struct TernaryBootcamp: View {
    
    @State var isStartingState: Bool = false
    
    var body: some View {
        VStack {
            Button("Button: \(isStartingState.description)") {
                isStartingState.toggle()
            }
            if isStartingState {
                RoundedRectangle(cornerRadius: 25)
                    .fill(.purple)
                    .frame(width: 200,height: 100)
            } else {
                RoundedRectangle(cornerRadius: 25)
                    .fill(.blue)
                    .frame(width: 200,height: 100)
            }
            Spacer()            
        }
    }
}