위의 동영상처럼 상세화면에서 하트 인터렉션이 발생했을 때, 리스트 화면에서도 하트 정보가 업데이트 되어야하는 상황으로 예시를 들어볼게요!

Reference 타입과 Value 타입에 따라 다른 reload 방법

무슨 말이냐 하면, 참조 타입의 경우엔 스냅샷의 reloadItems(_:) 를 활용하여 지정된 항목을 다시 로드할 수 있지만, 값 유형의 경우엔 reloadItems(_:) 는 작동하지 않으므로 스냅샷 내에서 업데이트 된 항목을 수동으로 교체해야 한다는 것입니다.

바로 코드로 볼게요!

Reference Type

1. Diffable 데이터 소스 생성: ItemIdentifier 타입에 객체를 넣어줍니다.

var dataSource: UICollectionViewDiffableDataSource<CommunityCategoryType, StoryNew>!

2. 셀 리로딩

// 1. IndexPath로 해당 item 찾기
guard let communityStories = dataSource.itemIdentifier(for: indexPath) else { return }

// 2. 기존 객체를 새로운 객체로 업데이트
communityStories = newStory

// 3. 수정을 위한 새로운 snapshot 생성
var newSnapshot = dataSource.snapshot()

// 4. reload
newSnapshot.reloadItems([communityStories])

// 5. apply changes
dataSource.apply(newSnapshot)

Value Type

처음에 언급했듯이, 값 타입의 아이템은 reloadItems(_:) 에서 작동하지 않습니다.

저도 프로젝트 진행하면서 위의 방법으로는 업데이트가 안되는 거에요.. 왜일까 생각해보니 대부분의 모델이 값 타입인 Struct로 구현이 되어있는데 참조 타입 방식으로 업데이트 하려하니 안되는 거였어요!

간단히 말하면, StoryNew가 value type이라면, communityStories는 StoryNew의 새 인스턴스가 될거고, 스냅샷 내에서 communityStories로 객체를 가리키지 않을거죠? 따라서 newSnapshot에서 communityStories를 다시 로드하려고 하면 “Invalid item identifier specified for reload“라는 이유로 NSInternalInconsistencyException 예외가 발생할거에요.

그래서 찾은 해경방법은! 스냅샷 내에서 기존의 객체를 새 객체로 교체하면 가능합니다!

1. Diffable 데이터 소스 생성: ItemIdentifier 타입에 String 을 넣어줍니다.

var dataSource: UICollectionViewDiffableDataSource<CommunityCategoryType, StoryNew>!

2. 셀 리로딩

// 1. IndexPath로 해당 item 찾기
guard let communityStories = dataSource.itemIdentifier(for: indexPath) else { return }

// 2. 새로운 스토리 카피를 생성 & 업데이트 
var updatedStories = communityStories
updateStories = newStory 
// updateStories.heartButton.isSelected = true 이런식으로 바꿔도 상관없음.

// 3. 수정을 위한 새로운 snapshot 생성
var newSnapshot = dataSource.snapshot()

// 4. 업데이트 된 객체로 replace
newSnapshot.insertItems([updateStories], beforeItem: communityStories)
newSnapshot.deleteItems([communityStories])

newSnapshot.reloadItems([communityStories])

// 5. apply changes
dataSource.apply(newSnapshot)

결과물:

근데 보면 음.. insert / delete로 업데이트를 해주다 보니 뒤로 가면 스크롤 위치가 계속 바뀌더라구요!

이러한 불편함을 없애기 위해 찾아낸 방법도 공유해볼게요!

<해결 방법>

모델의 identifier를 Diffable Data Source의 Item Identifier로 활용하기!

1. 첫 번째로 해야 할 일은 우리의 StoryNew 구조체에 고유한 식별자를 추가하는 것입니다. 이 식별자를 저는 identifier로 지정하고 UUID()를 이 식별자로 사용할게요!

struct StoryNew: Codable, Hashable {
    var identifier = UUID()

    func hash(into hasher: inout Hasher) {
        hasher.combine(identifier)
    }

    static func == (lhs: StoryNew, rhs: StoryNew) -> Bool {
        return lhs.identifier == rhs.identifier
    }
}

2. 그리고 datasource의 item identifier 타입에 StoryNew가 아닌 UUID 으로 바꿔줍니다.

var dataSource: UICollectionViewDiffableDataSource<Section, UUID>!

3. UUID와 해당 StoryNew 객체를 갖고있는 dictionary도 하나 생성해줄게요. 이렇게 함으로써 stories 배열을 루프로 반복하지 않고도 identifier를 사용해 StoryNew 객체를 쉽게 가져올 수 있습니다.

var storyDic = [UUID: StoryNew]()

4. 그럼 이제 dictionary에 값을 넣어줘야겠죠. [StoryNew] 를 [(UUID, StoryNew)]로 변환한 후, Dictionary(uniqueKeysWithValues:) 를 사용해서 [UUID : StoryNew]로 변환해볼게요.

// convert `[StoryNew]` -> `[(UUID, StoryNew)]`
let tupleArray = stories.map { ($0.identifier, $0) }

// convert `[(UUID, StoryNew)]` -> `[UUID : StoryNew]`
self.storyDic = Dictionary(uniqueKeysWithValues: tupleArray)

5. storyDictionary가 준비되면 이제 셀 register로 넘어가볼게요. CellRegistration Item 타입에 UUID로 변경해야합니다. 기존과는 달리 모델 객체가 아닌 UUID를 제공하기 때문에 cell registration handler도 살짝 변경이 필요하겠죠!

let cellRegistration = UICollectionView.CellRegistration<CommunityCollectionViewCell, UUID> { (cell, indexPath, uuid) in
    // `uuid`를 사용하여 Story 가져오기
    if let story = self.viewModel.storyDic[uuid] {
        cell.setData(story: story)
    }
}

Cell Registration 핸들러 내에서 주목해야 할 점은 storyDic을 사용하여 해당 스토리 객체를 가져오는 방법입니다.

6. 마지막은 data source snapshot을 어떻게 채워 업데이트할지 입니다. 이제 스냅샷에 모델 객체를 추가하는 대신 모델 객체 identifier를 스냅샷에 추가해야 합니다.

// <Section, UUID>
var dataSource: UICollectionViewDiffableDataSource<CommunityCategoryType, UUID>!

// 스냅샷 items로 모든 `identifier` 추가
snapshot.appendItems(stories.map { $0.identifier }, toSection: categoryType)

dataSource.apply(snapshot, animatingDifferences: true)

이렇게 하면 모델 객체의 식별자를 data source item 식별자로 사용하도록 성공적으로 변환 성공!

자 그러면 이제 제일 중요한 셀 업데이트는 어떻게 할까?

기존과의 차이점은 data source가 모델 객체 대신 identifier를 제공한다는 것입니다. 따라서 우리는 storyDic을 사용하여 story를 가져와 그에 따라 업데이트를 해야합니다.

func updateItem(selectedId: UUID) {
    var updated = storyDic[selectedId]!

    // story 하트 업데이트하고 그에 따라 `storyDic` 업데이트
    if let isLiked {
        updated.isMyEmpathized = isLiked
        updated.nEmpathies = likeCount ?? (updated.nEmpathies ?? 0) + (isLiked ? 1 : -1)
        storyDic[selectedId] = updated
    }

    // 수정을 위해 데이터 소스 스냅샷의 새 복사본 생성
    var newSnapshot = dataSource.snapshot()

    if #available(iOS 15, *) {
        // iOS 15
        // `newSnapshot`에서 업데이트해야 하는 항목의 데이터 지정하기 (`StoryNew.identifier`를 사용)
        newSnapshot.reconfigureItems([selectedId])
    } else {
        // iOS 14
        newSnapshot.reloadItems([selectedId])
    }

    // data source에 `newSnapshot` 적용하여 변경 사항이 컬렉션 뷰에 반영되도록 함
    dataSource.apply(newSnapshot)
}

