SwiftUI 에서 미리보기 이용하기 (Preview)

 

Preview 동작 과정

1. 현재 소스 에디터에 ProviewProvider 프로토콜을 준수하는 타입이 존재하는지 확인
2. PreviewProvider 프로토콜의 필수 구현 사항인 previews 타입 프로퍼티에서 뷰 생성
3. 액티브 스킬의 목적지로 선택한 시뮬레이터 또는 맥에 연결한 기기의 형태로 preview container 렌더링
4. 리뷰 컨테이너를 직접 지정해 줄 경우 3번에서 선택한 기기를 무시하고 해당 기기 형태로 렌더링

 

자동 Preview 갱신

Preview 를 활용하다 보면 언제든 빌드를 다시 않아도 수정 결과가 자동으로 반영된다.

 

기본 코드

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

 

실행 화면

 

---

개발자 Document

Apple Developer Documentation

Apple Developer Documentation