Landmarks 앱에서 사용자가 좋아하는 장소에 플래그를 지정하고 리스트를 필터링해서 볼 수 있도록 만들어보자. 이 기능을 만들려면 먼저 리스트에 스위치를 추가하여 사용자가 자신의 즐겨찾기에만 집중할 수 있도록 한 다음 사용자가 랜드마크를 즐겨찾기로 표시하기 위해 탭할 수 있는 별 모양의 버튼을 추가하면 된다.

Section 1. Mark the User’s Favorite Landmarks

사용자가 즐겨찾기를 한 눈에 볼 수 있도록 Landmark 구조에 프로퍼티를 추가해 landmarkData.json 로 부터 읽어올 수 있도록 만들고 LandmarkRow 뷰에 별을 추가해보자

Section 2. Filter the List View

모든 랜드마크 표시 또는 사용자의 즐겨찾기만 표시할 수 있도록 리스트 뷰를 수정해보자. 이를 위해 LandmarkList 에 State 를 추가해야 한다. State는 시간이 지남에 따라 값이 변경될 수 있고 뷰의 동작, 콘텐츠 또는 레이아웃에 영향을 주는 값 또는 값의 집합이다. 뷰에 State를 추가하려면 @State 특성이 있는 프로퍼티를 사용한다.

State

@frozen @propertyWrapper struct State<Value>

SwiftUI에서 관리하는 값을 읽고 쓸 수 있는 프로퍼티 래퍼 타입

(A property wrapper type that can read and write a value managed by SwiftUI.)

LandmarkList.swift

struct LandmarkList: View {
    // 하위 뷰 또는 자신만 정보를 가지고 있으므로 항상 private
    @State private var showFavoritesOnly: Bool = true
    
    var filteredLandmarks: [Landmark] {
        landmarks.filter { landmark in
            (!showFavoritesOnly || landmark.isFavorite)
        }
    }
    
    var body: some View {
        NavigationStack {
            List(filteredLandmarks) { landmark in
                NavigationLink {
                    LandmarkDetail(landmark: landmark)
                } label: {
                    LandmarkRow(landmark: landmark)
                }
            }
            .navigationTitle("Landmark")
        }
    }
}

Section 3. Add a Control to Toggle the State

리스트를 필터링하는 것에 대한 사용자 제어를 제공하려면 showFavoritesOnly 의 값을 변경할 수 있는 제어를 추가해야 한다. Toggle 컨트롤에 바인딩을 전달해서 이 작업을 수행하보자. 바인딩은 변경 가능한 상태에 대한 참조 역할을 하며, 사용자가 토글을 탭하는 행동에 따라 뷰의 상태를 업데이트한다.

Binding

@frozen @propertyWrapper @dynamicMemberLookup struct Binding<Value>

신뢰할 수 있는 소스가 소유한 값을 읽고 쓸 수 있는 프로퍼티 래퍼 타입