끝이에요!

이렇게 data source item identifier에 모델 객체 대신 고유 식별자 (identifier)를 저장하니 reference / value 타입에서 전부 다 작동되는 것을 확인했습니다!

결과물:

스크롤 위치가 변경되지 않고 그대로 유지되고 셀 업데이트도 정상적으로 작동 되는게 보이죠~?

여담으로 iOS 15 이상부터 사용 가능한 reconfigureItems(_:) 가 왜 reloadItems(_:) 보다 훨씬 성능이 좋을까요??

그 이유는 reconfigureItems" 는 변경된 항목만 업데이트하고 새로 그리는 대신, 필요한 변경 사항에만 중점을 둡니다. 반면 reloadItems는 셀을 완전히 다시 그리기 때문에 더 많은 작업을 수행해야 합니다.

결국 reconfigureItems 는 더 작은 범위의 변경 사항을 처리하고 셀 렌더링을 최적화하는 데 중점을 두어 더 빠른 결과를 제공하는 거네요! (iOS 15 이상부터는 reconfigreItems를 사용하자~~😃)

아래 WWDC 영상에서 Diffable DataSource 관련한 더 많은 개선점들이 나와있으니 보시는 걸 추천드릴게요!

https://developer.apple.com/videos/play/wwdc2021/10252/ https://developer.apple.com/documentation/uikit/uiimage/building_high-performance_lists_and_collection_views (Sample Code)

1. Package Dependencies에서 Composable Architecture 추가해주기.

2. ContentView 레이아웃 구성

struct SectionContentView: View {
    var body: some View {
        // 숫자 텍스트가 가운데에 오게 하고싶어 ZStack 사용
        ZStack {
            Form {
                Section {
                    Button("Increment") {
                        // To Do
                    }

                    Button("Decrement") {
                        // To Do
                    }
                }

                Section {
                    Button("Get Fact") {
                        // To Do
                    }
                }

                Section {
                    Button("Timer On") {
                        // To Do
                    }
                }
            }

            // 이 숫자는 "Increment/Decrement" 버튼을 눌렀을 때 값 변경
            Text("0")
                .bold()
                .font(.system(size: 50))
        }
    }
}

3. Composable Architecture 적용

Feature 는 스유의 ViewModel 이라고 생각하면 편할 듯. Reducer 프로토콜을 준수해야 하는데 기능의 State(상태변화), Action, Logic, 동작을 캡슐화한다.

일반적인 흐름:

• 사용자가 UI와 상호작용하여 액션이 생성.
• 액션이 Reducer로 전송됨.
• Reducer는 현재 상태와 Action을 받아 새로운 상태를 생성.
• 새로운 상태는 body를 업데이트 해 UI를 다시 렌더링.

import ComposableArchitecture

struct SectionContentFeature: Reducer {
    struct State: Equatable {
        // 뷰에서 필요한 상태값들을 정의
        var count: Int = 0
        var fact: String? = nil
        var isTimerOn: Bool = false
    }

    // 유저가 UI와 상호작용하는 동작들 정의
    // Side Effect를 반환하는 case도 넣을 수 있음 (밑에서 설명 예정)
    // TCA는 명확함과 간결성을 위해 액션의 이름을 logic-based가 아닌 사용자 인터렉션에 따라 지정하는 것을 선호한다고 강조. 
    // (incrementCounts X -> incrementButtonTapped O)
    enum Action {
        case incrementButtonTapped
        case decrementButtonTapped
        case getFactButtonTapped
        case timerButtonTapped
    }

    var body: some ReducerOf<Self> {
        // 여러개의 reducer를 가질 수 있음.
        // inout 파라미터로 현재 state를 캡처
        // 리턴값은 Effect
        Reduce { state, action in
            switch action {
            case .incrementButtonTapped:
                return .none
            case .decrementButtonTapped:
                return .none
            case .getFactButtonTapped:
                return .none
            case .timerButtonTapped:
                return .none
            }
        }
    }
}

4. Store / WithViewStore 생성 및 바인딩

뷰는 Store 에 바인딩해서 현재 상태에 접근한다. 이 상태가 변경되면 UI는 자동으로 새로운 상태를 반영하여 업데이트 됨.

Store 가 생성되면 액션을 디스패치할 수 있고, Reducer 와의 통신을 처리하면서 상태를 업데이트함.

WithViewStore 를 사용하면 코드 가독성을 더 높힐 수 있음.

• 스토어에서 현재 상태 추출 -> 뷰에서 상태 데이터를 직접 접근하고 사용할 수 있음.
• 액션 바인딩 -> 특정 이벤트 (버튼 클릭 등)가 발생했을 때, store에서 직접 액션을 호출할 수 있음.

observe 도 중요함. $0 은 전체를 reload 한다는 의미인데 뷰가 커지면 커질수록 양이 많아지면서 버거워짐. $0 대신 observe: \.{state에 있는 프로퍼티 명} 을 넣어주면 전체가 아닌 해당 값만 변경 됨. (나중에 정리 예정)

struct SectionContentView: View {
    let store: StoreOf<SectionContentFeature>

    var body: some View {
        WithViewStore(store, observe: { $0 }) { viewStore in
            ZStack {
                Form {
                    Section {
                        Button("Increment") {
                            viewStore.send(.incrementButtonTapped)
                        }

                        Button("Decrement") {
                            viewStore.send(.decrementButtonTapped)
                        }
                    }

                    ...(생략)
                }

                Text("\(viewStore.count)")
                    .bold()
                    .font(.system(size: 50))
            }            
        }
    }
}

