Preview 활용하기

다크모드 대응하기

• ColorScheme을 잘 활용하면 프리뷰에서 동시에 라이트/다크모드 대응이 가능
• 보통은 user setting에 맞게 불리지만 원한다면 override도 가능함
• Hashable, CaseIterable protocol을 따른다는 점을 이용하여 ForEach문을 통해 모든 color scheme에 대해 특정 행동을 취할 수 있음

public enum ColorScheme: CaseIterable {
   case light
   case dark
   ...
}

• preferredColorScheme은 현재 View를 지정된 color scheme이 적용 된 view를 return 해주는 함수

extension View {
   @inlinable public func preferredColorScheme(_ colorScheme: ColorScheme?) -> some View
}

• 이 두 특징을 활용하여 preview에서 모든 color scheme 경우를 보여주게 만듬

extension View {
   var previewInAllColorSchemes: some View {
      ForEach(ColorScheme.allCases, id: \.self, content: preferredColorScheme)
   }
}

여러개의 Device들 동시에 보기

• preview에서 여러개의 device 들을 한번에 볼 수 있어서 다양한 기기에서의 레이아웃 대응을 하기 쉬움
• default 보여지는 기기는 simulator로 지정된 기기이지만 device의 이름 또는 모델 number를 이용해 변경/추가가 가능
  • device 이름: simulator 목록에 적혀있는 이름
  • device 모델 number : 바로가기 의 "identifier" ex) iPhone 11 = iPhone12,1
• 여러개의 device를 묶어서 보고 싶을 때 Group 사용

struct Example_Previews: PreviewProvider {
   static var previews: some View {
      Group {
         ExampleView()
            .previewDevice(PreviewDevice(rawValue: "iPhone SE")) // 보고 싶은 preview device 종류
            .previewDisplayName("SE") // preview device 위에 쓰여질 이름

         ExampleView()
            .previewDevice(PreviewDevice(rawValue: "iPhone 12 mini"))
            .previewDisplayName("12 mini")
      }
   }
}

Preview 예시	장/단점
	[장점 1] 여러 시뮬레이터를 켜지 않고도 원하는 device에서 어떻게 보이는지 확인 가능 [장점 2] 원하는 만큼 device 개수를 늘릴 수 있음 [단점 1] 전체 빌드를 하고 실행이 되다 보니 후반부로 갈수록 비효율적 [단점 2] 디바이스 수를 늘리면 컴퓨터가 '매우' 힘들어함