[swift] Swift DeepDiff를 사용하여 UI 변경 사항을 관리하는 디자인 패턴 구현하기

29 Nov 2023

swift

UI 요소의 변경 사항을 관리하는 것은 모바일 애플리케이션 개발에서 중요한 부분입니다. 이를 위해 Swift DeepDiff 라이브러리를 사용하여 UI 변경 사항을 효과적으로 관리하는 디자인 패턴을 구현해 보겠습니다.

DeepDiff란?

DeepDiff는 Swift에서 사용할 수 있는 가볍고 강력한 라이브러리로, 컬렉션(배열, 집합 등) 내 요소들의 변경사항을 찾아내고 보고해줍니다. 이를 통해 이전 상태와 현재 상태를 비교하여 변경된 UI 요소를 감지하고 업데이트할 수 있습니다.

디자인 패턴 구현하기

DeepDiff 라이브러리 설치

DeepDiff를 사용하기 위해 먼저 프로젝트에 이를 설치해야 합니다. Cocoapods를 사용하신다면 Podfile에 다음과 같이 추가해 주세요.

pod 'DeepDiff'

DeepDiff 관련 코드 작성

UI 변경 사항을 관리하기 위해 다음과 같은 구조체를 선언합니다.

import DeepDiff

struct UIState {
    var items: [Item]
    
    struct Item: Hashable {
        let id: Int
        var title: String
        var subTitle: String
    }
}

extension UIState.Item: DiffAware {
    var diffId: Int {
        return id
    }
    
    static func compareContent(_ a: UIState.Item, _ b: UIState.Item) -> Bool {
        return a.title == b.title && a.subTitle == b.subTitle
    }
}

UI 업데이트 로직 작성

UI 업데이트를 처리하는 로직을 작성합니다. 예를 들어, UITableView를 사용한다면 다음과 같이 업데이트하는 메서드를 작성할 수 있습니다.

class ViewController: UIViewController {
    private var state: UIState = UIState(items: []) {
        didSet {
            DispatchQueue.main.async {
                let changes = diff(old: oldValue.items, new: self.state.items)
                // 변경사항에 따라 UI 업데이트 처리
                
                // UITableView 예제
                tableView.reload(changes: changes, updateData: {
                    self.tableViewData = self.state.items
                })
            }
        }
    }
    
    private var tableViewData: [UIState.Item] = []
    
    @IBOutlet weak var tableView: UITableView!
    
    ...
}

위 코드에서 state 프로퍼티가 변경되면 oldValue와 비교하여 변경 사항을 찾고, 이를 changes에 저장합니다. 변경 사항에 따라 UI를 업데이트하기 위해 tableView.reload(changes:updateData:) 메서드를 사용합니다. tableViewData 배열은 업데이트된 상태의 데이터를 저장하는데 사용됩니다.

UI 업데이트

state 프로퍼티를 업데이트하여 UI를 변경합니다. 예를 들어, 새로운 아이템을 추가하거나 기존 아이템의 속성을 변경한다면 다음과 같이 할 수 있습니다.

let newItem = UIState.Item(id: 1, title: "새로운 아이템", subTitle: "설명")
state.items.append(newItem)

이제 state 프로퍼티가 변경되면 DeepDiff를 사용하여 변경 사항을 감지하고 UI를 업데이트할 수 있습니다.

결론

Swift DeepDiff를 사용하여 UI 변경 사항을 효과적으로 관리하는 디자인 패턴을 구현해 보았습니다. 이를 통해 UI 업데이트를 보다 간편하고 효율적으로 처리할 수 있습니다. DeepDiff 라이브러리의 강력한 기능을 활용하여 애플리케이션의 사용자 경험을 향상시킬 수 있습니다.

참고 자료

DeepDiff 라이브러리: https://github.com/onmyway133/DeepDiff