[SwiftUI] SwiftUI에서 Custom View 만들기 : State와 body를 사용하는 방법

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이다.

SwiftUI에서 Custom View 만들기

Custom View의 구성요소

Custom View 만들기

CustomView 사용하기

State 살펴보기

티스토리툴바