HACKING WITH SWIFT - WeSplit(2)

🧑‍💻이전 시간에 이어서 이번 시간에도 동일하게 계속 진행해보겠습니다~!

 

 

 

---

1. 상태 수정

 

게임을 하다보면 캐릭터의 목숨을 몇 개 잃을 수도 있고 점수를 얻는다던지 하는 경우가 있다. 이걸 우리는 프로그래밍에 있어서 "상태"라고 부르는데

SwiftUI의 뷰가 상태의 함수라고 말하면 사용자 인터페이스의 모양, 즉 사람들이 볼 수있는 것과 상호 작용할 수있는 것이 프로그램의 상태에 따라 결정된다는 것을 의미한다. 예를 들면, 텍스트 필드에 이름을 입력할 때까지 계속을 누를 수 없다.

 

이번에는 그래서 SwiftUI에서 문자열과 버튼을 탭할때마다 실행 되는 작업 클로저를 생성할 수있는 버튼을 개발 해보자.

 

struct ContentView: View {
    var tapCount = 0

    var body: some View {
        Button("Tap Count: \(tapCount)") {
            tapCount += 1
        }
    }
}

코드를 보면 딱히 문제가 없어 보인다. 근데 이 코드는 실제로는 빌드 되지 않는데 이유는 ContentView는 상수로 생성될 수 있는 구조체이다. 앞서 우리가 배운 구조체 파트를 기억해보면 그건 원래 변하지 않는 것이었다. 

 

우리가 특성을 변경할려는 구조체 메서드를 작성할 때 mutationg 키워드를 추가해야 한다. 

우리의 목적은 버튼을 터치 할때마다 1씩 증가하게 프로그래밍하는 것이 목적이었었는데 View가 구조체이기 때문에 Swift가 그걸 허용해주지 않았기 때문에 상당히 곤란해진 상황이다.

 

 

 

이런 상황에서 Swift는 속성 래퍼(property wrapper)라고 하는 특별한 해답을 제공하는데 속성에 효과적으로 능력을 부여하는 특수 속성이다. 그래서 현재 상황에서는 @State라는 속성 래퍼를 사용하게 된다. 

struct ContentView: View {
    @State var tapCount = 0

    var body: some View {
        Button("Tap Count: \(tapCount)") {
            self.tapCount += 1
        }
    }
}

 

구조체가 고정되어있기 때문에 속성을 변경 할수 없다는 것을 알고 있지만 @State을 이용하면 해당 값을 수정 가능한 위치에 별도로 저장할 수 있게 된다. 따라서 @State를 이용하여 구조체의 한계를 해결할 수 있다.

Tap Count를 터치할때마다 카운트 숫자가 커지게 된다.

 

 

---

 

 

 

2. 사용자 인터페이스 컨트롤에 상태 바인딩 하기

 

이전에는 @State를 이용하여 구조체의 한계를 해결하는 방법에 대해서 알아보았는데 이번에는 사용자가 입력할 수있는 편집 가능한 텍스트 필드를 만들어 보자.

 

struct ContentView: View {
    var body: some View {
        Form {
            TextField("Enter your name")
            Text("Hello, world!")
        }
    }
}

자 이렇게 해보면 또 과연 잘될까? 그럴리가 없다. SwiftUI는 텍스트 필드에서 텍스트를 저장할 위치를 알고 싶어 하기 때문에 해당 코드는 정상적으로 컴파일되지 않는다. 그럼 이것도 아까와 비슷하게 수정을 해보자.

 

 

텍스트 필드의 경우에 텍스트에 있는 모든 내용이 name 속성에도 포함 되어있는지 확인을 해야 한다. 즉, 사용자가 볼 수 있는 모든 것은 코드에서 구조체와 속성의 가시적 표현!! 이것을 우리는 양방향 바인딩이라고 한다.

 

텍스트 필드를 바인딩 하여 속성 값을 표시 하지만 텍스트 필드를 수정하면 속성도 업데이트하도록 바인딩한다는 것이다. 

그래서 양방향 바인딩을 할때 특수 기호인 $를 사용하여 속성값을 읽고 변경 사항이 발생하면 다시 써야 한다고 Swift에게 알려주는 역할을 한다. 이제 모든 정리는 끝났으니 코드로 한번 정리해보자.

 

struct ContentView: View {
    @State private var name = ""

    var body: some View {
        Form {
            TextField("Enter your name", text: $name)
            Text("Your name is \(name)")
        }
    }
}

 

 

 

---

 

 

3. View에서 반복사용

 

 

View 내에서 반복문을 사용하는 경우는 생각보다 많다. 예를 들면 이름 배열을 반복적으로 보여주거나 메뉴 항목 배열을 생성할 때가 그렇다. SwiftUI는 이러한 목적을 위해 ForEach를 사용하게 되는데 이건 배열과 범위를 반복해서 필요한 만큼 View를 생성할 수 있다. 

 

또한 ForEach를 사용하면 10개의 뷰 제한 또한 없다. 

바로 사용해보자면

Form {
    ForEach(0..<100) { number in
        Text("Row \(number)")
    }
}

 

 

 

ForEach는 또한 SwiftUI로 작업할 때 특히 유용한데, Picker와 함께 사용하면 사용자가 선택할 수 있는 다양한 옵션을 표시할 수 있다. 

 

그래서 이걸 바로 예시로 보기 위해 아래와 같은 View를 정의해보자

1. 학생 이름에 대한 배열이 있다.
2. 현재 선택한 학생을 저장하는 속성인 @State를 이용한다. 
3. 사용자에 대한 양방향 바인딩을 사용하여 즐겨찾기를 선택하도록 Picker view를 생성한다. 
4. ForEach를 사용하여 가능한 모든 학생 이름을 반복하여 Text View로 바꾼다. 

 

 

struct ContentView: View {
    let students = ["Harry", "Hermione", "Ron"]
    @State private var selectedStudent = "Harry"

    var body: some View {
        NavigationView {
            Form {
                Picker("Select your student", selection: $selectedStudent) {
                    ForEach(students, id: \.self) {
                        Text($0)
                    }
                }
            }
        }
    }
}

 

 

여기서 짚고 넘어가야 하는 것 몇 가지만 더 살펴보자.

1. selectedStudent 속성은 Harry값으로 시작하지만 이후 사용자에 의해 변경될 수 있기 때문에 @State를 사용한다.
2. Picker레이블을 통해 학생 선택할 수 있다.
3. Picker와 selectedStudent 사이에 양방향 바인딩이 있다. 앞서 말했듯 사용자에 의해 값이 변경될 수 있기 때문이다. 

 

여기서 조금 어려웠던 부분은 ForEach(students, id: \. self)로 SwiftUI가 화면의 모든 view를 고유하게 식별할 수 있어야 하므로 상황이 변경될 때 감지할 수 있게 하기 위해 존재하는데 \. self가 의미하는 바는 문자열 자체가 고유하다는 것을 의미한다.

 

 

---

긴가민가하게 배워 애매했지만 이후 자세한 내용은 이후 프로젝트를 진행해보면서 차근차근 다시 해보자!!

learning by repetition