var body: some ReducerOf<Self> {
    Reduce { state, action in
        switch action {
        case .incrementButtonTapped:
            state.count += 1
            return .none
        case .decrementButtonTapped:
            state.count -= 1
            return .none

        ...(생략)
    }
}

5. Effect 반환

Effect 는 네트워크 요청 등과 같은 비동기적 (async) 혹은 부작용을 가진 작업을 나타내는데 사용된다. 가장 많이 쓰이는 이펙트는 run 이다.

먼저 뷰 UI 구성을 조금 바꿔보자. HStack Button에 타이틀과 api에서 받아온 String을 넣어주도록 바꿈.

struct SectionContentView: View {
    var body: some View {
        WithViewStore(store, observe: { $0 }) { viewStore in
            Section {
                Button {
                    viewStore.send(.getFactButtonTapped)
                } label: {
                    HStack {
                        Text("GetFact")
                        Spacer()
                        if let fact = viewStore.fact {
                            Text(fact)
                        }
                    }
                }
            }
            ... (생략)

1. inout 파라미터 state는 비동기 코드에서 바꿀 수 없으므로 캡처리스트 를 생성해줘야 함.
2. 구조체 비동기에서는 값 변경이 안되기 때문에 값을 전달해줄 factResponse 액션을 추가해줌.

struct SectionContentFeature: Reducer {    
    enum Action {
        case incrementButtonTapped
        case decrementButtonTapped
        case getFactButtonTapped
        case factResponse(String) // response를 받기위한 액션 추가
        case timerButtonTapped
    }

    var body: some ReducerOf<Self> {
        Reduce { state, action in
            switch action {

            ... (생략)

            case .getFactButtonTapped:
                return .run { [count = state.count] send in  // 캡처
                    let (data, _) = try await URLSession.shared.data(from: URL(string: "http://www.numbersapi.com/\(count)")!)

                    let fact = String(data: data, encoding: .utf8) ?? ""
                    await send(.factResponse(fact))
                }

            case .factResponse(let fact):
                state.fact = fact
                return .none
            }
        }
    }
}

6. Cancellable

state의 isTimerOn 값에 따라 타이머를 재생시킬지 종료시킬지 구분.

struct SectionContentView: View {
    var body: some View {
        WithViewStore(store, observe: { $0 }) { viewStore in

            ... (생략)

                    Section {
                        Button("Timer \(viewStore.isTimerOn ? "Off" : "On")") {
                            viewStore.send(.timerButtonTapped)
                        }
                    }
                }
            }            
        }
    }
}

Effect를 캔슬 시키기 위해선 hashable한 identifier가 필요함. Typo나 실수를 방지하기 위해 private enum 타입으로 만들 수 있다.

struct SectionContentFeature: Reducer {    
    enum Action {
        case incrementButtonTapped
        case decrementButtonTapped
        case getFactButtonTapped
        case factResponse(String)
        case timerButtonTapped
        case timerCounts // 타이머 카운트 올라가는 값 전달
    }

    // 캔슬 identifiers
    private enum CancelIdentifiers: CaseIterable {
        case cancelTimer
        ...
    }

    var body: some ReducerOf<Self> {
        Reduce { state, action in
            switch action {

            ... (생략)

            case .timerButtonTapped:
                state.isTimerOn.toggle()

                if state.isTimerOn {
                    return .run { send in
                        while true {
                            try await Task.sleep(for: .seconds(1))
                            await send(.timerCounts) // 비동기에서 값 변경 X
                        }
                    }
                    .cancellable(id: CancelIdentifiers.cancelTimer)
                } else {
                    // cancel effect로 캔슬 가능
                    return .cancel(id: CancelIdentifiers.cancelTimer)
                }

            case .timerCounts:
                state.count += 1
                return .none
            }
        }
    }
}

7. 완성

UserDefaults.standard.object(forKey: key.rawValue)
UserDefaults.standard.set(object, forKey: key.rawValue)

Swift 5.1에서 property wrapper가 새로 도입되면서 이렇게 반복되는 로직들을 프로퍼티 자체에 연결할 수 있게 되었습니다. 이번 포스팅에서는 @propertyWrapper 속성을 사용하여 UserDefaults 작업을 간소화하는 방법을 살펴보겠습니다. 이를 통해 코드를 더 깔끔하고 효율적으로 유지 관리하기 쉽게 만들 수 있습니다.

UserDefaults 이해하기:

유저 디폴트는 키-값 저장소로 가벼운 정보와 같은 작은 양의 데이터를 저장하는 데 사용됩니다. 사용이 간편하고 빠른 설정 때문에 종종 간단한 데이터 저장에 사용됩니다.

// UserDefaults에 값 저장
UserDefaults.standard.set(true, forKey: "isDarkModeEnabled")

// UserDefaults에서 값 꺼내기
let isDarkModeEnabled = UserDefaults.standard.bool(forKey: "isDarkModeEnabled")

@propertyWrapper 소개:

@propertyWrapper는 저장에 대한 사용자 정의 동작을 정의할 수 있게 해줍니다. 이 속성은 코드의 가독성과 유지 관리성을 크게 향상시킬 수 있습니다.

@propertyWrapper를 사용하면 데이터를 UserDefaults에 저장하고 검색하는 과정을 간소화(캡슐화)하여 보일러플레이트 코드와 오류 발생 가능성을 줄일 수 있습니다.

😃 정의

1. 먼저 'UserDefault'라는 구조체에 @propertyWrapper를 정의. 저는 Codable 유형과 함께 사용해야했기 때문에 타입 인자는 제네릭인 <T: Codable>를 사용했습니다.

2. 초기화를 위한 init 값 지정 (초기값은 각자 케이스에 맞게 설정하면 됨.)

   • 'key': 값을 유저디폴트에 저장할때 사용할 키
   • 'defaultValue': 키에 해당하는 값이 유저디폴트에 없을 경우 사용할 기본 값
   • 'needEncrypt': 암호화가 필요한지 flag 값
   • 'isCustomObject': 코더블 커스텀 object를 사용할 것인지 flag 값

3. wrappedValue 정의

• 게터 (getter) 유저디폴트에서 값을 검색하는 역할을 담당합니다. UserDefaults.standard.object(forKey:)를 사용하여 주어진 키에 저장된 오브젝트를 검색합니다. 검색된 오브젝트를 T 유형으로 변환하는데 실패하면, defaultValue를 반환합니다.

• 세터 (setter) 유저디폴트에 값을 저장하는 역할을 담당합니다. UserDefaults.standard.set(newValue, forKey:)를 사용하여 지정된 키 아래에 제공된 newValue를 저장합니다.

@propertyWrapper
struct UserDefault<T: Codable> {
    let key: UserDefaultKey
    let defaultValue: T?
    let needEncrypt: Bool
    let isCustomObject: Bool
    let storage: UserDefaults = UserDefaults.standard

    init(key: UserDefaultKey, 
         defaultValue: T? = nil, 
         needEncrypt: Bool = false, 
         isCustomObject: Bool = false) {
        self.key = key
        self.defaultValue = defaultValue
        self.needEncrypt = needEncrypt
        self.isCustomObject = isCustomObject
    }

    var wrappedValue: T? {
        // Read value from UserDefaults
        get {
            if needEncrypt {  
                // 암호화 필요할때
                return self.storage.secretObject(forKey: self.key.rawValue) as? T ?? self.defaultValue
            } else if isCustomObject {  
                // 커스텀 오브젝트일때
                guard let data = self.storage.object(forKey: key.rawValue) as? Data else { return defaultValue }
                let session = try? JSONDecoder().decode(T.self, from: data)
                return session ?? defaultValue
            } else {  
                // 기본 hashable 오브젝트일때 (String, Bool, etc)
                return self.storage.object(forKey: self.key.rawValue) as? T ?? self.defaultValue
            }
        }

        // Set value to UserDefaults
        set {
            if needEncrypt {
                self.storage.setSecretObject(newValue, forKey: self.key.rawValue)
            } else if isCustomObject {
                let data = try? JSONEncoder().encode(newValue)
                self.storage.set(data, forKey: self.key.rawValue)
            } else {
                self.storage.set(newValue, forKey: self.key.rawValue)
            }

            self.storage.synchronize()
        }
    }
}

😃 적용

위처럼 선언을 해준 후에는 다른 클래스나 구조체를 만든 후 속성을 정의하고 @UserDefault property wrapper로 주석을 달아줍니다.

class UserDefaultManager {
    @UserDefault(key: .loginId, needEncrypt: true)
    static var loginId: String?

    @UserDefault(key: .showMainOnboarding, defaultValue: true)
    static var showMainOnboarding: Bool!

    @UserDefault(key: .counselWriteTemporary, isCustomObject: true)
    static var counselWriteTemporary: WriteHolder?
}

if UserDefaultManager.showMainOnboarding {
    UserDefaultManager.showMainOnboarding = false
    let onboardingVC = OnboardingViewController(type: .main)
    onboardingVC.modalPresentationStyle = .fullScreen
    present(onboardingVC, animated: false)
}

기존과는 다르게 프로퍼티에 값을 대입하기만 하면 값을 저장할 수 있게 되었습니다. 값을 가져오는 것도 훨씬 간편해졌죠!

결론:

로직을 캡슐화해서 보일러 플레이트 코드를 줄이고 가독성을 향상시키며 앱 전체에서 일관성을 가질 수 있습니다. 기본값 뿐만이 아니라 Codable 유형을 저장해야 할 때도 훨씬 더 편리하게 사용할 수 있습니다.

1. CustomStringConvertible 프로토콜

'CustomStringConvertible' 프로토콜을 채택함으로써 enum의 각 case에 대해 사용자 정의 문자열 표현을 정의할 수 있다. 이 프로토콜을 채택함으로써, 요구에 맞게 더 자세하고 읽기 쉬운 문자열 표현을 제공할 수 있다!

• 애플 공식 예시:

enum Direction: CustomStringConvertible {
    case north, south, east, west

    var description: String {
        switch self {
        case .north: return "북쪽"
        case .south: return "남쪽"
        case .east: return "동쪽"
        case .west: return "서쪽"
        }
    }
}

let east = Direction.east
print("east: ", east) // 동쪽

위와 같은 구현을 통해 'print(direction)' 또는 'String(describing: direction)' 를 호출하면 각 case에 대해 정의한 사용자 정의 문자열 표현이 반환된다.

추가 예제:

CustomStringConvertible 은 enum 문자열 표현에 추가 정보를 포함할때 유용하다. 그래서 특정 사용 사례에 맞는 더 구체적인 출력을 만들 수 있다.

enum VehicleType: CustomStringConvertible {
    case car(name: String, year: Int)
    case bike(name: String, year: Int)
    case truck(name: String, year: Int)

    var description: String {
        switch self {
        case .car(let name, let year):
            return "자동차 - 이름: \(name), 제조 연도: \(year)"
        case .bike(let name, let year):
            return "오토바이 - 이름: \(name), 제조 연도: \(year)"
        case .truck(let name, let year):
            return "트럭 - 이름: \(name), 제조 연도: \(year)"
        }
    }
}

let vehicles: [VehicleType] = [
    .car(name: "Toyota Camry", year: 2022),
    .bike(name: "Harley Davidson", year: 2020),
    .truck(name: "Ford F-150", year: 2021)
]

for vehicle in vehicles {
    print(vehicle)
}

// Outputs:
// 자동차 - 이름: Toyota Camry, 제조 연도: 2022
// 오토바이 - 이름: Harley Davidson, 제조 연도: 2020
// 트럭 - 이름: Ford F-150, 제조 연도: 2021

2. String Raw 값 타입

enum의 case에는 raw value를 할당할 수 있고, 이때 String, Int 등의 hashable 타입을 raw value 타입으로 사용할 수 있다. 'String' 형태의 raw value를 사용하면 각 enum case는 해당 case의 raw value를 기반으로 하는 기본 문자열 표현과 연관된다.

• 예시:

enum Direction: String {
    case north = "N"
    case south = "S"
    case east = "E"
    case west = "W"
}

let east = Direction.east.rawValue
print("east: ", east)
// east:  E

이 방식을 사용하면 enum case의 raw string 값을 가져오는 것은 'direction.rawValue' 를 사용하는 것만으로 간단하다.

* 적절한 방식 선택

둘 다 enum 값이 문자열로 어떻게 표현되는지를 사용자 정의하는 데 유용한 도구이다. 요구 사항에 따라 앱의 필요에 가장 적합한 접근 방식을 선택하면 될 것 같다.

• enum case의 문자열 표현에 미세한 제어가 필요한 경우 'CustomStringConvertible' 를 사용.

🤔 추가 정보를 활용해 더 구체적인 출력이 필요할때 가독성있게 만들어 줄 수 있을 것 같다.

• enum case의 raw 값이 이미 원하는 문자열 표현과 일치하는 경우, 'String' rawValue 타입을 선택.

🤔 문자열로 쉽게 변환 가능하고 enum과 해당 string 간 간단한 매핑이 필요한 경우엔 이 접근 방식이 편리한 선택인 것 같다.

References: https://developer.apple.com/documentation/swift/customstringconvertible

• "키체인 접근" 앱 실행

• 상단 메뉴 > 키체인접근 > 인증서 지원 > "인증 기관에서 인증서 요청..." 선택

• 이메일, 이름 입력 > "디스크에 저장됨" 으로 선택 후 "계속" 누른 후 저장

• 저장된 CSR 파일

2. 애플 개발자 페이지에서 Certificates 생성 및 추가

• "+" 버튼 눌러서 새로 추가

• 원하는 certificate 선택 후 "continue"

• App ID 선택 후 "continue"

• 위에서 발급받은 CSR 파일 업로드 후 "continue"

• "Download" 눌러서 저장

3. 키체인에서 인증서 등록

• 키체인 접근 > 인증서 오른쪽 클릭 > "정보 가져오기"

• 신뢰 > 항상 신뢰로 변경

• 다시 인증서 다운받을라면 인증서, 개인키 두개 항목 전부 선택후 내보내기 해야함

이제 필요한 경우에 다운받은 .p12 사용하면 된다.

NSAttributedString을 사용하여 문자열과 이미지를 조합한 후 UILabel에 설정해야 합니다.

1. image가 들어간 attachment를 가진 NSAttributedString 생성

   extension NSAttributedString {
    static func attachAttributed(_ bounds: CGRect, attach image: UIImage?) -> NSAttributedString {
        let attachment = NSTextAttachment()
        attachment.image = image
        attachment.bounds = bounds
        return NSAttributedString(attachment: attachment)
    }
   }

   
   

2. NSMutableAttributedString로 원하는 문자열 속성 지정

   private func imageAttributedString(string: String, isFree: Bool, isSelected: Bool) -> NSAttributedString {
    let attributedString = NSMutableAttributedString(string: string, attributes: [.font: Fonts.AppleMedium.of(size: 14)])
   
    // ... (생략)
   
    attributedString.append(
        .attachAttributed(
            CGRect(x: 0,
                      y: (Fonts.AppleMedium.of(size: 14).capHeight - 20) / 2,
                   width: 50,
                   height: 20),
            attach: UIImage(named: "icFreeVod")
        )
    )
   
    return attributedString
   }

   y값에 UILabel의 height에서 이미지의 height를 뺀 값에 2를 나눈 값을 넣어줍니다.

3. UILabel에 적용

   var title = video.vodTitle ?? ""
   title.append("  ") // 타이틀이랑 뱃지 사이에 간격 주려고
   titleLabel.attributedText = imageAttributedString(
    string: title, 
    isFree: video.isPreview ?? false, 
    isSelected: isSelected
   )

Ans) Compositional layout으로 만들 수 있을 것 같은데.. 한번 만들어 보자.

문제점:

Compositional Layout에서 Section을 가로로 스크롤링 되게 만들면 될 줄 알았는데 section이 계속 vertical로 쌓였음 ㅠㅠ

구글링 서치를 계속 해보다 아래 링크에서 section을 가로로 스크롤링 하는 방법을 찾아똬..!!

https://stackoverflow.com/questions/56963187/horizontally-scrolling-multiple-sections-with-uicollectionviewcompositionallayou

코드로 봐보자~

// 1. Configure layout section
private func testLayout() -> NSCollectionLayoutSection {
    let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .fractionalHeight(1))
    let item = NSCollectionLayoutItem(layoutSize: itemSize)

    let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .estimated(145))
    let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])

    let section: NSCollectionLayoutSection = NSCollectionLayoutSection(group: group)
    section.orthogonalScrollingBehavior = .continuous

    return section
}

private func createLayout() -> UICollectionViewLayout {
    // 2. Set scroll direction for layout section
    let config = UICollectionViewCompositionalLayoutConfiguration()
    config.scrollDirection = .horizontal

    // 3. My section provider
    let sectionProvider = { [weak self] (sectionIndex: Int, environment: NSCollectionLayoutEnvironment) -> NSCollectionLayoutSection? in
        return self?.testLayout()
    }

    let layout = UICollectionViewCompositionalLayout(
        sectionProvider: sectionProvider, 
        configuration: config
    )

    return layout
}

UICollectionViewCompositionalLayoutConfiguration 에서 section layout 가로 스크롤링을 설정할 수 있다!

그러고 빌드 해보니 섹션이 horizontal로 잘 들어감!!

*** 한가지 더!

여기까지만 하면 섹션 스크롤링이 continuous하게 됨. paging 애니메이션은 어디서 넣는걸까!? . . . 그냥 컬렉션 뷰 내에서 isPagingEnabled = true 로만 설정해 주면 끝~~ 😀

private lazy var collectionView = UICollectionView(frame: .zero, collectionViewLayout: createLayout()).then {
    ...(생략)
    $0.isPagingEnabled = true
}

완성본:

문제인식

기존의 홈 화면에서는 데이터 및 뷰 업데이트 시 많은 메모리 사용과 성능 문제가 발생했습니다. 특히 뷰가 점점 늘어나면서 큰 데이터셋을 처리하고 동적인 레이아웃을 관리하는 데 어려움을 겪었습니다. 원인은 UITableView 및 UICollectionView의 nested 구조로 구성된 홈 화면의 구조 때문이라고 생각했습니다. 이유는 아래와 같습니다.

1. Nested 뷰는 매우 복잡하고 렌더링 및 이벤트 처리에 추가적인 layer를 추가하면서 성능에 영향을 줄 수 있다.
2. 각 뷰는 메모리 할당이 필요한데 nested 뷰는 더 많은 메모리를 소비한다. 따라서 뷰가 적었을 때는 괜찮았지만 현재 시점에서는 불필요한 메모리 낭비가 발생할 우려가 있다.
3. 레이아웃 크기 조정하는 부분에서도 많이 까다롭고 업데이트 하는 시점이 불확실해 디버그와 수정에 시간을 많이 투자해야한다.

솔루션 도입

Compositonal Layout

iOS 13 이후 도입된 시스템으로, 복잡한 레이아웃을 구성하고 관리하기 쉽게 펼칩니다. 하나의 컬렉션 뷰로 다양한 레이아웃을 구성할 수 있고 빠른 속도의 장점이 있습니다.

Diffable DataSource

Hashable 기반으로 동작하며 기존의 DataSource와 reloadData()를 호출하는 것보다 데이터 관리와 업데이트 프로세스를 간소화하여 더 효율적이고 유지 관리 가능하며 시각적으로 매력적인 사용자 인터페이스를 구축하는 데 도움을 줍니다.

장점:

• 스냅샷 기반 접근:

  • IndexPath 대신 Unique identifier (Hashable을 준수) 를 사용하여 데이터 상태의 스냅샷을 생성. 이러한 스냅샷 기반 특성은 실행 취소/다시 실행 기능, 다른 데이터 상태 저장 및 복원을 단순화 함.
    

• 자동 애니메이션:

  • apply()를 사용하여 snapshot에 데이터 상태를 반영하여 UI 업데이트.

    기존에는 reloadData()를 호출해야 했는데 그럼 모든 셀을 다시 그리며 애니메이션이 끊겨 부자연스럽게 변경이 됨. snapshot은 데이터 변경을 스스로 파악해 자동으로 처리 → 부드러운 전환 효과로 사용자 경험 향상.

    
    

• ⭐️ 아래와 같은 기존의 synchronization crash 발생을 예방.

  • Centrailized Truth를 사용해 데이터 업데이트 시 크래시가 발생할 경우가 없음.

// UI와 DataSource간의 truth가 맞지않을때 크래시 오류

*** Terminating app due to uncaught exception 
‘NSInternalInconsistencyException’, reason: ‘Invalid update: invalid number 
of sections. The number of sections contained in the collection view after 
the update (10) must be equal to the number of sections contained in the 
collection view before the update (10), plus or minus the number of sections 
inserted or deleted (0 inserted, 1 deleted).’
***

😃 마인드카페 JP 홈 레이아웃 구현

Grid Section (Category) 구현

카테고리 섹션은 group에 5개의 item을 가지고 있고 화면 가로 넓이에 맞게 구성되어있습니다.

// item
let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.25), heightDimension: .fractionalHeight(1))
let item = NSCollectionLayoutItem(layoutSize: itemSize)
item.contentInsets = .init(top: 0, leading: 4, bottom: 0, trailing: 4)

// group 
let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .estimated(70))
let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])

// section
let section = NSCollectionLayoutSection(group: group)
section.contentInsets = .init(top: 16, leading: 8, bottom: 16, trailing: 8)
section.interGroupSpacing = 4

Group에 4개의 item이 들어가도록 itemSize를 .fractionalWidth(0.25)로 설정하고 group에는 .horizontal layout으로 적용했습니다.

Orthogonal Section 구현 (좌우 스크롤 되는 레이아웃)

기존에는 홈에서 좌우 스크롤되는 아이템에서 페이징 애니메이션을 적용하려면 scrollViewWillEndDragging() 에서 계산을 따로 해줘야하고, 애니메이션이 뚝뚝 끊겨 부자연스러웠는데 compositional layout에서는 orthogonalScrollingBehavior로 자유롭게 스크롤이 가능합니다.

// item
let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .fractionalHeight(1))
let item = NSCollectionLayoutItem(layoutSize: itemSize)
item.contentInsets = .init(top: 0, leading: 5, bottom: 0, trailing: 5)

// group 
let groupSize = NSCollectionLayoutSize(widthDimension: .absolute(254), heightDimension: .estimated(234))
let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])

// section
let section = NSCollectionLayoutSection(group: group)
section.contentInsets = NSDirectionalEdgeInsets(top: 16, leading: 11, bottom: 16, trailing: 11)
section.supplementariesFollowContentInsets = false

// 좌우 스크롤 설정 값 + paging 애니메이션 선택
section.orthogonalScrollingBehavior = .groupPaging

OrthogonalScrollingBehavior 종류

// default behavior. Section will layout along main layout axis (i.e. configuration.scrollDirection)
case none = 0

// NOTE: For each of the remaining cases, the section content will layout orthogonal to the main layout axis (e.g. main layout axis == .vertical, section will scroll in .horizontal axis)

// Standard scroll view behavior: UIScrollViewDecelerationRateNormal
case continuous = 1

// Scrolling will come to rest on the leading edge of a group boundary
case continuousGroupLeadingBoundary = 2

// Standard scroll view paging behavior (UIScrollViewDecelerationRateFast) with page size == extent of the collection view's bounds
case paging = 3

// Fractional size paging behavior determined by the sections layout group's dimension
case groupPaging = 4

// Same of group paging with additional leading and trailing content insets to center each group's contents along the orthogonal axis
case groupPagingCentered = 5

Supplementary Header & Footer & Decoration View 구현

Compositional Layout에서는 section 배경색은 decoration view로 구현 가능합니다.

// item, group 관련 코드 생략..

let section = NSCollectionLayoutSection(group: group)
section.contentInsets = NSDirectionalEdgeInsets(top: 16, leading: 16, bottom: 16, trailing: 16)
section.supplementariesFollowContentInsets = false
section.orthogonalScrollingBehavior = .groupPaging

// header
let headerSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .absolute(43))
let headerElement = NSCollectionLayoutBoundarySupplementaryItem(layoutSize: headerSize,
                                                                 elementKind: HomeTitleHeaderView.homeHeaderElementKind,
                                                                 alignment: .topLeading)
section.boundarySupplementaryItems = [headerElement]

// Background
let sectionBackgroundDecoration = NSCollectionLayoutDecorationItem.background(elementKind: GrayBackgroundView.elementKind)
section.decorationItems = [sectionBackgroundDecoration]

// Register decoration view
let layout = UICollectionViewCompositionalLayout(section: section)
layout.register(
        GrayBackgroundView.self, 
        forDecorationViewOfKind: GrayBackgroundView.elementKind)

header / footer 의 supplementary view는 collectionView 내에서 register()를 해야하고 decoration view는 UICollectionViewCompositionalLayout 내에서 register()를 해야 됩니다.

더 자세한 내용은 여기에 정리해놨습니다.

Header & Footer register()

최근 후기 section 같은 경우엔 header(제목)와 footer(회색뷰)가 같이 있는 경우입니다.

// .. 생략

let headerSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .absolute(43))
let headerElement = NSCollectionLayoutBoundarySupplementaryItem(layoutSize: headerSize,
                                                                 elementKind: HomeTitleHeaderView.homeHeaderElementKind,
                                                                 alignment: .topLeading)

let footerSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .absolute(19))
let footerElement = NSCollectionLayoutBoundarySupplementaryItem(layoutSize: footerSize,
                                                                 elementKind: UICollectionView.elementKindSectionFooter,
                                                                 alignment: .bottom)

section.boundarySupplementaryItems = [headerElement, footerElement]

// registration

let headerRegistration = UICollectionView.SupplementaryRegistration
            <HomeTitleHeaderView>(elementKind: HomeTitleHeaderView.homeHeaderElementKind) 
    { supplementaryView, kind, index in
            // ... 생략
    }

let footerRegistration = UICollectionView.SupplementaryRegistration
            <GrayBackgroundView>(elementKind: UICollectionView.elementKindSectionFooter) 
    { supplementaryView, kind, index in
            // ... 생략
    }

// 헤더랑 풋터 register 함수를 각각 따로 같이 호출하면 exception 에러남. 
// 한 function 안에서 kind로 비교해서 dequeue 해줘야 함.
viewModel.datasource.supplementaryViewProvider = { collectionView, kind, index in
    if kind == HomeTitleHeaderView.homeHeaderElementKind {
        return collectionView.dequeueConfiguredReusableSupplementary(using: headerRegistration, for: index)
    } else {
        return collectionView.dequeueConfiguredReusableSupplementary(using: footerRegistration, for: index)
    }
}

(* elementKind는 헤더와 풋터를 구분짓는 string 값인데 구분 잘 해줘야 함!)

CellRegistration, SupplementaryRegistration, DequeueConfiguredReusableSupplementary(using:) 는 iOS 14 이상에서만 가능합니다.

그 이하 버전은 기존처럼 컬렉션뷰 내에 register()를 해주고 dequeueReusableCell(withReuseIdentifier) 를 사용하셔야 합니다.

😃 Diffable DataSource 구현

구현부분을 간단한 버전으로 정리해보면,

enum HomeSection: Int, Hashable, CaseIterable, CustomStringConvertible {
    case topBanner
    case category
    case macapick

    var description: String {
        switch self {
        case .topBanner: return "TopBanner"
        case .category: return "Category"
        case .macapick: return "마카's PICK"
        }
    }
}

enum HomeDataItem: Hashable {
    case topBanner([Banner])
    case category(HomeServiceMenu)
    case macapick(Story)
}

var datasource: UICollectionViewDiffableDataSource<HomeSection, HomeDataItem>!
var snapshot = NSDiffableDataSourceSnapshot<HomeSection, HomeDataItem>()

viewModel.datasource = UICollectionViewDiffableDataSource<HomeSection, HomeDataItem>(collectionView: collectionView, cellProvider: { collectionView, indexPath, listItem in
    switch listItem {
    case .topBanner(let banners):
        let cell = collectionView.dequeueConfiguredReusableCell(using: topBannerCellRegistration, for: indexPath, item: banners)
        return cell
    case .category(let homeMenu):
        let cell = collectionView.dequeueConfiguredReusableCell(using: categoryCellRegistration, for: indexPath, item: homeMenu)
        return cell
    case .macapick(let story):
        let cell = collectionView.dequeueConfiguredReusableCell(using: macapickCellRegistration, for: indexPath, item: story)
        return cell
    }
})

// section 순서 세팅
let sections = HomeSection.allCases

// snapshot에 section data 추가
snapshot.appendSections(sections)

// snapshot에 item data 추가
snapshot.appendItems([.topBanner(banners), .category(category)])

// snapshot 반영
datasource.apply(snapshot, animatingDifferences: false)

👍🏻 이번 리팩토링으로 얻은 Output

1. 복잡성

기존 코드로는 테이블 뷰 셀 안에 컬렉션 뷰를 중첩해야 했지만 UICollectionViewCompositionalLayout으로 하나의 컬렉션 뷰 안에서 여러 layout으로 구현할 수 있었습니다.

Debug View Hierarchy 로 비교해 봤을때도 리팩토링 이후에 상당히 view depth가 줄어든 것을 확인할 수 있습니다.
리팩토링 전:

2. 동적 콘텐츠 크기 조정:

기존에는 cell 높이가 비동기적으로 변경될 경우에 cell이 제대로 보이지 않는 경우가 있었는데 Compositional Layout은 항목, 섹션 및 그룹의 적응적 크기 조정을 지원하면서 더 유동적이고 동적인 UI를 제공합니다. 또한 스크롤 지점을 유지하기 위해 높이나 contentOffset을 캐싱하여 관리할 필요도 없어 편리했습니다.

3. 효율적인 셀 구성:

cellProvider 클로저를 사용하여 셀을 구성할 수 있으며, 이를 통해 위치, 내용 또는 데이터에 기반하여 셀을 사용자 지정할 수 있습니다. 이는 셀 구성을 간소화하고 데이터와 UI 로직 사이의 깔끔한 분리를 유지하는 데 도움을 줬습니다.

4. ⭐️⭐️⭐️ 메모리 사용량 개선 ⭐️⭐️⭐️

리팩토링 이후 메모리 사용량이 얼마나 개선 되었는지 확인해보기 위해 리팩토링 바로 직전의 운영버전과 리팩토링 된 버전을 동일한 환경과 조건에서 메모리 사용량 측정을 해보았습니다.

[테스트 환경 및 조건]

Device - iPhone 11 Pro 0~30sec - 홈 화면 진입 후 아무것도 하지 않음 30sec - 하단으로 스크롤 시작 30sec ~ 1min - 최하단 도착 시 아무것도 하지 않음

리팩토링 전 메모리 점유율 테스트:

리팩토링 후 메모리 점유율 테스트:

• 홈 화면 진입: 기존 대비 약 23.49% 감소

• 홈 화면 맨 아래까지 스크롤: 기존 대비 약 68.71% 감소

아직 일본앱 홈 화면에만 적용해 보았지만 성능도 수치상 굉장히 개선된 것을 확인 할 수 있고 앱 크래시도 예방할 수 있어 비정상 종료도 줄일 수 있다는 면에서 추후 한국 앱에서도 고려해보면 좋겠다는 생각이 들었습니다.

참고자료

• https://developer.apple.com/videos/play/wwdc2019/220
• https://developer.apple.com/videos/play/wwdc2021/10252
• https://developer.apple.com/documentation/uikit/views_and_controls/collection_views/updating_collection_views_using_diffable_data_sources
• https://developer.apple.com/documentation/uikit/views_and_controls/collection_views/implementing_modern_collection_views

1. 첫번째 오류:

libc++abi: terminating with uncaught exception of type NSException *** Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'Invalid parameter not satisfying: self.supplementaryViewProvider || (self.supplementaryReuseIdentifierProvider && self.supplementaryViewConfigurationHandler)' terminating with uncaught exception of type NSException

로그를 대충 읽어보니 supplementaryViewProvider와 supplementaryReuseIdentifierProvider가 만족되지 않는다네. 아래 코드처럼 collectionView에 헤더뷰 register()를 해줬는데 dequeueReusableSupplementaryView 도 같이 해줘야하나보다.

내 코드 >

    // 1. Configure collectionView
    private lazy var collectionView = UICollectionView(frame: .zero, collectionViewLayout: createLayout()).then {
        $0.register(TopBannerCollectionViewCell.self, forCellWithReuseIdentifier: TopBannerCollectionViewCell.cellIdentifier)
        $0.register(HomeCategoryCollectionViewCell.self, forCellWithReuseIdentifier: HomeCategoryCollectionViewCell.identifier)
        $0.register(CommunityMainCollectionViewCell.self, forCellWithReuseIdentifier: CommunityMainCollectionViewCell.identifier)

        // Header register
        $0.register(HomeTitleHeaderView.self, forSupplementaryViewOfKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: HomeTitleHeaderView.identifier)
        $0.backgroundColor = .clear
    }

    // 2. configure header
    viewModel.datasource.supplementaryViewProvider = { [weak self] view, kind, index in
        return self?.collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: HomeTitleHeaderView.identifier, for: index)
    }

기존에는 UICollectionViewDelegate의 **"collectionView(:viewForSupplementaryElementOfKind:at:)" **함수 내에서 dequeueReusableSupplementaryView를 작성했다면

