[SwiftUI] preview가 뭔데요?

swiftUI file을 생성하게 되면 preview 함수가 만들어져 있는 것을 볼 수 있습니다.

 

preview의 역할은 시뮬레이터를 실행시키지 않고도 화면이 어떻게 보여지는 건지 바로 확인을 할 수 있게 만들어줍니다.

동작은 어떻게 하는 지 먼저 보자면,

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

 

코드에서 보면 HomeView()라는 함수를 동작시키게 되는데, 수식어를 사용하여 특정 기기에서 실행 혹은 여러 개의 기기의 preview를 볼 수 있게 만들 수도 있습니다.

그리고 특정 이미지를 그리는 함수가 계속 사용되어서 파일을 분리하였지만, 그것을 보는 방법을 보는 방법도 있습니다.

struct CircleGroupView: View {

    @State var ShapeColor: Color
    @State var ShapeOpacity: Double
    
    var body: some View {
        ZStack {
            Circle()
                .stroke(ShapeColor.opacity(ShapeOpacity), lineWidth: 40)
                .frame(width: 270, height: 270, alignment: .center)
            Circle()
                .stroke(ShapeColor.opacity(ShapeOpacity), lineWidth: 80)
                .frame(width: 280, height: 280, alignment: .center)
        } //: ZSTACK
    }
}

struct CircleGroupView_Previews: PreviewProvider {
    static var previews: some View {
        ZStack {
            Color("ColorBlue")
                .ignoresSafeArea(.all, edges: .all)
            
            CircleGroupView(ShapeColor: .white, ShapeOpacity: 0.2)
        }
        CircleGroupView(ShapeColor: .blue, ShapeOpacity: 0.2)
    }
}

위와 같이 볼 수 있게 만드는 preview를 보았습니다.