What is the @GestureState property wrapper?

 

Hacking with Swift 사이트의 강좌 번역본입니다.

 

[원문 : https://www.hackingwithswift.com/quick-start/swiftui/what-is-the-gesturestate-property-wrapper]

 

What is the @GestureState property wrapper?

 

SwiftUI는 @GestureState라고하는 제스쳐 상태를 추적하는 특정 property wrapper를 제공합니다. 비록 간단한 @State property wrapper를 사용해서 동일한 결과를 얻을 수 있지만, @GestureState는 제스쳐가 끝날때 property를 초기 값으로 자동으로 설정하는 기능이 추가되어 있습니다.

 

예를들어, 뷰를 드래그 할 수 있는 제스쳐를 만들고 싶을지 모릅니다. 이를 위해서, 먼저 다음과 같이 뷰가 얼마나 이동했는지를 저장하기 위한 @GestureState property를 만들어야 합니다.

@GestureState var dragAmount = CGSize.zero

 

기본 값으로 CGSize.zero를 가지며, 제스쳐가 끝날때 자동으로 그 값을 반환할 것입니다.

다음으로, offset() modifier를 붙임으로써 뷰가dragAmoun에 있는 값 만큼 움직이도록 합니다.

Image("example-image")
    .offset(dragAmount)

 

마지막으로, 다음과 같이, dragAmount에 바인딩하는 제스쳐를 붙일것입니다.

Image("example-image")
    .offset(dragAmount)
    .gesture(
        DragGesture().updating($dragAmount) { value, state, transaction in
            state = value.translation
        }
    )

 

코드에 많은 것이 있으므로, 요약해 봅시다:
1. DragGesture().updating() 코드는 새로운 드래그 제스쳐를 만들고, dragAmount에 저장된 값을 수정하도록 요청합니다 - CGSize 입니다.
2. 3개의 매개변수가 있는 클로져를 사용합니다: value, state, transaction.
3. value 매개변수는 드래그하는 현재 데이터입니다 - 시작되는 곳, 이동된 거리, 끝까지의 예상 위치, 등등.
4. state 매개변수는 inout 값인 property입니다. 따라서 직접 dragAmount을 읽거나 쓰기보다는, 해당 클로져 내부에서 state를 수정해야 합니다.
5. transaction 매개변수는 전체 애니메이션 컨텍스트(context)를 저장하는 inout 값이며, 연속적이거나 일시적인 애니메이션인지에 대한 작은 정보를 제공합니다. 연속적인 애니메이션은 슬라이드를 드래그함으로써 만들어지며, 반면에 일시적인 애니메이션은 버튼을 탭함으로써 만들어집니다.

 

@GestureState의 장점중 하나가 제스쳐가 끝날때, property를 자동으로 초기 값으로 설정해 주는 것임을 기억하세요. 이 경우에, 뷰를 원하는 곳에 드래그 할 수 있다는 것을 의미하고, 놓자마자 원래 위치로 되돌아 갈것입니다.