TIL

🌱 난 오늘 무엇을 공부했을까?

SwiftUI - 공식문서 보기

Managing user interface state

• 앱의 뷰 계층 구조 내에서 뷰별 데이터를 캡슐화해서 뷰를 재사용할 수 있도록 만든다.

Overview

• 뷰 간에 공유되는 단일 정보 소스를 설정하기 위해 데이터가 필요한 뷰의 최소단위 공통적인 조상에 데이터를 상태로 저장한다.
• Swift 프로퍼티를 통해 데이터를 읽기 전용으로 제공하거나, 바인딩을 사용해 상태에 대한 양방향 연결을 만든다.
• SwiftUI는 데이터 변경을 확인하고, 필요에 따라 영향을 받는 모든 뷰를 업데이트 한다.
  
• state 변수는 뷰의 라이프 사이클을 반영하기 때문에 영구적인 저장을 위해서 state 프로퍼티를 사용하지는 마라.
• 버튼 강조, 필터 설정 또는 현재 선택된 목록 항목과 같이 사용자의 인터페이스에만 영향을 미치는 임시적인 상태를 관리하는데 사용해라.
• 앱의 데이터 모델을 변경할 준비가 되기 전 프로토타입을 만드는 동안 이런 종류의 저장소 관리가 편리하다는 것을 알게 될 수도 있다.

Manage mutable values as state

• 뷰가 수정될 수 있는 데이터를 저장해야 하는 경우 State property wrapper를 사용해서 변수를 선언해라.
• 예를들면, PlayerView 내부에서 isPlaying이란 Boolean을 생성해서 팟캐스트가 실행되는 시점을 추적할 수 있다.

    struct PlayerView: View {
        @State private var isPlaying: Bool = false

        var body: some View {
            // ...
        }
    }

• 프로퍼티를 state로 표시하면 프레임워크가 기본 저장소를 관리하도록 지시한다.
• 뷰는 프로퍼티 이름을 사용해 wrapped Value 프로퍼티에 있는 데이터를 읽고 쓴다.
• 값이 변경되는 시점에 SwiftUI는 뷰의 영향을 받는 부분을 업데이트함.
• 예를들면, 탭하면 저장된 값을 전환하고 저장된 값에 따라 다른 이미지를 표시하는 버튼을 PlayerView에 추가할 수 있다.

    Button(action: {
        self.isPlaying.toggle()
    }) {
        Image(systemName: isPlaying ? "pause.circle" : "play.circle")
    }

• state 변수를 비공개로 선언하여 범위를 제한하면 변수를 선언하는 뷰 계층 구조에 변수가 캡슐화된 상태로 유지된다.

Declare Swift properties to store immutable values

• 뷰가 수정하지 않는 데이터를 뷰에 제공하려면 기본 Swift 프로퍼티로 선언해라.
• 예를 들면, 에피소드 제목과 프로그램 이름에 대한 문자열을 포함하는 입력 구조를 갖도록 팟캐스트 플레이어를 확장할 수 있다.

    struct PlayerView: View {
        let episode: Episode // The queued episode.
        @State private var isPlaying: Bool = false

        var body: some View {
            VStack {
                // Display information about the episode.
                Text(episode.title)
                Text(episode.showTitle)
                
                Button(action: {
                    self.isPlaying.toggle()
                }) {
                    Image(systemName: isPlaying ? "pause.circle" : "play.circle")
                }
            }
        }
    }

• 에피소드 프로퍼티의 값은 PlayerView에 대해 상수이지만 이 보기의 상위 뷰에서는 상수일 필요는 없다.
• 사용자가 상위 에피소드에서 다른 에피소드를 선택하면 SwiftUI는 상태 변경을 감지하고 새로운 입력으로 PlayerView를 다시 생성한다.

Share access to state with bindings

• 뷰가 하위 뷰와 상태 제어를 공유해야 하는 경우 Binding property wrapper를 사용하여 하위 뷰에서 속성을 선언한다
• 바인딩은 기존 스토리지에 대한 참조를 나타내며 기본 데이터에 대한 단일 정보 소스를 보존한다.
• 예를 들어, 팟캐스트 플레이어 뷰의 버튼을 PlayButton이라는 하위 뷰로 리팩터링하는 경우 isPlaying 속성에 대한 바인딩을 제공할 수 있다.

    struct PlayButton: View {
        @Binding var isPlaying: Bool

        var body: some View {
            Button(action: {
                self.isPlaying.toggle()
            }) {
                Image(systemName: isPlaying ? "pause.circle" : "play.circle")
            }
        }
    }

