[SwiftUI] 선언형UI (declarative UI Frameworks)

목차)
1. 선언형 vs 명령형 프로그래밍
2. 선언형UI 란?
3. SwiftUI 코드 예시

 

SwiftUI의 핵심은 선언형UI  라는 것이다.

1. 선언형 vs 명령형 프로그래밍

선언형UI 가 무엇인지 알아보기 위해 먼저 선언형이란 무엇인지 이해해야 한다.

선언형 프로그래밍의 반대 개념인 명령형 프로그래밍과의 차이를 통해 알아보자.

 

	선언형	명령형
설명	원하는 목표를 선언  목표는 주로 함수, 규칙, 제약 등의 형태로 표현되며 시스템이  내부 동작을 추론하여 실행	프로그램의 상태와 결과를 변경 및 달성하기 위하여  연산들의 순서적인 흐름을 명시적으로 작성
형태	함수형, 논리 프로그래밍	절차지향, 객체지향
장점	1) 코드의 가독성과 유지보수성 향상  2) 추상화 수준이 높아져, 문제 자체에 집중 할 수 있음  3) 병렬화, 최적화 등의 이점을 쉽게 얻음	1) 직관적인 제어  2) 세밀한 제어  3) 효율적인 최적화  4) 다른 프로그래밍 패러다임과의 결합 용이  5) 널리 알려진 개념과 기술
단점	1) 어려운 학습 곡선 ( 재귀, 고차 함수 등의 개념 )  2) 제한된 제어  3) 성능 문제	1) 복잡성 높음  2) 가독성 낮음  3) 코드의 재사용성 낮음  4) 병렬화 어려움

 

2.  선언형 UI  란?

위에서 정리한 선언형 개념에 따라 선언형UI를 정의하자면 다음과 같다.

개발자가 원하는 UI의 결과물을 명시적으로 선언하고 해당 결과물을 얻기 위한 세부 동작은 프레임워크에 위임한다.

 

[특징]

1. UI의 구성요소, 레이아웃, 스타일 등을 명시적으로 선언하다.

2. UI의 최종 결과를 중심으로 생각한다.
- 상태 변경에 따른 UI 갱신은 프레임워크가 자동으로 처리한다.

3. 자동 갱신
- 상태와 UI사이의 연결을 자동으로 처리한다.
- 개발자가 UI상태를 직접 변경하는 대신 변경 상태를 감지하고 UI에 반영하는 것은 프레임워크가 한다.

4. 추상화
- UI추상화 수준을 높혀, 개발자가 UI의 구체적인 세부사항을 신경쓰지 않고 UI를 개발할 수 있게 한다.

 

[대표 프레임워크]

iOS	AOS	WEB
SwiftUI	Compose	React

 

3.  SwiftUI 코드 예시

 

1. VStack(레이아웃: Vertical Stack)을 그린다.

2. VStack(레이아웃)안에는 Image 와 Text가 포함되어 있어야 한다.

3. Text는 "Hello, world" 라고 화면에 나오도록 한다.

 

개발자가 어떻게 위의 코드를 작성해나가는지 간략하게 표현해본 것이다.

 

UIKit 로 개발해본 경험이 있다면,  constraint는 어떻게 설정해주는지 궁금할 수 있을것 같다.

 

SwiftUI, 선언형UI의 장점이 여기서 나타난다.

개발자는 화면 크기에 맞춰 constraint를 직접 설정하지 않아아도 된다.

 

Vertical Stack으로 UI를 쌓아 갈거다 라는 Layout을 명시적으로 선언해주면 화면에 맞춰 constraint를 설정하는 일들은 SwiftUI 프레임워크가 해주는 것이다.

 

개발자는 레이아웃에 UI들을 어떤 방향으로 쌓아갈지를 고민하고, 결정하면 다른 설정 부분들은 SwiftUI 프레임워크가 해준다.

 

여기서 Text를 빨간색으로 표현하고 싶다고 해보자.

 

우리가 작성한 Text("Hello, world!") 라는 UI Method 에 chaining을 하여, 아래와 같이 작성하면 된다.

//...
Text("Hello, world!")
	.foregroundColor(.red)
//...