[SwiftUI 3.0] URLSession 과 List, @Published, @ObservedObject 사용하기

SwiftUI 에서는 뷰에서 사용할 값을 저장하는 방식이 기존 Storyboard 방식과는 다릅니다.

오늘은 뷰 밖의 클래스에서 사용가능한 

프로퍼티워레퍼 인 @ObservedObject를 소개하고

아주 간단한 튜토리얼로

사용법을 정리하려고 합니다

---

@ObservedObject를 알기 전에 ObservableObject에 대해서 알아볼게요

ObservableObject는 Combine에 속한 프로토콜입니다

해당 포스팅에서 Combine을 다루지 않지만 RxSwift의 기능이라고 생각하시면 되요

 

@ObservedObject를 사용하기 위해서

ObservableObject 프로토콜을 채택해 주어야 합니다.

 

@ObservedObject는 해당 프로퍼티의 값이 변경되면

@Published 프로퍼티 워레퍼가 자동으로 값의 변경을 알려주고 

업데이트가 필요한 부분의 UI를 그리게 됩니다!

 

우선 api를 통신하면 받게 되는 JSON 구조를 struct로 생성하겠습니다

BoardList.swift

struct Struct: Decodable {
    var data: [Board]?
}

struct Board: Decodable {
    var idx: String?
    var title: String?
    var register_date: String?
}

제가 사용한 api는 딕셔너리 구조에 data라는 키값으로 Board를 리스트 형태로 가지고 있어요

값이 올수도 있고 안올수도 있기 때문에 옵셔널로 설정해 주었어요

 

이 구조를 참조해서 테이블 뷰(SwiftUI에서는 List)에 들어갈 한 행을 그려보겠습니다

BoardRow.swift

import SwiftUI

struct BoardRow: View {
    var board: Board
    
    var body: some View {
        VStack {
            Text(board.title ?? "title is null")
                .foregroundColor(.blue)
                .lineLimit(nil)
            
            Spacer()
            
            Text(board.register_date ?? "(등록일 없음)")
                .foregroundColor(.green)
                .lineLimit(nil)
        }
    }
}

아직 UI를 그리는 것이 익숙하지 않아 엉망이지만

List에 보여지기에 충분합니다

만약에 swift 파일을 생성하고 canvas에서 뷰가 보여지고 싶다면 아래와 같이 

PreviewProvider를 작성해 주시면 됩니다.

struct BoardRow_Previews: PreviewProvider {
    static var previews: some View {
        BoardRow(board: Board(idx: nil, title: nil, register_date: nil))
    }
}

 

이제 URLSession을 이용해서 api 통신을 하도록 하겠습니다

NetworkManager.swift

import SwiftUI

// 1
class NetworkManager: ObservableObject {

	// 2
    @Published var boardList = [Board]()
    
    init() {
        guard let url = URL(string: "api 주소 ") else {
            return
        }
        
        URLSession.shared.dataTask(with: url) { data, _, _ in
            guard let data = data else {
                return
            }
            
            do {
            	// 3
                let result = try JSONDecoder().decode(Struct.self, from: data)
                // 4
                DispatchQueue.main.async {
                    self.boardList = result.data ?? [Board]()
                }
            } catch {
                print("\(error.localizedDescription)\n\(error)")
            }
            
           
        }.resume()
    }
}

2번에서 @Published 프로퍼티 워레퍼를 사용하기 위해 

1번에서 ObservableObject 프로토콜을 채택해 줍니다

@Published 프로퍼티 워레퍼를 이용해서 다른 뷰에서 이 프로퍼티를 사용하고

값이 변경되는 것을 알려줄 수 있어요

3 에서 이전에 JSON 구조를 sturct로 변경하고 

4 에서 통신 성공한 데이터를 @Published 프로퍼티 워레퍼로 지정되어 있는

boardList 프로퍼티에 담아줍니다

 

import SwiftUI

struct ContentView: View {
	// 1
    @ObservedObject var networkManager = NetworkManager()
    
    var body: some View {
        NavigationView {
        	// 2
            List(networkManager.boardList, id: \.title) { board in
                Group {
                	// 3
                    BoardRow(board: board)
                }
                
            }
        }
    }
}

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

1에서 보시면 ObservableObject를 채택한 NetworkManager 인스턴스가

@ObservedObject 프로퍼티 워레퍼로 지정되어 있는 것을 알수 있어요

이전에 NetworkManager 의 생성자에서  URLSession 을 이용해서 api 통신을 수행하고

성공적으로  JSON 이 struct로 변경되어 boardList의 값을 변경하면 

ContentView에서 값이 변경된 것을 알 수 있습니다

2에서 networkManager의 boardList로 List를 그려주고

셀은 이전에 만들어 두엇던 BoardRow로 지정해 줍니다

부끄러운 UI이지만 결과를 첨부해 봅니다..

이전에 익숙하던 스토리보드와는 달리 api 통신이 성공하면

어떻게 화면에 업데이트를 알리고 그려야 할지 감이 안오더라구요

그럴땐 @Published와 @ObservedObject를 사용해보세요

 

저도 배우는 단계이니 틀리거나 추가되어야 할 부분이 있다면 댓글로 알려주시면 감사하겠습니다