일단 이전 포스팅에서 얘기했듯이 Widget들과 SwiftUI를 짤막하게나마 비교 해볼까 한다.

일단 정의부터 보도록 하자

Flutter의 StatelessWidget, StatefulWidget

Flutter에서는 UI를 구성하는 데 주로 두 가지 유형의 위젯, 즉 StatelessWidget StatefulWidget 사용한다.

StatelessWidget

StatelessWidget은 불변성을 가진 위젯으로 한 번 생성되면 그 속성이 변경되지 않는다.

UI의 정적 표현에 적합한 위젯이며 위젯이 생성된 후 업데이트 되지 않는다.

따라서 StatelessWidget은 내부 데이터가 변경되어도 자체적으로 다시 렌더링 되지 않는다.

StatefulWidget

StatefulWidget은 가변성을 가지는 위젯으로 앱이 실행되는 동안 여러 번 다시 그려질 수 있다.

StatefulWidget은 내부 데이터가 변경될 때 마다 다시 렌더링 될 수 있다.

이러한 특성 때문에 UI가 동적으로 변경되어야 하는 경우에 적합하다.

SwiftUI

SwiftUI는 선언적 구문을 사용하여 UI를 구성한다.

뷰의 상태에 따라 UI를 자동으로 업데이트 한다.

SwiftUI는 뷰의 초기 시간을 저장하고, 뷰가 렌더링을 완료하는 데 걸린 시간을 계산하여 렌더링 성능을 측정한다.

Flutter와 SwiftUI의 비교 및 요약

간단하게 요약하자면

StatelessWidget은 불변성을 가진 정적 위젯으로 위젯이 한 번 생성되었다면 그 후 UI의 업데이트가 없지만
가변성을 가진 StatefulWidget과 SwiftUI는 내부 데이터의 변경에 따라 UI가 다시 그려질 수 있다.

UI구성 방식

Flutter UI구성 방식

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello, World!'),
        ),
        body: Center(
          child: Text('Hello, World!'),
        ),
      ),
    );
  }
}

이번에는 간단하게 Hello, World!를 출력하는 코드를 가져왔다.

home의 위젯으로 Scaffold라는 위젯을 생성하는데 얘는 왜 계속 나올까?

플러터 문서를 살펴보면 Implements the basic material design visual layout structure.

해석하자면 기본적인 Material design의 시각적 레이아웃 구조를 구현한다.

요컨데 Materail design의 애플리케이션을 구현하는 데 가장 기본적인 레이아웃 구조를 제공한다는 것이다.

Scaffold는 App bar, Drawer, Snackbar, Body, Floating action button등 여러 Material Design 위젯을 포함할 수 있는 API를 제공한다.

SwiftUI의 UI구성 방식

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, World!")
    }
}

일단 기본 코드지만 Scaffold에 상단바가 있었으니까 SwiftUI도 추가해보자

mport SwiftUI

struct ContentView: View {
    var body: some View {
    	NavigationView {
        	Text("Hello, World!")
            .navigationBarTitle("SwiftUI")
        }
    }
}

Scaffold에 AppBar가 있다면 SwiftUI는 NavigationView에 NavigationBar를 추가해주면 된다.

어떻게 끝내지...?

끝!

(후기 1)
생각나는거 있으면 추가... 해야겠지...???