이 글은 React에 익숙한 제가 SwiftUI를 보고 React와 유사한점, 다른점에 대해서 기록하고자 시작하였습니다.
🍊 apple developer 공식문서와 SwiftUI 튜토리얼을 참고했습니다.
SwiftUI는 2019년 WWDC19에서 공개되었으니, 벌써 등장한지 몇년이나 지난 UI 프레임워크이다.
UIKit으로 개발하는 법은 잘 모르지만, 기존보다 DX가 향상된 개발 방법인 것 같다.
SwiftUI를 React와 비교하면서 생각하게 된 이유는 아무래도 일단 둘 모두 선언형으로 작성할 수 있고, 화면에서 변수를 처리하기 위해서 State를 사용한다는 점이다.
import {useState} from "react";
function App() {
const [etcState, setEtcState] = useState("");
return <div>{etcState}</div>
}
- React의 useState hook
import SwiftUI
struct ContentView: View {
@State private var etcState = ""
var body: some View {
VStack {
Text(etcState)
}
}
}
- SwiftUI의 @State
이 둘의 큰 차이점으로는 useState 훅에서 setState로만 상태값을 바꿔야 하는 React와는 달리, SwiftUI에선 평범하게 @State 변수에 데이터를 재할당하면 된다.
그리고 상위 부모가 하위 자손에게 이 State를 전달할 땐 어떤가? React는 Props, SwiftUI는 @Binding이다.
🌧️ @State, @Binding 이외에도 @Published, @EnvironmentObject와 environmentObject 같은 프로퍼티 레퍼를 사용하거나 @StateObject, ObservableObject를 사용할 수 있다.
import SwiftUI
struct TopView: View {
@State private var title = "Brand New World!"
var body: some View {
DownView(title: $title)
}
}
struct DownView: View {
@Binding var title: String
var body: some View {
VStack {
Text(title)
TextField("Enter title", text: $title)
}
}
}
- SwiftUI의 @Binding
import {useState} from "react";
function Top() {
const [title, setTitle] = useState("Brand New World!");
return <Down title={title} setTitle={setTitle} />
}
function Down({title, setTitle}) {
<div>
<p>{title}</p>
<textarea value={title} onChange={(e) => setTitle(e.target.value)} />
</div>
}
- React의 Props (구조분해할당)
그리고 화면의 라이프사이클에 대한 사용법에 차이가 있다.
React의 useEffect가 더 다양하게 라이프 사이클을 관리할 수 있고, SwiftUI는 화면이 나타났을때, 사라졌을 떄만 로직을 실행시킬 수 있다.
import {useEffect} from 'react';
function App() {
useEffect(() => {
// 화면이 mounted되었을 때 실행
console.log("Hello");
// 화면이 unmounted되었을 때 실행
return () => {
console.log("Bye");
}
}, []);
return <div>Hi!!</div>
}
- react의 useEffect, 아시다시피 추가적으로 상태가 변경되었을 때에도 로직을 실행할 수 있다.
import SwiftUI
struct ContentView: View {
var body: some View {
Text("Screen")
}.onAppear {
print("Hello")
}.onDisappear {
print("Bye")
}
}
- SwiftUI의 onAppear, onDisappear
이외에도 HStack, VStack은 div(특히 flex), ForEach는 map, @EnvironmentObject는 전역 상태 관리등 생각해보면 비슷하지 않나? 싶은 개념들이 꽤 있었던 것 같다.
물론 세부 구현이나 실제 동작은 다르겠지만, SwiftUI는 React 개발자에게 입문하기 쉬운 IOS앱 UI 개발 프레임워크가 아닌가 하는 생각이 들어 이 글을 남기게 되었다.
https://developer.apple.com/kr/xcode/swiftui/
https://developer.apple.com/tutorials/swiftui
'기타' 카테고리의 다른 글
HTTPS, SSL, TLS 정리하기 (0) | 2023.09.12 |
---|---|
Kotlin의 기초 문법 알아보기 (0) | 2023.09.09 |
animation 성능 향상 (requestAnimationFrame) (0) | 2023.09.04 |
Headless UI란? (0) | 2023.09.03 |
선언적 프로그래밍이란? (0) | 2023.08.30 |