[SwiftUI] View 업데이트 방식 - @State, @Binding

안녕하세요 제인입니다 :) 

SwiftUI에서는 뷰를 어떤 방식으로 업데이트 하는지 알아보고, SwiftUI에서 제공해주는 다양한 프로퍼티 래퍼 중 대표적인 몇 가지에 대해서 살펴볼게요~!

SwiftUI의 View 업데이트 방식

SwiftUI에서는 데이터가 바뀌면 이에 따라 뷰가 바뀝니다. 즉, 뷰는 데이터에 대한 의존성을 가집니다.

SwiftUI에서는 데이터가 변경될 때마다 뷰를 업데이트하는 메커니즘이 내부에 존재합니다. 그렇기 때문에 데이터 업데이트 시점을 계산해서 뷰를 업데이트 시켜주는 일을 개발자가 일일이 해주지 않아도 되는 것이죠. 이를 위해 SwiftUI에서는 다양한 프로퍼티 래퍼를 제공합니다. 이 중 가장 기본적인 @State, @Binding 을 이용해 어떤 방식으로 뷰를 업데이트 하게 되는 것인지 정리해보도록 하겠습니다.

@State

• 영구적인 저장소를 생성 (Single Source of Truth)
• 뷰에 대한 의존성 추적
• 값에 따라 달라지는 뷰 계층의 부분만 업데이트 (효율적인 업데이트)
• state로 정의된 프로퍼티를 하위 뷰에 전달하면 값 변경 될 때마다 하위 뷰까지 업데이트 됨. but 하위 뷰에서 값을 수정할 수는 없다! (하위 뷰까지 연결하려면 @Binding을 전달해야 함)

데이터 변경에 따른 뷰 업데이트 과정

@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.
        }
    }
}

 

위의 코드는 공식문서에 나와있는 간단한 코드린데요, 뷰의 body 내에서 버튼으로 state로 선언된 isPlaying 이라는 프로퍼티의 값을 변경해주고 있습니다. isPlaying 값(= 데이터)이 변하면 이에 따라 Button 타이틀 UI(= 뷰)가 변경되는데요, 어떤 과정으로 데이터 변경을 감지해서 뷰를 업데이트해줄 수 있는지 그림으로 살펴볼게요!

 

1. @State로 선언된 프로퍼티의 영구적인 저장소 할당

먼저, SwiftUI는 @State로 선언된 프로퍼티의 영구적인 저장소를 할당하게 됩니다. 그러면, 이제 뷰 렌더링이 해당 값에 의존하게 된다는 것을 내부적으로 알 수 있습니다.

 

2. 프로퍼티 변경 후 관련 뷰들의 재생성 

위의 코드에서, 버튼을 누르면 isPlaying 값이 변경됩니다. 그러면, 해당 상태에 의존하고 있는 뷰의 body를 호출하여 뷰를 재생성하게 됩니다. 이 때, 뷰 전체를 재생성하는게 아니라 뷰 계층구조를 따라 내려가면서 갱신이 필요한 부분만 검사해서 해당 부분만 다시 렌더링하게 됩니다.

@Binding

위에서 @State를 이용하면 하위 뷰에서 값을 수정할 수는 없다고 설명했습니다.

하지만, 개발을 하다보면 뷰 계층을 나눠야 할 일이 생기게 되죠? 이 때, 하위 뷰까지 연결을 해주기 위해 @Binding을 이용합니다.

 

• 상위 뷰와 하위 뷰 사이에 양방향 연결을 만듦
• 값을 직접 저장하는 대신, 값의 참조를 저장
• 즉, @Binding 을 사용해 상위 뷰의 속성에 연결을 만드는 것
• 하위 뷰도 동일한 소스를 바라보며 읽기/쓰기 모두 가능해짐
• state 프로퍼티에서 projectedValue를 통해 binding 값을 얻을 수 있으며, 이 값은 $property명 형식으로 사용이 가능

위에서 봤던 예제 코드를 수정해 PlayButton 구조체를 PlayView 구조체의 하위 뷰로 만들고, @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을 @Binding으로 정의해줍니다.

 

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.


            // ...
        }
    }
}

그런 다음, PlayButton의 상위 뷰인 PlayerView를 만들고, 이 상위 뷰에서 isPlaying을 @State로 정의해줍니다.

그러면 상위 뷰에서 시작되는 하나의 저장소가 생긴 것이고, 이에 연결되는 프로퍼티가 이 Single truth of Source를 바라보고 있는 것으로, @Binding으로 연결된 하위 뷰의 속성들은 모두 이 state 프로퍼티에 대해 읽기/쓰기가 가능해지게 됩니다.

 

코드를 자세히 보면, PlayerView는 isPlaying 이라는 state 값을 동일한 이름의 매개변수로 전달합니다. ($붙여서 값을 전달)

하위 뷰인 PlayButton에서는 isPlaying 이라는 바인딩 값을 사용해 상위 뷰의 isPlaying 값을 읽고 업데이트합니다.

 

 

SwiftUI로 개발을 하기 위해 필요한 아주 기본적인 내용인데, 이렇게 그림을 이용해 설명해보니 더 확실하게 정리가 되는 것 같네요😊

SwiftUI에서 제공해주는 State 관련 프로퍼티 래퍼가 굉장히 많은데, 개발하면서 많이 사용했었던 프로퍼티 래퍼에 대해 다른 게시글에서 더 정리해보도록 하겠습니다!

긴 글 읽어주셔서 감사합니다😊

---

[참고 자료]

State | Apple Developer Documentation

SwiftUI @State와 @Binding 에 대해 알아보자