프리뷰(Preview)

작성한 코드의 결과물을 매번 새로 빌드 하지 않고도 프리뷰를 통해 쉽고 빠르게 피드백을 받을 수 있었습니다.

프리뷰는 이런 장점 외에 유용한 기능들을 많이 제공합니다.

프리뷰 동작 과정

struct ContentView_Previews: PreviewProvider {
		static var previews: some View {
				ContentView()
		}
}

Xcode는 위와 같은 코드를 아래와 같은 순서로 인식합니다.

1. 현재 소스 에디터에 PreviewProvider 프로토콜을 준수하는 타입이 존재하는지 확인
2. PreviewProvider 프로토콜의 필수 구현 사항인 previews 타입 프로퍼티에서 뷰 생성
3. 액티브 스킴의 목적지(Destination)로 선택한 시뮬레이터 또는 맥에 연결한 기기의 형태로 프리뷰 컨테이너 렌더링, 이때 목적지가 Generic iOS Device인 경우는 iPhone 8이 기본값.(Xcode 11기준) 리뷰 컨테이너를 직접 지정해 줄 경우 선택한 기기를 무시하고 해당 기기 형태로 렌더링

프리뷰 수식어 살펴보기

기기 지정하기

프리뷰도 각 기긱별로 프리뷰 컨테이너로 지정하여 확인 할 수 있습니다. 기본값은 액티브 스킴에서 목적지로 지정한 형태로 보이지만 원하는 것을 지정 할 수도 있습니다.

struct ContentView: View {
    var body: some View {
        List {
            Image("KotlinLogo")
            Image("KotlinLogo")
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ContentView()
                .previewDevice(PreviewDevice(rawValue: "iPhone 11 Pro"))
            ContentView()
                .previewDevice(PreviewDevice(rawValue: "iPhone 8"))
        }
    }
}

previewDevice(_:) 수식어를 적용하면 프리뷰에 디바이스를 지정해서 확인 할 수 있습니다.

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ForEach(["iPhone 11 Pro", "iPhone 8", "iPhone 12 mini"], id: \\.self) {
            ContentView()
                .previewDevice(PreviewDevice(rawValue: $0))
        }
    }
}

ForEach를 사용해서 다양한 디바이스를 추가 할 수도 있습니다.

이름 지정하기

프리뷰에는 이름이 기본값으로 Preview가 들어가 있는데 previewDisplayName으로 간단하게 이름을 지정 할 수 있습니다.