• 위에 표시된 바와 같이, State와 마찬가지로 프로퍼티를 직접 참조하여 바인딩의 래핑된 값을 읽고 쓴다.
• 그러나 State 속성과 달리 Binding에는 자체 저장소가 없다.
• 대신, 다른 곳에 저장된 State 속성을 참조하고 해당 저장소에 대한 양방향 연결을 제공한다.
• PlayButton을 인스턴스화할 때 달러 기호($) 접두사를 붙여 상위 뷰에 선언된 해당 상태 변수에 대한 바인딩을 제공

    struct PlayerView: View {
        var episode: Episode
        @State private var isPlaying: Bool = false

        var body: some View {
            VStack {
                Text(episode.title)
                Text(episode.showTitle)
                PlayButton(isPlaying: $isPlaying) // Pass a binding.
            }
        }
    }

• $ 접두사는 상태에 대해 기본 저장소에 대한 바인딩인 projectedValue에 대한 래핑된 속성을 요청한다.

• 마찬가지로 $ 접두사를 사용하여 바인딩에서 바인딩을 가져올 수 있으므로 임의의 수의 뷰 계층 구조 수준을 통해 바인딩을 전달할 수 있다.

• 상태 변수 내에서 범위가 지정된 값에 대한 바인딩을 가져올 수도 있다.

• 예를들어, 플레이어의 상위 뷰에서 에피소드를 상태 변수로 선언하고 에피소드 구조에 토글로 제어하려는 isFavorite 부울도 포함되어 있는 경우, $episode.isFavorite를 참조하여 에피소드의 즐겨찾기 상태에 대한 바인딩을 얻을 수 있다.

    struct Podcaster: View {
        @State private var episode = Episode(title: "Some Episode",
                                             showTitle: "Great Show",
                                             isFavorite: false)
        var body: some View {
            VStack {
                Toggle("Favorite", isOn: $episode.isFavorite) // Bind to the Boolean.
                PlayerView(episode: episode)
            }
        }
    }

Animate state transitions

• 뷰 상태가 변경되면 SwiftUI는 영향을 받는 뷰를 즉시 업데이트한다.
• 시각적 전환을 부드럽게 하려면, withAnimation(::) 함수 호출에서 이를 트리거하는 상태 변경을 래핑하여 SwiftUI에 애니메이션을 적용하도록 지시할 수 있습니다.
• 예를 들어, isPlaying Boolean에 의해 제어되는 변경 사항을 애니메이션화할 수 있다.

    withAnimation(.easeInOut(duration: 1)) {
        self.isPlaying.toggle()
    }

• 애니메이션 함수의 후행 클로저 내에서 isPlaying을 변경하면 버튼 이미지의 크기 조정 효과처럼 래핑된 값에 의존하는 모든 것을 SwiftUI에 애니메이션화하도록 지시할 수 있다.

    Image(systemName: isPlaying ? "pause.circle" : "play.circle")
        .scaleEffect(isPlaying ? 1 : 1.5)

• SwiftUI는 지정된 곡선과 지속 시간을 사용하거나 아무것도 제공하지 않는 경우 합리적인 기본값을 사용하여 주어진 값 1과 1.5 사이에서 시간에 따라 크기 조정 효과 입력을 전환한다.

• 반면에 동일한 Boolean이 표시할 시스템 이미지를 지정하더라도 이미지 콘텐츠는 애니메이션의 영향을 받지 않습니다.

• 이는 SwiftUI가 두 문자열 Pause.circle과 play.circle 사이에서 의미 있는 방식으로 점진적으로 전환할 수 없기 때문다.

• state 프로퍼티에 애니메이션을 추가하거나 위의 예와 같이 binding에 애니메이션을 추가할 수 있다.

• 어느 쪽이든, SwiftUI는 기본 저장된 값이 변경될 때 발생하는 모든 뷰 변경에 애니메이션을 적용

• 예를 들어, PlayerView(애니메이션 블록 위치 위의 뷰 계층 구조 수준)에 배경색을 추가하면 SwiftUI도 이에 애니메이션을 적용한다.

    VStack {
        Text(episode.title)
        Text(episode.showTitle)
        PlayButton(isPlaying: $isPlaying)
    }
    .background(isPlaying ? Color.green : Color.red) // Transitions with animation.

• 상태 변경으로 인해 트리거된 모든 뷰가 아닌 특정 뷰에 애니메이션을 적용하려면 대신 animation(_:value:) view modifier를 사용

역시 공식문서 따라가기가 제일 맘편하다.. 역시 근본..