[SwiftUI] @FocusState 와의 초면

SwiftUI로 로그인화면을 구현해 보면서 이것저것 많이 공부해 보려고 여러 가지 구현 조건들을 설정했었는데

그중에 하나가 "ID TextField를 first responder로 지정하기" 였당

사실 UIKit을 많이 다뤄보지는 않아서 아직 경험해보지는 못했지만, UIKit에서는 becomeFirstResponder 메서드로

first responder를 비교적 쉽게 적용할 수 있었지만

swiftUI에는 동일한 기능이 없어서 UIKit의 기능을 빌려 써야 했다고 한다ㅠ..!

 

그런데! iOS 15 버전 이상부터 온전히 swiftUI의 기능으로 first responder를 설정할 수 있게 되었는데

그것이 바로 @FocusState라는 property Wrapper 이다!!

 

---

@Focus State 

A property wrapper type that can read and write a value that SwiftUI updates

as the placement of focus within the scene changes.

scene 내부의 포커스의 위치가 변화될 때 SwiftUI가 업데이트하는 값을 읽고 쓸 수 있는 property wrapper라고한다.

@frozen @propertyWrapper
struct FocusState<Value> where Value : Hashable

 

FocusState는 .focused(_:equals:) 및 .focused(_:) 메서드와 함께 사용된다.

 

 

 

.focused(_:equals:)

func focused<Value>(
    _ binding: FocusState<Value>.Binding,
    equals value: Value
) -> some View where Value : Hashable

.focused로 잡힌 뷰(대부분 textField에서 사용)에 진입하면 equals에 있는 값과 동일하게 설정됨. 

실제로 써보지는 않아서 공식문서에 있는 예시를 가져와보쟈

struct LoginForm {

	// Field라는 열거형 선언. FocusState로 선언되는 변수는 Hashable해야해서 해당 프로토콜 채택
    enum Field: Hashable {
        case username
        case password
    }


    @State private var username = ""
    @State private var password = ""
    
    // Optional Field 열거형을 타입으로 갖는 변수에 FocusState 선언
    @FocusState private var focusedField: Field?


    var body: some View {
        Form {
            TextField("Username", text: $username)
                .focused($focusedField, equals: .username)
                // 이 textField뷰에 진입하면 .username으로 값을 동일하게 변경한다는 뜻


            SecureField("Password", text: $password)
                .focused($focusedField, equals: .password)


            Button("Sign In") {
            // username textField가 비어있다면 focusedField에 username을 할당해서
            // 결국 username으로 focus를 옮기겠다는 뜻
                if username.isEmpty {
                    focusedField = .username
                } else if password.isEmpty {
                    focusedField = .password
                } else {
                    handleLogin(username, password)
                }
            }
        }
    }
}

focusedField 변수에 FocusState 래퍼를 사용해서 이 변수에 할당되는 값이 변할 때마다 해당 뷰에 진입해서

 

equals에 있는 값과 동일하게 설정하겠다는 뜻

 

 

 

.focused(_:) 

func focused(_ condition: FocusState<Bool>.Binding) -> some View

 

. focused를 textField에 적용하면 주어진 Bool 값에 따라서 뷰의 포커스 상태가 업데이트된다고 함.

 

근데 여기서 주의해야 할 점이 있음.

FocusState를 사용해서 변수를 생성해서 초기화를 할 때, 초기값을 설정해 줄 수 없음. 

@FocusState var isTextFieldFocused: Bool = false

이렇게 처음에 선언 시 초기값을 설정해 주면

 

Argument passed to call that takes no arguments

하고 에러 쫙쫙임.. FocusState로 초기화를 할 때, argument를 받게 하는 init이 없음.

그래서 초기화를 해주려면 선언 후에 뷰 내부에서 값을 할당해 줄 수밖에 없다고 함! 

그래서 이 메서드의 아규먼트로 받는 변수도 Bool type으로 선언된 변수이긴 하지만 아직 초기화가 되어있지 않기 때문에

실제적인 값이 설정되어 있지 않음. 그래서 .focused로 "이 변수를 바인딩할 거야~" 하고 설정만 해주고

실제적은 Bool 타입 값은 외부에서 정해줄 수밖에 없는 것 같음..! 

그래서 나는 이렇게 사용했음. 

@FocusState var isTextFieldFocused: Bool // 여기서 초기값 설정 못함! 해당 뷰에서 설정해야함~
    
    TextField("  Enter your E-mail", text: $id)
       .focused($isTextFieldFocused) // 해당 뷰에서 이 값을 바인딩해서 쓰겠다!
       .onAppear {
            isTextFieldFocused = true
        } 
        // 이 앱이 실행될 때 isTextFieldFocused를 true로 바뀌게 설정해서 해당 TextField에 
        // focus가 이동하도록 구현함.

.onAppear  메서드를 통해 isTextFieldFocused라는 값을 true로 변경시켜서

앱이 실행될 때 이 뷰로 focus가 옮겨지게 코드를 구현해 보았다.

 

그래서 앱을 실행하면 ID textField로 focus가 되어서 키보드가 올라오는 것을 볼 수 있다.

 

 

 

---

사실 FocusState를 처음 사용해 봐서.. 처음에 될 때 엄청 신기했음..!!!

아직도 다 이해한 건 아니라서,, 완전 공부 필수임!!!!! 다음에 내 힘으로 직접 쓸 수 있을지 의문 ㅜ

그리고 일단 공식문서 해석하면서 이해하긴 했지만 제대로 맞게 이해했는지도 의문임..!!!!

 

제가 잘못 이해했다면 제~발~ 알려주세요!!!!! 아직 응애 개발자입니다..!!!!!!!!!!!

 

 

📝 Reference ❤️

 

https://developer.apple.com/documentation/swiftui/focusstate

FocusState | Apple Developer Documentation

https://green1229.tistory.com/278

@FocusState 사용하기