@FocusState란?

@FocusState는 SwiftUI에서 포커스 상태를 관리하기 위한 속성 래퍼로, 주로 텍스트 입력 필드나 키보드 포커스를 제어할 때 사용됩니다. 이를 통해 텍스트 필드가 현재 포커스를 받고 있는지 여부를 추적하고, 필요한 경우 특정 필드에 포커스를 설정하거나 해제할 수 있습니다.

1. 기본 개념

• @FocusState는 텍스트 필드와 같은 입력 필드의 포커스 상태를 관리하고 제어하는 데 사용됩니다.
• 입력 필드가 포커스를 얻으면 키보드가 나타나고, 포커스를 잃으면 키보드가 사라집니다.
• @FocusState는 상태 기반으로 포커스를 설정하거나 해제할 수 있도록 하여, 동적이고 반응적인 UI를 만들 수 있습니다.

2. 기본 사용법

아래는 @FocusState를 사용해 텍스트 필드의 포커스를 제어하는 예시입니다.

struct ContentView: View {
    @State private var name: String = ""
    @FocusState private var isNameFieldFocused: Bool  // 포커스 상태 추적

    var body: some View {
        VStack {
            TextField("Enter your name", text: $name)
                .focused($isNameFieldFocused)  // 포커스 상태와 연결
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()

            Button("Submit") {
                isNameFieldFocused = false  // 버튼을 눌렀을 때 포커스를 해제
            }
        }
        .padding()
    }
}

설명:

• @FocusState는 포커스 상태를 추적하는 속성 래퍼입니다. 여기서는 isNameFieldFocused 변수가 텍스트 필드의 포커스 상태를 추적합니다.
• .focused($isNameFieldFocused)는 해당 텍스트 필드가 isNameFieldFocused 상태와 연결되도록 하여, true이면 포커스가 설정되고, false이면 포커스가 해제됩니다.
• 버튼 클릭 시 isNameFieldFocused = false로 설정하면 텍스트 필드의 포커스가 해제됩니다.

3. 다중 포커스 관리

@FocusState는 하나 이상의 입력 필드에 포커스를 관리할 때도 사용할 수 있습니다. 각 필드에 다른 포커스를 설정해 복잡한 폼 UI에서 쉽게 사용할 수 있습니다.

예시: 여러 텍스트 필드의 포커스 관리

struct ContentView: View {
    @State private var username: String = ""
    @State private var password: String = ""
    @FocusState private var focusedField: Field?  // 필드 포커스 상태

    enum Field: Hashable {  // 필드 구분을 위한 열거형
        case username
        case password
    }

    var body: some View {
        VStack {
            TextField("Username", text: $username)
                .focused($focusedField, equals: .username)  // username 필드와 연결
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()

            SecureField("Password", text: $password)
                .focused($focusedField, equals: .password)  // password 필드와 연결
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()

            Button("Next") {
                if focusedField == .username {
                    focusedField = .password  // username 필드에서 password 필드로 포커스 이동
                } else {
                    focusedField = nil  // 모든 필드의 포커스 해제
                }
            }
        }
        .padding()
    }
}

설명:

• @FocusState를 사용해 여러 필드의 포커스를 관리합니다.
• enum Field는 각 필드를 구분하기 위해 사용되는 열거형입니다.
• .focused($focusedField, equals: .username)는 focusedField 상태가 .username일 때 해당 필드가 포커스를 가지게 만듭니다.
• 버튼을 눌렀을 때, username 필드에서 password 필드로 포커스를 자동으로 이동시킬 수 있습니다.

4. 포커스를 설정하고 해제하는 방법

포커스 설정

포커스를 특정 필드에 설정하려면 @FocusState 변수를 true로 설정하거나, 필드를 명시적으로 지정해줍니다.

focusedField = .username  // username 필드에 포커스 설정

포커스 해제

포커스를 해제하려면 @FocusState 변수를 nil로 설정하거나 false로 설정합니다.

focusedField = nil  // 모든 필드에서 포커스 해제

또는 단일 필드의 경우:

isNameFieldFocused = false  // 특정 필드의 포커스 해제

5. 동적 포커스 제어

앱에서 특정 작업 후 자동으로 포커스를 설정하거나 키보드를 표시할 때 @FocusState를 사용해 상태에 따라 UI를 제어할 수 있습니다.

예시: 텍스트 입력 후 다음 필드로 자동 포커스

struct ContentView: View {
    @State private var firstName: String = ""
    @State private var lastName: String = ""
    @FocusState private var focusedField: Field?

    enum Field: Hashable {
        case firstName, lastName
    }

    var body: some View {
        VStack {
            TextField("First Name", text: $firstName)
                .focused($focusedField, equals: .firstName)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .onSubmit {
                    focusedField = .lastName  // 엔터를 누르면 lastName으로 포커스 이동
                }

            TextField("Last Name", text: $lastName)
                .focused($focusedField, equals: .lastName)
                .textFieldStyle(RoundedBorderTextFieldStyle())
        }
        .padding()
    }
}

• 첫 번째 필드에서 Enter(Submit) 키를 누르면 자동으로 다음 필드로 포커스가 이동합니다.

6. 포커스 관리 시 고려사항

• 포커스는 자동으로 상태를 추적하기 때문에, SwiftUI에서 상태 기반으로 동적 UI를 쉽게 제어할 수 있습니다.
• @FocusState는 여러 텍스트 필드를 포함한 복잡한 폼 UI에서 유용합니다. 특히, 자동 포커스 이동이나 상태 변화에 따른 포커스 제어가 필요할 때 자주 사용됩니다.
• 앱의 포커스 제어 흐름이 자연스럽고 직관적으로 유지되도록 상태 변화를 적절히 관리해야 합니다.

7. 결론

@FocusState는 SwiftUI에서 입력 필드의 포커스 상태를 추적하고 제어하는 중요한 도구입니다. 이를 사용하면 특정 상황에서 자동으로 포커스를 이동하거나 해제할 수 있으며, 사용자가 입력 중인 필드를 상태로 관리할 수 있습니다. 폼 UI나 텍스트 입력 필드가 많은 화면에서 매우 유용하며, SwiftUI의 선언적 UI 방식과 잘 어우러져 포커스 상태를 쉽게 다룰 수 있습니다.