SwiftUI - 선언형 UI

Whale·2022년 6월 14일
1

SwiftUI 기초학습

목록 보기
1/7

Swift UI 에 적용된 개념.
UI file(StoryBoard, xib) 이 없는것은 둘째로 하고, 코드부터가 생소한 마당에 개념도 바뀌었다고 하니 난감하다. preview 도 역시나 버벅버벅. (m시리즈 맥을 사면 나아지려나)

기존에 쓰던 방식

기존에 Swift 에서 UI를 그리고 데이터를 반영할땐 항상 이런식이었다.

  1. UI작성( StoryBoard, xib, code 등을 통해서.)
  2. UI와 연결된 변수에 이벤트에 따라 변경될 부분을 지정한다.
setText, setColor, setFont ...

이런 방식을 명령형UI 라고 칭하며, 각 단계별로 어떻게 동작할지에 중점이 있다.
이게 나에겐 일반적인 방식이었다.

새로운 방식

Swift UI에서는 이 방식이 아래와 같이 변경되었다.

  1. UI를 작성할때부터 변경될 상태(state) 를 먼저 잡아두고,
  2. 이 상태가 변경될때 뷰가 어떤식으로 그려질지 정의한다.

이게 선언형 프로그래밍.

지정된 상태를 보고 어떻게 동작할지 정의한다? 무언가 익숙한데... 익숙한듯 다른데... 여기까지 사고가 진행되고 나자 자연스레 Rx가 머리를 스쳤다.

reactive programming is a declarative programming paradigm concerned with data streams and the propagation of change.
반응형 프로그래밍이란, 데이터의 흐름과 변경사항의 전파에 중점을 둔 **선언적 프로그래밍** 패러다임이다.

swift ui 가 동작하는 코드와 rx에서 사용하던 코드를 대조해보면 좀 더 느낌이 비슷하다.

//swiftui
@State var modelValue: Double = 0
var body: some View {
	VStack {
		Slider(value: $modelValue)
		Text(String(modelValue))
	}
}


//rxswift
let modelValue = BehaviorRelay<Float>(value: 0)
let slider = UISlider()
slider.rx.value
	.bind(to: modelValue)

let label = UILabel()
modelValue
    .map { String($0 }
    .bind(to: label.rx.text)
  

아직은 조금 두루뭉실하지만, 여기까지 이해하고나니 SwiftUI 를 작성할때 코드모양세가 잡혔다.
나머지는 클론코딩을 해보며 작업방식에 익숙해지는일.
(배워야할게 많아서 큰일이다...)

profile
그저 오래된 iOS 개발자.

0개의 댓글