SwiftUI에서 많이 하는 실수 - @State와 @Binding을 혼동해서 잘못 사용하는 실수

SwiftUI에서 많이 하는 실수 - @State와 @Binding을 혼동해서 잘못 사용하는 실수

 

SwiftUI에서 상태를 다룰 때 가장 먼저 부딪히는 벽이 바로 @State vs @Binding입니다.

두 개념의 핵심 차이는 “상태를 누가 소유하느냐”입니다.

• @State : 이 View가 값의 진짜 소유자(source of truth) 일 때
• @Binding: 이미 다른 곳에서 소유한 값을 읽고·쓰기만 할 때 (참조)

이걸 섞어 쓰면 부모와 자식의 값이 따로 놀거나, UI가 갱신되지 않는 문제가 자주 생깁니다.

---

1. 문제 원인

• UIKit 시절처럼 “View마다 자기 상태를 가지면 되겠지”라고 생각
• 부모와 자식이 동시에 @State를 선언해 각자 다른 상태를 가짐
• @Binding을 “단지 inout 비슷한 것”으로만 이해하고 소유권을 고려하지 않음

---

2. 나타나는 증상

• 부모 View의 Text는 안 바뀌는데, 자식 TextField만 값이 바뀌는 것처럼 보임
• 자식에서 입력한 내용이 다른 화면으로 전달되지 않음
• 디버깅해보면 분명 set을 하는데, 다른 View에서 값이 유지되지 않음

---

3. 잘못된 코드 예시

struct ParentView: View {
    @State private var name: String = ""   // 부모의 상태

    var body: some View {
        VStack {
            Text("부모 이름: \(name)")

            // ❌ 자식이 자기만의 @State를 가지고 있어 동기화되지 않음
            ChildView()
        }
        .padding()
    }
}

struct ChildView: View {
    @State private var name: String = ""   // ❌ 실제 소스와는 다른 상태

    var body: some View {
        TextField("이름 입력", text: $name)
            .textFieldStyle(.roundedBorder)
            .padding()
    }
}

• ParentView.name 과 ChildView.name 은 서로 전혀 관계가 없습니다.
• 사용자는 “입력했는데 위 텍스트는 왜 안 바뀌지?”라는 상황을 겪게 됩니다.

---

4. 올바른 코드 예시

struct ParentView: View {
    @State private var name: String = ""   // ✅ 진짜 상태 소유자

    var body: some View {
        VStack {
            Text("부모 이름: \(name)")
            ChildView(name: $name)         // ✅ Binding 전달
        }
        .padding()
    }
}

struct ChildView: View {
    @Binding var name: String              // ✅ 소유권 없음, 참조만

    var body: some View {
        TextField("이름 입력", text: $name)
            .textFieldStyle(.roundedBorder)
            .padding()
    }
}

이제 TextField에서 입력한 내용이 곧바로 부모의 name에 반영되고,

부모 Text도 함께 업데이트됩니다.

---

5. 정리 및 팁

• 먼저 “이 값의 진짜 주인은 누구인가?”를 정한 다음, 그 View에 @State를 선언합니다.
• 자식 View는 항상 @Binding 또는 단순 값 복사만 사용하는 것이 기본 원칙입니다.
• 재사용 가능한 컴포넌트는 @Binding 기반으로 만들고, Preview에서는 .constant를 활용합니다.

#Preview {
    ChildView(name: .constant("미리보기"))
}

이 원칙만 지켜도 SwiftUI 상태 꼬임이 많이 사라집니다.