SwiftUI - State와 Binding

이재원·2024년 7월 14일

State binding swiftui

SwiftUI

목록 보기

6/9

State와 Binding 요약

State:
- SwiftUI에서 뷰의 상태를 관리하는 속성 래퍼로, 뷰 내에서만 사용 가능.
- 초기화는 뷰 내부에서 해야 하며, 외부에서 값을 받지 않도록 권장됨.
- 값이 변경되면 해당 뷰를 자동으로 재랜더링하여 최신 상태를 반영.
- 외부에서 수정되지 않도록 private로 선언하는 것이 좋음.
Binding:
- 다른 뷰로부터 프로퍼티를 받을 때 사용하며, 읽기와 쓰기 모두 가능.
- 상위 뷰의 State 값을 하위 뷰에 전달하여 상위와 하위 뷰가 같은 값을 공유하고, 데이터 변경 시 자동으로 업데이트됨.
- State를 Binding으로 넘길 때는 $ 표시를 사용해야 함.
주의사항:
- State는 단일 뷰 내에서만 관리되어야 하며, 외부에 전달하지 않도록 주의.
- Binding은 상위 뷰와 하위 뷰 간의 데이터 공유와 상태 관리를 위해 사용됨.

State

State는 SwiftUI가 관리하는 값을 읽고 쓸 수 있는 속성 래퍼 유형으로, 뷰 내에서만 사용이 가능합니다.

SwiftUI의 State는 뷰의 상태를 관리하고, 상태가 변경될 때 뷰를 자동으로 재랜더링하여 최신 상태를 반영합니다.

정의는 다음과 같습니다.

@frozen @propertyWrapper
struct State<Value>

State의 초기화는 뷰 내부에서 해야 하며, 다른 객체로부터 State 값을 받는 것은 권장하지 않습니다. 이는 State 값이 외부에서 전달받더라도 유지되지 않기 때문입니다.

이러한 이유로 외부에서 해당 State 값을 수정하는 것을 막기 위해 private로 선언하기를 권장합니다.

State는 값이 변경되면 해당 뷰를 부분적으로 업데이트하여 변경된 값을 반영합니다.

변화가 없는 부분들은 업데이트 되지 않기 때문에 최소 렌더링을 통해 성능이 향상됩니다.

아래는 공식 문서에 작성되어 있는 예제 코드입니다.

struct PlayButton: View {
    @State private var isPlaying: Bool = false // Create the state.

    var body: some View {
        Button(isPlaying ? "Pause" : "Play") { // Read the state.
            isPlaying.toggle() // Write the state.
        }
    }
}

PlayButton 뷰가 사용자에 의해 값이 변경되면 State property로 선언된 isPlaying의 값이 변경됩니다. 따라서 isPlaying은 항상 최신 값을 유지할 수 있습니다.

화면을 구성하다 보면 상위 뷰와 하위 뷰의 State 프로퍼티가 연결되어야 하는 경우가 많습니다. 공식 문서를 보면 State로 선언된 isPlaying의 값을 하위 뷰와 공유하기 위해서는 Binding을 사용하면 된다고 합니다.

그럼 이번에는 Binding에 대해 알아보도록 하겠습니다.

Binding

Binding은 다른 뷰로부터 프로퍼티들을 받을 때 사용합니다. Binding은 읽기만 가능한 것이 아닌 쓰기도 가능하기 때문에 값을 수정할 수 있습니다. 다만, 상위 뷰와 연결되어 있기 때문에 프로퍼티를 제공한 상위 뷰의 State 프로퍼티의 값도 같이 변경됩니다.

State를 Binding으로 넘길 때는 앞에 $ 표시를 붙여 줘야 합니다. $ 표시는 프로퍼티 래퍼 자체를 받는다는 의미이기 때문에 이를 붙이지 않으면 wrapper 값 자체를 바꿀 수 없습니다.

아래는 공식 문서에 작성된 예제입니다.

struct PlayerView: View {
    @State private var isPlaying: Bool = false // Create the state here now.

    var body: some View {
        VStack {
            PlayButton(isPlaying: $isPlaying) // Pass a binding.

            // ...
        }
    }
}

struct PlayButton: View {
    @Binding var isPlaying: Bool // Play button now receives a binding.

    var body: some View {
        Button(isPlaying ? "Pause" : "Play") {
            isPlaying.toggle()
        }
    }
}

State에서 봤던 예제와 유사하지만 다른 점은 isPlaying 프로퍼티가 상위 뷰인 PlayerView에 선언되었고, 이를 Binding을 통해 하위 뷰인 PlayButton 뷰가 받는 점입니다. 이를 통해 사용자에 의해 뷰가 변경되어도 상위 뷰와 하위 뷰가 동시에 같은 값을 반영할 수 있게 됩니다.

State와 Binding 사용 시 주의사항

State의 역할: State는 단일 뷰 내에서만 관리되고 사용되어야 합니다. State 값을 다른 뷰로 전달하지 않도록 주의해야 합니다.
Binding의 역할: Binding은 상위 뷰와 하위 뷰 간에 데이터를 공유하고, 데이터가 변경될 때 자동으로 업데이트되도록 합니다. 이는 상위 뷰의 상태가 하위 뷰에 반영되도록 하여 일관된 상태 관리를 가능하게 합니다.
Private 선언: State는 외부에서 수정되지 않도록 private로 선언하는 것이 좋습니다. 이는 뷰의 일관성을 유지하는 데 도움이 됩니다.