[SwiftUI] List 동적 리스트로 구현하기

안녕하세요! 피피아노입니다🎵

 

이번 포스팅은 지난번에 이어서 SwiftUI List에 관해서 포스팅을 해볼건데 이번에는 동적 리스트에 대해서 다루려고 합니다.

지난번 포스팅이 궁금하신 분들은 여기를 참고해주시면 됩니다!

 

그럼 바로 시작하겠습니다.

 

SwiftUI 동적 리스트

SwiftUI에서 리스트도 동적으로 표현될 수 있습니다. 시간이 지남에 따라 변할 수 있는 항목들을 포함하고 있는 리스트라면 동적 리스트라고 말을 할 수 있는데요. 다시 말하자면, 항목이 추가, 삭제, 편집될 수 있고, 이러한 변화를 동적으로 반영하도록 만드는 것이 동적 리스트라고 할 수 있습니다.

 

이런 동적 리스트를 지원하려면 표시될 데이터는 Identifiable 프로토콜을 따르는 클래스 또는 구조체 내에 포함되어야 합니다. Identifiable 프로토콜을 준수해야 하는 이유는 각 데이터 항목을 고유하게 식별해야 하기 때문입니다.

 

*Identifiable 프로토콜이란?

Swift에서 Identifiable 프로토콜은 고유 식별자를 가진 타입을 위한 프로토콜입니다. 이 프로토콜을 채택한 타입은 고유 식별자를 제공해야 하며, 이를 통해 구조체나 클래스 인스턴스를 구별할 수 있게 됩니다.

 

Identifiable 프로토콜을 사용하려면 리스트에서 각 항목을 고유하게 식별하는 데 사용될 수 있는 id라는 이름의 프로퍼티가 객체에 존재해야 합니다. 수백 개의 다른 표준 스위프트 타입뿐만 아니라 String, Int, UUID 타입을 포함한 Hashable 프로토콜을 따르는 모든 스위프트 타입이나 커스텀 타입이 id 프로퍼티가 될 수 있는데, 만약 UUID를 사용하기로 했다면 UUID 메서드는 각 항목마다 고유한 ID를 자동으로 생성하는데 사용될 수 있습니다.

 

내용이 좀 어려워 보일 수 있는데 조금 더 쉽게 말하자면!

Identifiable 프로토콜이라는 규칙을 따르는 객체는 각각 고유한 식별자(id)를 가져야 합니다!

이 식별자(id)는 목록의 각 항목을 서로 구별하는 데 사용됩니다. 예를 들어, 목록에 여러 사람이 있으면, 각 사람은 고유한 식별자를 가지고 있어야 합니다. 이렇게 하면 SwiftUI가 어떤 사람이 어떤 사람인지 정확히 알 수 있습니다.

이 고유 식별자로 사용될 수 있는 것은 여러 가지가 있습니다. 예를 들어, 각 사람의 이름이나 번호가 될 수 있습니다. 하지만, 이름이나 번호는 중복될 수 있기 때문에, 더 안전한 방법 중 하나인 UUID를 사용한다는 거죠!!

 

UUID는 전 세계적으로 고유한 식별자를 생성해주므로, 각 목록 항목마다 완전히 다른 식별자를 가질 수 있게 해줍니다.

이 내용도 더 간단하게 설명하자면, SwiftUI에서 목록을 만들 때, 각 항목을 구별할 수 있는 고유한 '이름표'가 필요합니다. 이 '이름표'로는 여러 종류가 있을 수 있지만, UUID를 사용하면 각 항목마다 완전히 다른 고유한 '이름표'를 자동으로 만들어 줍니다. 이렇게 하면, SwiftUI가 각 항목을 정확히 구별할 수 있게 됩니다.

 

자, 이제 이해가 좀 되셨나요?

 

자 그럼 간단한 예제와 함께 살펴보겠습니다.

 

SwiftUI 동적 List 예제

To do list 예제를 가지고 살펴볼게요!

우선 간단한 구조체를 먼저 구현하겠습니다. 구조체 이름은 ToDoItem으로 하고 id는 UUID() 메소드로 자동으로 생성해볼게요!

struct ToDoItem : Identifiable {
    var id = UUID()
    var task : String
    var imageName : String
}

 

자 이렇게 구조체를 구현해주었습니다. 이제 ToDoItem 객체들의 배열을 사용해서 리스트에 데이터가 제공되는 것을 구현해보겠습니다.

struct ContentView: View {
 
    @State var listData: [ToDoItem] = [
        ToDoItem(task: "SwiftUI 공부하기", imageName: "pencil.and.scribble"),
        ToDoItem(task: "운동하기", imageName: "figure.strengthtraining.traditional"),
        ToDoItem(task: "프로젝트 완성하기", imageName: "laptopcomputer")
    ]
    
    var body: some View {
        
        List(listData) { item in
            HStack {
                Image(systemName: item.imageName)
                Text(item.task)
            }
        }
    }
}

 

자! 이렇게 소스를 만들어 보았습니다. 여기서 저번 포스팅하고의 차이점이 하나 존재합니다. 바로 지금 만든 리스트에는 각 셀에 대한 뷰가 없다는 점입니다. 하지만 그 대신에 데이터 배열에 대한 반복문을 실행하면서 동일하게 선언된 HStack 선언부를 재사용하고 각 배열 항목에서의 적절한 데이터를 연결해주어야 합니다. 

 

리스트에서 변화하는 데이터와 정적 데이터를 동시에 보여주고 싶을 때, 리스트의 body 안에서 ForEach 문을 사용하여 변화하는 데이터를 순회하면서 정적 항목들을 선언할 수 있습니다.

 

만약 위 설명처럼 소스코드를 구성한다면 아래처럼 코드를 작성할 수 있습니다.

그리고 SwiftUI에서 List 구현체는 Section 뷰를 이용해서 헤더와 푸터가 있는 섹션으로 나눌 수도 있는데 저는 조금 더 깔끔하게 구성하기 위해서 SETTING과 TO DO TASKS 이렇게 2개의 섹션으로 구성을 해보았습니다!

 

그리고 이러한 리스트의 항목을 만들다보면 앱마다 조금씩 다르겠지만 터치를 하면 앱의 다른 화면으로 이동해야 하는 경우가 종종 생깁니다. 예를 들면 아이폰에서 설정앱에서 Wi-Fi 셀을 터치하면 와이파이를 설정할 수 있는 화면으로 이동하는 것처럼 말이죠!

이런 동작들은 NavigaionStack 또는 NavigaionLink를 사용해서 구현하면 되는데 이 내용은 다음에 기회가 된다면 포스팅을 해보도록 하겠습니다!

 

감사합니다!

 

잘못된 내용이 있거나 더 좋은 내용 피드백은 언제나 환영합니다!

궁금하신 부분은 댓글로 질문 부탁드립니다!