Diffable Datasource를 사용할 땐,** "supplementaryViewProvider"** 로 구현할 수 있음.

저러고 다시 앱을 돌려보니 이번엔 또 다른 오류...

libc++abi: terminating with uncaught exception of type NSException *** Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'the view returned from -collectionView:viewForSupplementaryElementOfKind:atIndexPath: does not match the element kind it is being used for. When asked for a view of element kind 'HomeTitleHeaderView' the data source dequeued a view registered for the element kind 'UICollectionElementKindSectionHeader'.' terminating with uncaught exception of type NSException

이번엔 또 읽어보니 element kind가 매칭이 안된다..? 뭘까.. 내가 알고있던 kind는 header인지 footer인지 구분하는 거고 헤더면 "UICollectionView.elementKindSectionHeader" 이거 쓰면 되는거 아니였냐구..!

내 코드 >

    // collectionView register header
    collectionView.register(CommunityMainCollectionViewCell.self, forCellWithReuseIdentifier: CommunityMainCollectionViewCell.identifier)

    // header reusable view dequeue
    collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: HomeTitleHeaderView.identifier, for: index)

흠,, 잘 넣어준 것 같은데 다시 잘 찾아보니...

이유를 찾았다.. 맞아 코드는 거짓말을 안하지 ㅠㅠㅠ 항상 사람이 문제야....

문제된 코드 >

    // item, group 관련 코드 생략

    let headerSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .absolute(56))
    let headerElement = NSCollectionLayoutBoundarySupplementaryItem(layoutSize: headerSize,
                                                                    elementKind: HomeTitleHeaderView.identifier, // 띠용..
                                                                    alignment: .topLeading)
       section.boundarySupplementaryItems = [headerElement]

휴.. layout 잡아주는 부분에서 headerItem elementKind에 reuseIdentifier를 넣어주고 있... ㅠㅠ 서로 값이 다르니 당연히 오류가 날 수 밖에 ㅎㅎ

저 부분을 "UICollectionView.elementKindSectionHeader" 로 넣어주니 에러 없이 잘 나온다!

어차피 kind는 string이기 때문에 직접 string 만들어서 넣어줘도 상관은 없고 값만 서로 동일하면 에러 안남! . . .

* UICollectionView.CellRegistration

이거 때문에 열심히 구글링 해보다가 cell 과 header/footer register()를 해주는 방식이 기존과는 다른게 있길래 그거도 적용해 봤는데 잘 됨! 하지만 그건 iOS 14 이상에서만 가능..ㅎ

우리 앱은 iOS 13이 최소 지원 버전이라.. 버전을 올리자 할수도 없고 ㅠㅠ 이틀 내내 고생하다 원인을 찾고나니 허무.. 앞으론 더 꼼꼼히 봐보자!

코드 ex)

    // cell registrations

    let topBannerCellRegistration = UICollectionView.CellRegistration<TopBannerCollectionViewCell, [Banner]> { (cell, indexPath, banner) in
        cell.setData(banners: banner)
    }

    let categoryCellRegistration = UICollectionView.CellRegistration<HomeCategoryCollectionViewCell, HomeServiceMenu> { (cell, indexPath, homeMenu) in
        // ... (생략)
    }

    let macapickCellRegistration = UICollectionView.CellRegistration<CommunityMainCollectionViewCell, Story> { (cell, indexPath, story) in
        // ... (생략)
    }

    let headerRegistration = UICollectionView.SupplementaryRegistration<HomeTitleHeaderView>(elementKind: HomeTitleHeaderView.identifier) { supplementaryView, elementKind, indexPath in
        // ... (생략)
    }

    // datasource에 적용

    viewModel.datasource = UICollectionViewDiffableDataSource<HomeSection, HomeDataItem>(collectionView: collectionView, cellProvider: { collectionView, indexPath, listItem in
        switch listItem {
        case .topBanner(let banners):
            let cell = collectionView.dequeueConfiguredReusableCell(
                using: topBannerCellRegistration, for: indexPath, item: banners
            )
            return cell
        .
        .
        .
        (생략)
        }
    })

완성된 뷰 UI:

3번째 섹션에 header view 잘 적용된 거 확인~~!!

출처: https://jamesrochabrun.medium.com/uicollectionviewdiffabledatasource-and-decodable-step-by-step-6b727dd2485 https://swiftsenpai.com/development/reload-diffable-section-header/

저는 3번째 섹션에 그레이 색상의 백그라운드 뷰를 넣었어요!

1. 먼저 백그라운드 뷰로 사용할 UICollectionReusableView 를 생성해줍니다.

class GrayBackgroundView: UICollectionReusableView {
    private let grayBackgroundView = UIView().then {
        $0.backgroundColor = .lightGray //UIColor(red: 246, green: 247, blue: 251)
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = .clear
        addSubview(grayBackgroundView)

        grayBackgroundView.snp.makeConstraints {
            $0.top.leading.trailing.bottom.equalToSuperview()
        }
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

2. header는 boundarySupplementaryItems에, background는 decorationItems에 각각 지정해줍니다.

    private func pickLayout() -> NSCollectionLayoutSection {
        let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .fractionalHeight(1.0))
        let item = NSCollectionLayoutItem(layoutSize: itemSize)

        let groupSize = NSCollectionLayoutSize(widthDimension: .absolute(300), heightDimension: .estimated(313))
        let group = NSCollectionLayoutGroup.vertical(layoutSize: groupSize, subitems: [item])

        let section = NSCollectionLayoutSection(group: group)
        section.interGroupSpacing = 16
        section.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 16, bottom: 16, trailing: 16)
        section.supplementariesFollowContentInsets = false

        let headerSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .absolute(56))
        let headerElement = NSCollectionLayoutBoundarySupplementaryItem(layoutSize: headerSize,
                                                                        elementKind: UICollectionView.elementKindSectionHeader,
                                                                        alignment: .topLeading)
        section.boundarySupplementaryItems = [headerElement]
        section.orthogonalScrollingBehavior = .groupPaging

        // Background
        let sectionBackgroundDecoration = NSCollectionLayoutDecorationItem.background(elementKind: "macapickBackground")
        section.decorationItems = [sectionBackgroundDecoration]

        return section
    }

3. 여기서 주의해야할 점은!

   Supplementary Header View는 UICollectionView 내에서 register() Decoration View는 UICollectionViewCompositionalLayout 내에서 register() 해야합니다.

저는 예제 코드를 보면서 하는데 계속 register가 안됐다면서 fatal error가 뜨는 거에요.. 어떻게 어떻게 하다가 찾은 방법은 아래입니다!

    private func createLayout() -> UICollectionViewLayout {
        let layout = UICollectionViewCompositionalLayout { [weak self] (sectionIndex, environment) -> NSCollectionLayoutSection? in
            switch sectionIndex {
            case 0: return self?.bannerLayout()
            case 1: return self?.categoryLayout()
            case 2: return self?.pickLayout()
            default: return nil
            }
        }

        // Register decoration view
        layout.register(GrayBackgroundView.self,
                        forDecorationViewOfKind: "macapickBackground")

        return layout
    }

4. 마지막으로 컬렉션뷰의 collectionViewLayout에 위에서 작성한 createLayout() 함수를 넣어주면 끝~

    private lazy var collectionView = UICollectionView(frame: .zero, collectionViewLayout: createLayout()).then {
        $0.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "bannerCell")
        $0.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "categoryCell")
        $0.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "macapickCell")
        $0.register(UICollectionReusableView.self, forSupplementaryViewOfKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: "macapickHeader")
        $0.backgroundColor = .clear
        $0.dataSource = self
    }

아 아까 decoration view가 계속 register가 안된다고 오류가 나던 코드는 이 문제였어요..

    private func pickLayout() -> NSCollectionLayoutSection {
        let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .fractionalHeight(1.0))
        let item = NSCollectionLayoutItem(layoutSize: itemSize)

        let groupSize = NSCollectionLayoutSize(widthDimension: .absolute(300), heightDimension: .estimated(313))
        let group = NSCollectionLayoutGroup.vertical(layoutSize: groupSize, subitems: [item])

        let section = NSCollectionLayoutSection(group: group)
        section.interGroupSpacing = 16
        section.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 16, bottom: 16, trailing: 16)
        section.supplementariesFollowContentInsets = false
        section.orthogonalScrollingBehavior = .groupPaging

        let headerSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .absolute(56))
        let headerElement = NSCollectionLayoutBoundarySupplementaryItem(layoutSize: headerSize,
                                                                        elementKind: UICollectionView.elementKindSectionHeader,
                                                                        alignment: .topLeading)
        section.boundarySupplementaryItems = [headerElement]

        // Background
        let sectionBackgroundDecoration = NSCollectionLayoutDecorationItem.background(elementKind: "macapickBackground")
        section.decorationItems = [sectionBackgroundDecoration]

        // section을 리턴하는 함수 안에서 layout 인스턴스를 새로 생성해 register()를 해줬더니 안되는 거였음..ㅠㅠ
        let layout = UICollectionViewCompositionalLayout(section: section)
        layout.register(GrayBackgroundView.self, forDecorationViewOfKind: "macapickBackground")

        return section
    }

decode()는 return 값이 non-optional decodeIfPresent()는 return 값이 optional

decodeIfPresent는 받는 타입도 optional 이여야함.

프로퍼티가 옵셔널 값이면 나중에 쓸때 optional binding 해주기 귀찮을땐 decode() 를 사용하는게 나아보임.

키가 없을 때의 경우는 decodeIfPresent 나 try? 를 써야 함. (안그럼 key not found 에러남)

struct CounselorReview: Codable {
    1. let productType: SaleProductType  // 옵셔널 값으로 안쓰고 싶음
    2. let productType: SaleProductType?

    init(from decoder: Decoder) throws {
        let container = try decoder.container(keyedBy: CodingKeys.self)

        1. productType = (try? container.decode(SaleProductType.self, forKey: .productType)) ?? .none
        2. productType = try container.decodeIfPresent(SaleProductType.self, forKey: .productType) ?? SaleProductType.none
    }
}

enum SaleProductType: Int, Codable {
    case text = 1
    case onlineGroup = 3
    case offlineGroup = 4
    case voice = 11
    case video = 13
    case interpret = 12
    case psyTest = 15
    case none  // default 값 정의
}

*문제: *

• 컬렉션뷰 셀 안에 있는 gradient 뷰가 첫 시점에 안나오고 스크롤을 한번 다녀와야지만 적용이 되는 문제.

위 문제의 원인이 뭘까..🤔

테이블뷰 셀 안에 컬렉션뷰 셀에서 화면 reload 하는 시점이 애매해서 gradient 뷰의 프레임을 제대로 못받아오는 것 같다.

해결방법! 레이아웃 업데이트를 시켜주자! 어떻게??

• layoutSubviews()
• draw()
• layoutIfNeeded()
• setNeedsLayout()
• setNeedsDisplay()
• displayIfNeeded()

다 비슷한거 아녀..? 너무 헷갈려...

일단 첫번째로 override 함수인 layoutSubviews()를 호출해서 그 안에 gradientLayer의 프레임을 gradientView의 크기로 줘봤지만.. 무용지물 ㅠㅠ

override func layoutSubviews() {
    super.layoutSubviews()
        gradientLayer.frame = gradientView.bounds
    }
}

그래서 어 혹시 layoutIfNeeded()를 해주면 되려나? 싶어서 gradientView 오토레이아웃 잡은 후에 넣었더니 바로 적용이 된다..! 띠용

그럼 draw override 함수를 써봐도 되려나 싶어서 해봤더니 이것도 바로 잡힘!

override func draw(_ rect: CGRect) {
    gradientLayer.frame = gradientView.bounds
}

draw 함수에서는 super를 호출할 필요가 없다고 한다. 다른 커스텀 뷰를 상속받을때만 호출해주면 됨. 난 그냥 collectionViewCell 안에서 호출하는거니 super 호출 X.

그래도 헷갈려.. 더 알아보자

1. setNeedsDisplay

이 메서드는 drawRect 메서드랑 같이 사용됨. 이 메서드는 내부적으로 drawRect를 호출하면서 뷰를 다시 그림.

뷰의 컨텐츠가 바꼈을 때 이 메서드로 뷰가 변경됐다라는 걸 알린후에 drawRect 호출해서 뷰를 다시 그리는 것.

뷰가 계속 움직이거나 업데이트 되어야할 때 등등 속성의 변경 사항을 반영하려면 setNeedsDisplay를 호출하면 됨.

주의사항으로는, drawRect 함수를 절대 직접 호출하면 안된다!! setNeedsDisplay로 다음 업데이트 요청하면 됨.

2. setNeedsLayout

이 메서드는 아무런 작업 수행 X. 시스템에 뷰 업데이트가 필요하다고 trigger 하는 역할. 그 전 뷰 레이아웃을 무효화 시키고 다음 업데이트 주기때 한번에 업데이트 시키기 위함. 퍼포먼스에 도움이 된다.

import UIKit

class CircleView: UIView {
    private var center: CGPoint = .zero
    private var radius: CGFloat = 0.0

    override func draw(_ rect: CGRect) {
        super.draw(rect)

        // center와 radius에 기반하여 원을 그리기 위해 사용자 정의 그리기 수행
        let path = UIBezierPath(arcCenter: center, radius: radius, startAngle: 0, endAngle: CGFloat.pi * 2, clockwise: true)
        path.stroke()
    }

    func updateCircle(center: CGPoint, radius: CGFloat) {
        self.center = center
        self.radius = radius

        setNeedsLayout() // 레이아웃 업데이트 트리거
        setNeedsDisplay() // 다시 그리기 트리거
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        // 필요한 경우 추가적인 레이아웃 조정 수행
    }
}

3. layoutIfNeeded

이 메서드는 뷰 업데이트를 바로 적용하고 싶을때 사용하면 됨. 위에 setNeedsDisplay나 setNeedsLayout 같은 경우는 다음 업데이트 주기를 기다리는 거라면 이 메서드는 그냥 지금 바로! 느낌.

정리해보자면,

• drawRect 함수는 직접 호출 X. 커스텀 뷰 만들어서 setNeedsDisplay 메서드 호출해서 사용.
• layoutSubviews 함수도 직접 호출 X. layoutIfNeeded나 setNeedsLayout 호출.

결론은,

내 앱에서는 뷰가 계속 바껴야 하는 건 아니고, 그냥 처음에 셀 세팅될 때 gradient만 바로 적용이 되면 되기 때문에 drawRect 메서드를 호출할 필요도 없고 layoutSubviews 메서드도 셀이 재사용될때마다 계속 호출이 되기때문에 그럴 필요가 없다고 판단했다.

그래서 init 시점에서 뷰를 다 그려준 후에 gradientLayer의 프레임을 잡아주기 전에 layoutIfNeeded() 메서드만 호출 해 바로 레이아웃 업데이트 완료를 해주었다.

override init(frame: CGRect) {
    super.init(frame: frame)
    configure()
    makeConstraints()
    setGradientLayer()
}

private func setGradientLayer() {
    gradientLayer = CAGradientLayer()
    gradientView.layoutIfNeeded()
    gradientLayer.frame = gradientView.bounds
    gradientLayer.colors = [UIColor(red: 78, green: 175, blue: 168).cgColor, MacaColors.turquoise600.cgColor]
    gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.2)
    gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.8)
    gradientView.layer.addSublayer(gradientLayer)
}

결과!!

이제 바로 나온다!

출처: https://stackoverflow.com/questions/10818319/when-do-i-need-to-call-setneedsdisplay-in-ios https://zeddios.tistory.com/359