하지만 다중 섹션을 가지고 있고, 경우의 수에 따라서 특정 섹션이 사라지기도 하고 생겨나기도 하는 화면이 있습니다.
이런 화면은 기존 reloadData로만 화면을 업데이트하기에는 조금 버거워 보일 수 있습니다. 사용자 경험도 저하시킬 수 있고요.
데이터 정의하기
많은 섹션들과 아이템을 관리하기 위한 가장 좋은 툴은 enum이라고 할 수 있습니다.
Associated Value를 통해 각 섹션 및 아이템에 들어갈 구체적인 데이터 타입을 정의합니다.
// MARK: - Item
enum ProfileSectionItem: Hashable {
case profileSetupHelper(ProfileHelperType)
case anniversarySetupHelper
case favors(Favor)
case anniversaries(Anniversary, isMine: Bool)
case memo(String?)
case friends(Friend)
}
// MARK: - Section
enum ProfileSection: Hashable {
case anniversarySetupHelper
case profileSetupHelper
case favors
case anniversaries
case memo
case friends
}
한 가지 주의할 점은 우리는 DiffableDataSource를 사용할 때에는 데이터가 Hashable 프로토콜을 채택해야합니다.
이전 데이터과 현재 데이터를 Hash Value로 판단하여 무엇이 이전과 다른지 파악하고, 만약 데이터가 바뀌었다면 렌더링이 자동으로 되게끔 하는 것이 우리의 목표입니다.
CompositionalLayout은 섹션과 아이템이 많을 수록 코드가 굉장히 길어질 수도 있습니다. 그래서 최대한 ViewController가 너무 방대해지지 않도록 분리해서 구현해주시는 것이 적합합니다.
extension ProfileSection: Composable {
public var item: UICollectionViewComposableLayout.Item {
switch self {
case .anniversarySetupHelper:
return .listRow(height: .absolute(250))
case .profileSetupHelper:
return .grid(
width: .absolute(250),
height: .absolute(250)
)
case .favors:
return .grid(
width: .estimated(100),
height: .absolute(32)
)
case .anniversaries:
return .listRow(
height: .absolute(95)
)
case .memo:
return .listRow(
height: .estimated(130)
)
case .friends:
return .grid(
width: .absolute(60),
height: .absolute(87)
)
}
}
}
비즈니스 로직 처리하기
이제 ViewModel에서 관련 섹션과 아이템의 객체들을 만들어서 단방향 흐름을 구현합니다.
final class ProfileViewReactor: Reactor {
enum Action { ... }
enum Mutation { ... }
struct State {
var sections: [ProfileSection] = []
var items: [[ProfileSectionItem]] = []
var user = User()
}
State에는 위에서 정의했던 enum의 배열 값이 각각 들어있습니다.
만약 사용자의 액션(인풋)이 들어오면 데이터를 변경하고 자동으로 UI를 변경하고 싶습니다.
ReactorKit에는 이와 알맞은 메서드가 있습니다. 바로 transform(state:) 입니다.
func transform(state: Observable<State>) -> Observable<State> {
return state.map { state in
var newState = state
var newSections: [ProfileSection] = []
var newItems: [[ProfileSectionItem]] = [] // 아이템은 2차원 배열
// 취향
if !state.favorItems.isEmpty {
newSections.append(.favors)
newItems.append(state.favorItems)
}
// 기념일
if !state.anniversaryItems.isEmpty {
newSections.append(.anniversaries)
newItems.append(state.anniversaryItems.prefix(3).wrap())
}
// 친구
if !state.friendItems.isEmpty {
newSections.append(.friends)
newItems.append(newState.friendItems)
}
newState.sections = newSections
newState.items = newItems
return newState
}
}
transform(state:)는 ViewController에 전달할 Observable가 전달되기 직전에 호출되어, 데이터 변경 값에 따라서 원하는 UI를 재구성할 수 있습니다.
