React 개발자가 공부해본 SwiftUI

이 글은 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/

SwiftUI 개요 - Xcode - Apple Developer

https://developer.apple.com/tutorials/swiftui

Introducing SwiftUI | Apple Developer Documentation