[swift] Swift SkeletonView 데이터 모델링 방법

20 Nov 2023

swift

Swift SkeletonView는 앱에서 로딩 상태를 시각적으로 표시하는 라이브러리입니다. 이 라이브러리를 사용하여 더 나은 사용자 경험을 제공할 수 있습니다. SkeletonView를 사용하기 위해서는 데이터 모델링이 필요합니다. 이 글에서는 Swift에서 SkeletonView를 사용할 때 데이터 모델링 방법에 대해 알아보겠습니다.

1. 데이터 모델 작성하기

먼저, SkeletonView를 사용할 뷰 컴포넌트를 위한 데이터 모델을 작성해야합니다. 예를 들어, 사용자 프로필 정보를 표시하는 뷰 컴포넌트의 데이터 모델을 작성해보겠습니다.

struct UserProfile {
    var name: String
    var age: Int
    // 다른 필드들...
}

위의 예에서는 사용자 이름과 나이만 포함된 간단한 데이터 모델을 정의했습니다. 실제로는 사용자 프로필에 더 많은 정보가 포함될 수 있습니다.

2. SkeletonView 적용하기

데이터 모델을 작성한 후에는 뷰 컴포넌트에 SkeletonView를 적용해야합니다. SkeletonView는 로딩 상태에서 뷰를 보여주는 역할을 담당합니다.

import SkeletonView

class UserProfileView: UIView {
    private let nameLabel = UILabel()
    private let ageLabel = UILabel()

    // SkeletonView를 적용할 때 사용할 함수
    func showLoadingState() {
        // 이름 레이블에 SkeletonView 적용
        nameLabel.showAnimatedGradientSkeleton()
        
        // 나이 레이블에 SkeletonView 적용
        ageLabel.showAnimatedGradientSkeleton()
    }

    // 실제 데이터를 표시하는 함수
    func showData(userProfile: UserProfile) {
        // SkeletonView 비활성화
        nameLabel.hideSkeleton()
        ageLabel.hideSkeleton()

        // 실제 데이터 표시
        nameLabel.text = userProfile.name
        ageLabel.text = "\(userProfile.age)"
    }
}

위의 예제에서는 UserProfileView 클래스를 정의하여 사용자 프로필 정보를 표시하는 뷰 컴포넌트를 만듭니다. showLoadingState() 함수는 SkeletonView를 적용하여 로딩 상태를 표시하고, showData() 함수는 실제 데이터를 표시합니다.

3. 뷰 컨트롤러에서 사용하기

뷰 컨트롤러에서 위에서 정의한 UserProfileView 클래스를 사용하여 데이터를 표시해보겠습니다.

class UserProfileViewController: UIViewController {
    private let userProfileView = UserProfileView()

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 뷰 컨트롤러에 UserProfileView를 추가
        view.addSubview(userProfileView)
    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        
        // 로딩 상태 표시
        userProfileView.showLoadingState()

        // 네트워크 요청 등의 작업 수행 후에 데이터를 받아온다고 가정
        let userProfile = UserProfile(name: "John", age: 25)

        // 데이터 표시
        userProfileView.showData(userProfile: userProfile)
    }
}

뷰 컨트롤러에서는 UserProfileView 인스턴스를 생성하고, 로딩 상태를 표시한 후 실제 데이터를 받아와 showData() 함수를 호출하여 데이터를 표시합니다.

결론

Swift SkeletonView를 사용하여 앱에서 로딩 상태를 시각적으로 표시하는 방법에 대해 알아보았습니다. 데이터 모델을 작성하고, SkeletonView를 적용하여 로딩 상태를 표시하는 방법을 학습했습니다. 이렇게 구현된 SkeletonView는 앱의 사용자 경험을 향상시킬 수 있습니다. ``` 참고 자료: