SwiftUI) SwiftUI Essentials 3 - Handling User Input

 

Handling User Input | Apple Developer Documentation

스유 튜토리얼 3번째 입니다 !

 

Landmarks 앱에서 사용자는 즐겨찾는 장소를 표시하고, 그 목록을 필터링하여 즐겨찾기만 표시할 수 있습니다.

이 기능을 만들기 위해 먼저 사용자가 즐겨찾기에만 집중할 수 있는 스위치를 목록에 추가한 다음,

사용자가 즐겨찾는 landmark를 표시하기 위해 별 모양의 버튼을 추가할 것입니다.

 

---

 

1. 사용자의 즐겨찾기 표시하기 

사용자가 한눈에 자신의 즐겨찾는 장소를 볼 수 있도록 목록을 개선하는 것을 시작합니다.

Landmark 구조체에 프로퍼티를 추가하여 랜드마크의 초기 상태를 즐겨찾는 장소로 읽을 수 있도록 하고,

즐겨찾는 landmark를 보여주는 각 LandmarkRow에 별표를 추가하세요.

 

---

 

1. isFavorite 라는 프로퍼티를 Landmark 모델에 추가해주기.

( landmarkData.json 파일 안에 같은 이름의 키가 있으므로, Codable 프로토콜 채택을 통해서 해당 키와 연관된 값을 얻을 수 있어요.)

2. LandmarkRow에 isFavorite 값이 true 일때 꽉찬 별 모양 이미지를 추가. 색상은 yellow

 

// Landmark 모델에 아래 프로퍼티 추가
var isFavorite: Bool

// SwiftUI 블록에서는 if 문을 사용하여 조건에 따라 뷰를 조건부로 포함시킬 수 있습니다.
if landmark.isFavorite {
   Image(systemName: "star.fill")
        .foregroundColor(.yellow)
}

 

2. 리스트 뷰 필터링하기

모든 landmark 또는 사용자의 즐겨찾기만 표시하도록 목록 보기를 사용자 정의할 수 있습니다.

이를 위해 LandmarkList 타입에 약간의 state를 추가해야 합니다.

 

State는 시간이 지남에 따라 변경될 수 있는 값 또는 값 집합이며, 뷰의 동작, 콘텐츠 또는 레이아웃에 영향을 미칩니다.

뷰에 state를 추가하려면 @State 속성을 가진 속성을 사용합니다.

 

---

 

1. 랜드마크 리스트 뷰에 false로 초기값이 설정된 showFavoritesOnly라는 @State 속성을 추가하세요.

2. 랜드마크 리스트의 showFavoritesOnly 프로퍼티 및 각 landmark.isFavorite 값을 확인하여 필터링된 버전의 landmarks 목록을 계산하세요.

    @State private var showFavoritesOnly = false

    var filteredLandMarks: [Landmark] {
        landmarks.filter { landmark in
            (!showFavoritesOnly || landmark.isFavorite)
        }
    }

- 이렇게 showFavoritesOnly 속성과 각 landmark의 isFavorite 값을 확인하여 필터링된 버전의 landmarks 목록을 반환하는 연산 프로퍼티를 추가해주세요 !

 

3. 그리고 리스트 뷰에 들어가는 landmarks를 filteredLandMarks 로 바꿔줍니다 !

