SwiftUI로 Custom View생성하기

🌼 뷰 추가하기

• body 프로퍼티에 원하는 뷰를 배치하여 다른 뷰가 추가 될 수 있다
• 그러나, body에는 단 하나만의 뷰를 반환하도록 구성되어있다
• 그렇기 때문에 뷰를 추가하기 위해서는 Stack이나 Form 같은 컨테이너 뷰에 뷰들을 배치해야한다

//틀린 예
struct ContentView: View {
    var body: some View {
     	Text("Hello, world!")
        Text("Goodbye, world!")
    }
}
//올바른 예
struct ContentView: View {
    var body: some View {
        VStack { //VStack => 수직 스택
            Text("Hello, world!")
            Text("Goodbye, world!")
        }
    }
}

• SwiftUI 뷰는 기본적으로 부모 부와 자식 뷰 형태의 계층 구조가 된다
• 이는 여러 계층의 뷰들이 복잡한 사용자 인터페이스를 생성할 수 있다
  
• 컨테이너에 포함된 여러 뷰를 서로 연결하면 하나의 뷰처럼 간주된다는 것
  ex) Text("Hello")+Text("how ")+Text("are you?")

☄️ 하위 뷰로 작업하기

• 최대한 뷰를 작고 가볍게 제작하는 것을 권장
• 재사용할 수 있는 컴포넌트 생성을 권장, 뷰 선언부를 더 쉽게 관리하도록 하며, 레이아웃이 더 효율적으로 렌더링되도록 한다

//기존 코드
struct ContentView: View {
    var body: some View {
        VStack { //VStack => 수직 스택
        	VStack{
              Text("Hello, world!")
              Text("Goodbye, world!")
              Text("Hello, world!")
              Text("Goodbye, world!")
              Text("Hello, world!")
              Text("Goodbye, world!")
            }
            Text("adkjhadkjahdkj")
        }
    }
}

// 수정
struct ContentView: View {
    var body: some View {
        VStack { //VStack => 수직 스택
        	MyTextView()
            Text("adkjhadkjahdkj")
        }
    }
}

//중복되는 부분을 하위 뷰로 만들기
struct MyTextView: View{
	var body: Some View{
    	VStack{
              Text("Hello, world!")
              Text("Goodbye, world!")
              Text("Hello, world!")
              Text("Goodbye, world!")
              Text("Hello, world!")
              Text("Goodbye, world!")
        }
    }
}

🍌 프로퍼티로서의 뷰

• 프로퍼티를 뷰에 할당할 수 있다

struct ContentView: View {
	let carStack = HStack{
    	Text("Car Image")
        Image(systemName: "car.fill")
    }
    
    var body: some View {
        VStack { //VStack => 수직 스택
            Text("adkjhadkjahdkj")
            carStack
        }
    }
}

🍡 뷰 변경하기

• 수정자를 통해 우리가 원하는 뷰의 모양과 동작을 변경할 수 있다
• 수정자는 커스텀 하위 뷰에도 일괄 적용할 수 있다

Text("수정자").font(.headline).foregroundColor(.red)
Image(systemName:"car.fill").resizeable().aspectRatio(contentMode:.fit)
//커스텀뷰에 수정 적용하기
MyVStackView().font(.headline)

• 수정자의 순서도 매우 중요하다
• 수정자는 위에서부터 적용한 결과를 반환해 다음 수정자가 이를 가지고 수정을 하기 때문에 수정자 순서에 따라 결과가 달라진다

Text("Sample Text")
	.border(Color.black) 
    	.padding() //이미 경계선은 그려져있고 패딩을 실시
Text("Sample Text")
    	.padding() //둘의 결과가 다르다
        .border(Color.black) 

🍙 커스텀 수정자

• 나만의 커스텀 수정자를 생성할 수 있다
• 뷰에 자주 적용되는 대표적인 수정자들을 만들고 싶을 때 사용하면 된다

//자주 사용되는 수정자
Text("Text 1")
	.font(.largeTitle)
    	.background(Color.white)
        .border(Color.gray, width:0.2)
        .shadow(color:Color.black, radius: 5, x:0,y:5)

// 위의 내용을 커스텀 수정자로 묶어서 필요할 때마다 참조하는 것
// 커스텀 수정자는 ViewModifier 프로토콜을 따르는 구조체로 선언
struct MyCustomModifier: ViewModifier {
	func body(content: Content) -> some View{
    		content
            		.font(.largeTitle)
                        .background(Color.white)
                        .border(Color.gray, width:0.2)
                        .shadow(color:Color.black, radius: 5, x:0,y:5)
        }
}

//필요한 곳에 modifier()메서드를 통해 커스텀 수정자를 전달
Text("text 1").modifier(MyCustomModifier())
Text("text 2").modifier(MyCustomModifier())

🍲 기본적인 이벤트 처리

• 사용자가 조작할 때 발생하는 이벤트 처리는 필수
• 버튼 뷰는 다른 여러 다른 뷰를 "클릭"할 수 있는 버튼으로 만들기 위해 사용
• 예를 들어 텍스트를 버튼으로 만드는 상황
• 버튼 뷰는 버튼의 내용과 함께 클릭이 감지될 때 호출될 메소드로 선언되어야한다

struct ContentView: View{
	var body : some View{
    		Button(action: buttonPressed){
            	Text("Click Me")
    		}
    	}
        func buttonPressed(){
        	//동작할 코드를 적는다
        }
}

//action 함수를 외부에 정의하는 대신, 실행될 코드를 클로저로 지정 가능
Button(action:{
	//동작 코드
}) {
	Text("Click Me")
}