![[SwiftUI] SwiftUI에서 Custom View 만들기 : State와 body를 사용하는 방법](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FBNmjf%2FbtrptAWxfjP%2F6uwvdFwiUG0KtSXjkgLLK0%2Fimg.gif)
SwiftUI에서 Custom View 만들기
Custom View는 재활용 가능한 View의 단위이다. SwiftUI에서는 간편하게 Custom View를 만들 수 있는 방법을 제공한다. 아래에서 구성요소부터, 만들고 사용하는 방법까지 살펴보자.
Custom View의 구성요소
SwiftUI에서 재활용 가능한 CustomView를 만들기 위해서는 View 타입의 struct와 State와 Body 두가지가 필요하다.
- State : CustomView의 UI State를 저장하는 변수. 이 값이 바뀔 때 Custom View가 업데이트 된다. State가 선언되지 않은 변수는 변경이 불가능하다.
- Body : CustomView의 UI를 그려주는 부분. 타입은 항상 some View 여야 하며, 이 부분에 View들을 결합시켜 CustomView를 만들면 된다.
Custom View 만들기
Custom View는 다음 과정을 통해 만들어진다.
1. 먼저 @State Annotation을 이용해 값이 업데이트 되었을 때 Custom View가 보여지는 것이 업데이트 되어야 하는 변수를 선언한다.
2. body부에 1에서 선언된 State를 사용하는 View를 작성한다.
struct RandomNumberView: View {
@State var [variable] : [variable Type] = [default Value] // State 선언
var body: some View {
// CustomView 작성
}
}
위 두가지를 사용하면 아래와 같이 CustomView를 만들 수 있다. 이 View 는 버튼을 클릭하면 number가 랜덤으로 바뀌는 View이다.
struct RandomNumberView: View {
@State var number : Int = 1 // 1. State 선어언
var body: some View { // CustomView 선언
VStack {
Text("The number is \(number)")
Button(action: {number = Int.random(in: 1...1000)},
label: {Text("ClickButton")})
}
}
}
CustomView 사용하기
위의 CustomView는 다른 View에서 다음과 같이 사용 가능하다.
struct ContentView: View {
var body: some View {
ZStack {
RandomNumberView()
}
}
}
위 코드를 실행하면 다음과 같은 화면이 생성된다.
State 살펴보기
struct의 변수는 var로 선언되더라도 struct 내부에서 변경을 주기 위해서 func에 mutating 키워드를 붙여야 했다. 이 효과를 주는 것이 바로 @State이다. 만약 State를 선언하지 않으면 body에서 number을 바꾸려고 할 경우 "Cannot assign to property: 'self' is immutable" 오류가 뜬다. 이유는 struct 내부 변수는 변화가 불가능(immutable) 하기 때문이다.
Cannot assign to property: 'self' is immutable는 stuct에서 내부 변수를 바꾸려고 할 때 뜨는 오류이다.
위 오류는 @State를 선언하면 사라진다. 즉, @State 는 struct의 변수를 변화 가능(mutable)하게 만들면서 이 값이 업데이트 되었을 때 CustomView 를 다시 그려내는 역할을 하는 Annotation이다.