List(filteredLandmarks) { landmark in

 

3. 토글 메뉴 만들기 

사용자가 목록 필터를 제어할 수 있도록 showFavoritesOnly의 값을 변경할 수 있는 컨트롤을 추가해야 합니다.

( 필터링 된 것만 볼지, 전체 목록을 다 볼지 토글로 제어.)

이를 위해 toggle control에 binding을 전달합니다.

 

binding은 변경 가능한 상태에 대한 참조 역할을 합니다.

사용자가 토글을 끄고 켜고 다시 끌 때, 컨트롤은 바인딩을 사용하여 뷰의 상태를 업데이트합니다.

---

 

1. 랜드마크를 행으로 변환하기 위해 중첩된 ForEach 그룹을 만듭니다.

- 리스트에서 정적 및 동적 뷰를 결합하거나 두 개 이상의 서로 다른 동적 뷰 그룹을 결합해야하는 경우,

데이터 컬렉션을 List에 전달하는 대신 ForEach 타입을 사용합니다.

 

2. List 뷰의 첫 번째 자식으로 showFavoritesOnly에 대한 바인딩을 전달하는 토글 뷰(Toggle)를 추가합니다.

- 상태 변수나 그 속성 중 하나에 대한 바인딩을 액세스하기 위해 $ 접두사를 사용합니다.

 

var body: some View {
        NavigationView {
            List {
                Toggle(isOn: $showFavoritesOnly) {
                    Text("Favorites only")
                }
                
                ForEach(filteredLandMarks) { landmark in
                    NavigationLink {
                        LandmarkDetail(landmark: landmark)
                    } label: {
                        LandmarkRow(landmark: landmark)
                    }
                }
            }
            .navigationTitle("Landmarks")
        }
    }

 

 

 

4. 저장을 위해 Observable 객체 사용하기

사용자가 특정 landmark를 즐겨찾기로 선택하도록 준비하기 위해 landmark 데이터를 observable object에 저장합니다.

Observable object는 SwiftUI의 환경에서 저장된 뷰에 바인딩 될 수 있는 사용자 정의 데이터 객체입니다.

SwiftUI는 뷰에 영향을 줄 수 있는 observable object의 변경 사항을 모니터링하고 변경 후 올바른 버전의 뷰를 표시합니다.

---

 

1. ModelData 파일에서 Combine 프레임워크를 import하고, ObservableObject 프로토콜을 준수하는 새로운 모델 타입을 선언합니다.

- SwiftUI는 ObservableObject를 구독하고, 데이터가 변경될 때 새로 고쳐야 하는 모든 뷰를 업데이트합니다.

2. 랜드마크 배열을 Observable Object 안으로 이동.

3. @Published 속성을 랜드마크 배열에 추가

- ObservableObject는 데이터 변경 사항을 발행(publish)해야 합니다. 이를 통해 이를 구독하는 다른 객체들이 변경 사항을 반영할 수 있습니다.

 

import Combine

final class ModelData: ObservableObject {
    @Published var landmarks: [Landmark] = load("landmarkData.json")
}

 

5. 뷰에서 모델 객체 채택하기

이제 ModelData 객체를 만들었으므로, 앱의 데이터 저장소로 채택하도록 뷰를 업데이트해야 합니다.

 

---

 

1. LandmarkList.swift 파일에서, view에 @EnvironmentObject 프로퍼티 선언을 추가하고, preview에 environmentObject(_:) modifier를 추가하세요.

- modelData 프로퍼티는 부모 뷰에 environmentObject(_:) 수정자가 적용되어 있으면 자동으로 값을 가져옵니다.

 

2. 랜드마크를 필터링할 때 데이터로 modelData.landmarks를 사용하세요.

struct LandmarkList: View {
    @EnvironmentObject var modelData: ModelData
    @State private var showFavoritesOnly = false

    var filteredLandmarks: [Landmark] {
        modelData.landmarks.filter { landmark in
            (!showFavoritesOnly || landmark.isFavorite)
        }
    }
...

struct LandmarkList_Previews: PreviewProvider {
    static var previews: some View {
        LandmarkList()
            .environmentObject(ModelData())
    }
}

 

3. LandmarkDetail 뷰를 환경(Environment)에 있는 ModelData 객체와 함께 작동하도록 업데이트하세요.

struct LandmarkDetail_Previews: PreviewProvider {
    static var previews: some View {
        LandmarkDetail(landmark: ModelData().landmarks[0])
    }
}

4. LandmarkRow 미리보기를 ModelData 객체와 함께 작동하도록 업데이트합니다.

struct LandmarkRow_Previews: PreviewProvider {
    static var landmarks = ModelData().landmarks

5. ContentView의 preview를 업데이트하여 모델 객체를 환경(Environment)에 추가하여 모든 하위 뷰에서 해당 객체를 사용할 수 있게 합니다.

- 만약 미리보기하는 뷰에서 필요한 하위 뷰가 모델 객체를 환경(environment)으로부터 가져오지 않은 경우, 뷰가 미리보기에 실패합니다. 이 경우, 해당 하위 뷰에 environmentObject(_:) 수정자를 추가해줘야 합니다.

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .environmentObject(ModelData())
    }
}

 

다음으로, 시뮬레이터나 기기에서 앱을 실행할 때 모델 객체를 환경(Environment)에 넣어주기 위해 앱 인스턴스를 업데이트할 것입니다.

 

6. LandmarksApp을 업데이트하여 model 인스턴스를 만들고 environmentObject(_:) modifier를 사용하여 ContentView에 공급합니다.

- @StateObject 속성을 사용하면 앱 라이프 사이클 동안 주어진 속성에 대해 모델 객체를 한 번만 초기화합니다. 여기에서 보여주는 대로 앱 인스턴스에서 속성을 사용하는 경우뿐만 아니라 뷰에서 사용하는 경우에도 해당됩니다.

 

@main
struct LandmarksApp: App {
    @StateObject private var modelData = ModelData()

    var body: some Scene {
        WindowGroup {
            ContentView()
                .environmentObject(modelData)
        }
    }
}

 

6. 랜드마크에 즐겨찾기 버튼 생성하기

Landmark 앱은 이제 landmark들의 필터링된 뷰와 필터링되지 않은 뷰 간에 전환할 수 있지만, 즐겨찾기 landmark 목록은 여전히 하드 코딩되어 있습니다.

사용자가 즐겨찾기를 추가하고 제거할 수 있도록 Landmark detail view에 즐겨찾기 버튼을 추가해야 합니다.

---

1. 재사용할 Favorite Button 파일 만들어주기

2. isSet에 대한 바인딩을 추가하여 버튼의 현재 상태를 나타내고, 프리뷰에 대한 상수 값을 제공합니다.
- Binding을 사용하면, 이 뷰에서의 변경 사항을 데이터 소스로 전달합니다.

struct FavoriteButton: View {
    @Binding var isSet: Bool

    var body: some View {
        Text(/*@START_MENU_TOKEN@*/"Hello, World!"/*@END_MENU_TOKEN@*/)
    }
}

struct FavoriteButton_Previews: PreviewProvider {
    static var previews: some View {
        FavoriteButton(isSet: .constant(true))
    }
}

3. isSet 상태를 토글하는 액션을 가지는 Button을 만들고, 상태에 따라 모양이 변경되도록 합니다.
- 버튼의 라벨로 제공하는 문자열은 iconOnly 라벨 스타일을 사용할 때 UI에 나타나지 않지만, VoiceOver는 이를 사용하여 접근성을 향상시킵니다.

 

( VoiceOver 가 뭔지 몰라서 GPT한테 물어봤어요.)

 

VoiceOver는 시각적으로 보이지 않는 UI 요소들을 음성으로 설명해주는 도구이며, 이를 통해 시각적인 장애를 가진 사용자도 앱을 이용할 수 있습니다. 따라서 라벨 문자열을 제공하여 VoiceOver를 이용하는 사용자가 버튼 기능을 이해하고 사용할 수 있도록 하는 것이 중요합니다.

    var body: some View {
        Button {
            isSet.toggle()
        } label: {
            Label("Toggle Favorite", systemImage: isSet ? "star.fil" : "star")
                .labelStyle(.iconOnly)
                .foregroundColor(isSet ? .yellow : .gray)
        }
    }

4. 프로젝트가 커지면 계층 구조를 추가하는 것이 좋습니다. 다음으로 넘어가기 전에 몇 개의 그룹을 더 만드세요. 

- 폴더링을 해줬습니다 !

 

5. 다음으로, 즐겨찾기 버튼을 상세 보기 뷰에 추가하고, 버튼의 isSet 속성을 특정 landmark의 isFavorite 속성에 바인딩합니다.
- 입력된 landmark와 model data를 비교하여 해당 landmark의 인덱스를 계산합니다.

- 이를 지원하기 위해, 환경의 model data에 대한 액세스 권한이 필요합니다.

 

    @EnvironmentObject var modelData: ModelData
    var landmark: Landmark

    var landmarkIndex: Int {
        modelData.landmarks.firstIndex(where: { $0.id == landmark.id })!
    }

6. 새로운 FavoriteButton과 함께 landmark의 이름을 HStack으로 묶어서 사용하고, isFavorite 속성에 $ 기호를 사용하여 바인딩을 제공하세요.

- landmarkIndex와 modelData 객체를 사용하여 버튼이 모델 객체에 저장된 landmark의 isFavorite 속성을 업데이트하도록합니다.

 

HStack {
	Text(landmark.name)
    	.font(.title)
        FavoriteButton(isSet: $modelData.landmarks[landmarkIndex].isFavorite)
 }

리스트 뷰로 돌아가서 라이브 프리뷰로 확인해보세요 !

 

리스트에서 디테일로 이동하고 버튼을 누르면, 목록으로 돌아와도 해당 변경 사항이 유지됩니다.

두 뷰가 환경(environment)에서 동일한 모델 객체(model object)에 액세스하기 때문에 두 뷰가 일관성을 유지합니다.

 

---

 

 

개인적으로 궁금했던 부분 - @State 변수를 계속 private로 선언하는 이유?

 

@State 변수를 private으로 선언하는 것은 권장되는 방법 중 하나입니다.

이유는 @State 변수가 변경될 때마다 SwiftUI가 해당 View를 업데이트하기 때문에,

불필요한 렌더링이 발생하지 않도록 View의 최소한의 부분만 다시 그려지도록 하는 것이 성능적으로 좋기 때문입니다.

 

하지만, @State 변수가 private으로 선언되어야만 하는 것은 아닙니다.

만약 다른 View에서 해당 변수를 사용해야 하는 경우에는, @State 변수를 해당 View의 상위 View에서 선언하고,

binding을 사용하여 하위 View로 전달할 수 있습니다.

 

따라서, @State 변수를 private으로 선언할지는 개발자의 판단에 따라 다를 수 있습니다.