[SwiftUI] SwiftUI에서 리스트(테이블 뷰) 만들기

안녕하세요, HoonIOS입니다. 

이번 포스팅에는 UIKit에서 UITableVIew로 사용되는 List에 대해 사용법 및 설명에 대해 포스팅을 하려고 합니다.

 

 리스트란?(List)

List란 하나 이상의 행 및 뷰를 수직 방향의 목록 데이터로 여러 개의 행이 표현되는 UI를 구성해 여러 개의 데이터를 쉽게 나열할 수 있도록 구성된 뷰입니다.

 

UIKit의 UITableView와 다른점은 UITableView에서는 하나의 행을 셀이라고 표현을 한 반면 SwiftUI에서는 로우라고 표현합니다.

 

SwiftUI인 새로운 프레임워크를 통해 리스트를 만들면 그만큼 장점도 있을 겁니다.

장점으론 사용하기 편하다. 귀찮은 것들이 없어졌다입니다.

 

UITableView를 사용하려면 UITableViewDataSource, UITableViewDelegate를 구현하는 작업을 해야 했는데 List는 해당 작업 내용들을 사용하지 않고도 만들 수 있게 되었습니다.

 

 리스트 구현

간단하게 Text가 있는 List를 구현해보겠습니다.

 

var body: some View {
    List {
        Text("첫번째")
        Text("두번째")
        Text("세번째")
        Text("네번째")
        Text("다섯번째")
    }
}

• List로 만든 결과물을 확인해보면 테이블 뷰와 같은 모습으로 표현되는 것을 확인할 수 있습니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 정적 콘텐츠

List는 하나의 로우에 원하는 뷰를 담아서 전달을 합니다.

 

즉 하나의 로우에 Text만 넣을 수 있는 것이 아니라 텍스트, 이미지, 모양 등 다양한 뷰들을 동시에 넣어서 표현을 할 수 있습니다.

var body: some View {
    List {
        Text("첫번째")
        Image(systemName: "trash")
        Rectangle().frame(width: 100, height: 100)
        Text("두번째")
        Color(.red).frame(width: 50, height: 50)
    }
}

• 위 예시처럼 만약 각 로우에 텍스트, 이미지, 모양을 지정해줘서 넣어주면 왼쪽과 같이 정적으로 미리 저장된 것을 그대로 표현할 수 있습니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 동적 콘텐츠

당연하게 SwiftUI에서는 동적 콘텐츠를 통해 LIst를 만들어 줄 수 있습니다.

크게 서버에 있는 데이터를 받아서 가공하고 처리를 하는 방식을 사용하거나 데이터가 추가, 삭제가 될 수 있을 때 동적 콘텐츠 LIst를 많이 사용을 하게 됩니다.

 

동적 콘텐츠를 사용하는 방법은 크게 세 가지가 있습니다.

1. Range <Int>
2. RandomAccessCollection
3. identifiable 프로토콜

 

Range <Int>

이 방식은 타입의 값을 넘겨주는 방식입니다 예를 들어 50개의 로우를 만들어 각 0부터 49까지 List를 만드는 코드를 살펴보겠습니다.

 

var body: some View {
    List(0..<50) {
        Text("\($0)")
    }
}

• 위 코드에서 봤듯이 0부터 49까지 찍히는 것을 확인할 수 있습니다.
• 여기서 Range <Int>에 범위 연산자를 사용하실 때는A.. <B만 사용 가능하며 A... B, A...,... A Range 타입을 사용하면 오류가 발생하니 이 부분은 주의해주셔야 합니다!!!!!!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

RandomAccessCollection

이 방법은 RandomAccessCollection 프로토콜을 준수하는 데이터를 제공하는 것입니다.

이렇게 말씀드리면 그게 무슨 말이야 라고 말을 할 것입니다.

 

우선 차근차근 설명을 하겠습니다.

 

RandomAccessCollection 프로토콜이란?

- 효율적인 랜덤 접근을 지원하는 컬랙션이라고 합니다.

- 좀 더 쉽게 말해 O(1)의 시간 복잡도 안에 인덱스 사이의 거리를 측정할 수 있다고 생각하고 넘어가면 편합니다.

 

데이터 구분을 식별할 수 있도록 하기 위해 아래 2가지 방법 중 하나를 택해서 id값을 제공해야 합니다.

1. id 식별자 지정
   - id로 사용할 값을 직접 인수로 제공하는 것으로, 각 로우 데이터마다 고유한 UUID를 생성해줘 고유 식별을 가능하게 하는 것입니다.
   - id 매개 변수에는 Hashable 프로토콜을 준수하는 프로퍼티를 지정할 수 있고 그 데이터 타입 자체가 Hashable 프로토콜을 준수하고 있다면 self라고 입력을 할수 있습니다.
   (이 경우는 Swift에서 대부분의 타입들은 Hashable 프로토콜을 준수하고 있어 프로포티를 지정하기보다는 self로 자신을 명시합니다.
2.   identifiable 프로토콜 
   - 이 방법은 Test의 데이터 구조체에 identifiable 프로토콜을 채택해서 List를 만들 때 id에 매개변수 id를 전달하지 않고 Test 구조체 자체에 UUID를 담을 id 프로퍼티를 만들고 이것을 식별자로 식별할 수 있도록 하는 역할입니다.

/** id 식별자 지정 **/
struct Test{ }

List ([Test(index: "0"), Test(index: "1"),Test(index: "2"), id: \.self) {...} 
-> 오류 발생 

List ([Test(index: "0"), Test(index: "1"),Test(index: "2"), id: \.name) {...} 
extension User: Hashable{}

-> 해결 방안 
1. 식별을 위한 프로토콜 지정
2. Hashable 프로토콜 채택

/** identifiable 프로토콜 **/
Struct Test: Identifiable {
	let id = UUID()
    ...
}

List([Test(index: "0"), Test(index: "1")]) { ... }

1. Test 구조체에 Identifiable 프로토콜을 채택했고 안에 변수 자체에 UUID를 식별자로 삼아줬으므로 따로 id를 설정할 필요가 없습니다.

 

이렇게 정적, 동적 리스트까지 살펴보았습니다.

정적 동적 조합해서 사용하는 방법 등, 더 많은 내용들은 다음 포스팅에 살펴보겠습니다.