[WWDC21] Modern Cell configuration

[WWDC21] Modern Cell configuration

 

 

 

데이터, 레이아웃, 셀 총 3가지 범주로 분류 가능함.

 

- Data

- Layout

- Presentation

 

이번 세션에서는 View를 구성하는 방식에 중점을 둘 예정.

 

 

 

기본 셀을 사용할 때는 위처럼 사용할 수 있음.

 

 

구성할 수 있는 Configuration types은 두가지가 존재함

- Background Configuration

- Content Configuration

 

 

Swift에서는 Value Type을 만드는데 비용이 매우 저렴함.

즉, Configuration에 대한 변경 사항은 셀에 Configuration을 적용할 때까지 어던 것에도 영향을 미치지 않음.

 

 

 

생성하는데 가볍기 때문에 항상 새 Configuration으로 시작해야 함.

새롭게 Configuration을 만드는 작업은 셀을 항상 새롭게 만드는 때만이 아니라, 매번 업데이트할 때마다도 적용됨.

 

새롭게 Configuration을 설정하고 새 상태에 맞게 설정하기만 하면 됨.

 

 

이전 상태에 대해서 고민할 필요가 없음.

즉, 이미 값이 적용이 되어 있는지 이전 상태를 가져와서 체크한 후에 변경하는 행위를 하지 말 것.

오랜기간 UIKit을 사용했다면 `prepareForReuse`에서 상태를 초기화하는 등 조금 다르게 느껴질 수 있지만 이제는 그럴 필요가 없기에 엄청 자유로워짐.

 

내부적으로 변경된 사항을 파악하고 필요에 따라 뷰를 효율적으로 업데이트 함.

 

애니메이션과 같은 동작도 몇줄의 코드만으로 가능해짐.

항상 새롭게 만들어서 Single source of truth라서 안전하고, 언제나 새로운 Configuration을 설정할 경우 모두 한번에 변경됨.

최고의 성능을 위해 처음부터 설계되었으며, 특히 부드러운 스크롤을 보장

 

 

ConfigurationStste는 셀을 구성하는 데 사용하는 다양한 입력을 일컬음.

뷰를 세팅하는 방법을 결정하는 가장 일반적인 입력 중 하나는 UI Collection의 Trait임

 

 

 

 

상태는 Trait이란 특성 위에 더 다양한 상태로 존재함.

셀의 드래깅, 에디팅 등 다양한 상태를 즉시 확인할 수 있음.
여기까지는 UIKit에서 제공하는 상태임.

 

 

사용자가 직접 만든 고유 상태가 있음.

앱 서비스 도메인에 따라 다른데 메시지 앱이라면 message 상태 등 개발하는 앱에 따라 커스텀하게 설정한 상태

 

이런것들이 모두 ConfigurationState란 한곳에 래핌되므로 상태를 쉽게 찾을 수 있음.

 

 

 

상태에는 헤더와 푸터에 사용되는 View Configuration State와 Cell Configuration State로 2개가 존재함

 

 

View Configuration State에는 UIKit에서 제공되는 4가지 상태와 사용자가 만든 Custom State로 총 5가지 상태가 있음.

 

 

 

 

셀은 View Configuration State에서 Editing, Swipe 등 몇가지 상태가 추가로 존재함

 

 

 

 

View Configuration에 추가로 존재하는 Cell Configuration는 가장 중요한 점이 있음.

새 상태에 대한 Configuration을 업데이트하는 데 사용한다는 것.

Background Content를 포함해 모든 업데이트 된 버전을 반환하도록 요청할 수 있음.

 

이렇게 할 경우 새 상태를 반영하도록 속성이 업데이트 된 Configuration의 새 복사본이 반환됨.

 

 

컨텐츠 구성이 자동 업데이트 되도록 기본 값으로 설정되어 있어서, 자동으로 업데이트가 동작하여 다양한 상태에 대한 모양을 업데이트 함.

처음 설정된 상태들이 아닌, 다른 상태로 업데이트 하고 싶은 경우에는 해당 값을 disabled하고 다른 값을 넣어줄 수 있음.

 

 

manual하게 업데이트 하고 싶은 경우에는 상태를 사용하여 구성을 업데이트 할 수 있는 새로운 메서드가 있음.

이는 셀의 하위 클래스에 정의된 메서드로 셀을 구성하는 코드를 넣을 수 있음.

 

이 메서드는 셀이 처음 표시되기 전에 항상 호출되며, Configuration State가 변경될 때마다 다시 호출되므로 새 상태에 대해서 직접 구성할 수 있음.

 

이전 Configuration State에 대해 걱정할 필요 없이 매번 새로운 Configuration을 가져오면 됨.

이 메서드는 다른 설정이나 업데이트를 자신에게 중앙 집중화하는 데 좋은 위치임.

 

어떤 이유로든 자신을 재구성 해야 하는 경우에는 `setNeedsUpdateConfiguraiton()`을 호출하면 됨.

 

 

 

 

이런 식으로 상태가 업데이트 될 때 커스텀하게 처리할 수 있음.

 

 

 

Color Transfomer라는 색상을 변경하는 코드가 존재함.

원래 색상을 가져와 어떤 식으로든 수정하여 다른 색상을 반환함

회색조의 넣는 코드를 수행하고 싶다면, 이 코드는 매우 강력함.

 

Color Transfomer는 기존 색상과 결합하여 사용자가 보는 색상을 구성함

 

 

기본적으로 제공되는 것들에는 이런 값들이 존재함.

 

 

접근성 모드를 통해 텍스트를 가장 키워도 알아서 대응해줌.

왜냐하면 콘텐츠 구성은 애초에 동적 레이아웃을 지원하도록 설계되어 있음.

 

 

레이아웃 이렇게 배치하는게 좋음.

이미지에 따라 text의 leading이 망가지면 이상하기 때문에.

 

 

 

기존 프로젝트의 셀을 Configuration으로 변경할 때 염두에 두어야 하는 몇가지 기본 사항에 대해서 알아보고자 함.

 

BackgroundConfiguration은 기존 속성과 상호 배타적 관계임.

즉, BackgroundConfiguration이 설정되면 backgroundColor와 backgroundView가 nil로 설정되고 반대의 경우에도 동일함.

따라서 다른 코드와 혼합하지 않도록 주의해야 함.

 

특히 UITableView를 사용하는 경우에는 기본 값들을 대체함.

Cell에서 기본적으로 제공되는 이러한 레거시한 속성들은 향후에는 사용되지 않을 예정.

 

 

이렇게 작성할 경우 사용자 커스텀 뷰로 작성 가능함.

 

 

 

 

 

(참고)

https://developer.apple.com/videos/play/wwdc2020/10027/