UI Framework란?
애플리케이션이나 웹사이트의 사용자 인터페이스(User Interface, UI)를 효율적으로 설계하고 구현하기 위해 제공되는 라이브러리나 툴의 집합
제공기능
-
위젯 및 컴포넌트: 미리 정의된 위젯이나 컴포넌트(버튼, 입력 필드, 리스트, 테이블, etc.)
-
레이아웃 관리: 다양한 레이아웃 시스템
-
스타일링: UI 요소 스타일링 옵션(색상, 폰트, 여백, 그림자 등)
-
이벤트 처리: 사용자가 UI 요소와 상호작용할 때 발생하는 이벤트를 처리하는 메커니즘 (버튼 클릭이나 입력 필드에 텍스트를 입력하는 등의 동작을 처리)
종류
웹 개발용 UI 프레임워크
React, Angular, Vue.js, Bootstrap, etc.
모바일 애플리케이션용 UI 프레임워크
Flutter
- Google에서 개발한 오픈 소스 UI 프레임워크.
- 하나의 코드베이스로 Android, iOS, 웹, 데스크탑 등 multi 플랫폼에서 동작하는 애플리케이션 개발
React Native
- Facebook에서 개발한 프레임워크.
- javascript를 사용해 Android와 iOS용 네이티브 애플리케이션을 만들 수 있다.
SwiftUI
...
Xamarin
...
Flutter의 기본구조
Flutter는 위젯을 중심으로 구성되며, 이러한 위젯들이 트리 구조를 형성하여 애플리케이션의 UI를 구성한다.
main() 함수
애플리케이션을 실행하기 위한 시작점.
runApp() 함수를 호출하여 루트 위젯을 실행한다.
void main() {
runApp(MyApp());
}위젯
UI의 기본 단위. Flutter는 위젯을 통해 모든 화면 요소를 구성한다.
위젯은 크게 StatelessWidget과 StatefulWidget으로 나뉜다.
StatelessWidget: 상태가 없는 위젯.
화면에 고정된 UI 요소를 표현할 때 사용.StatefulWidget: 상태를 가질 수 있는 위젯.
사용자와의 상호작용이나 데이터 변화에 따라 UI가 변경될 수 있는 요소를 표현할 때 사용.
기타 주요 위젯
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Hello, Flutter!'),
),
body: Center(
child: Text('Welcome to Flutter'),
),
),
);
}
}애플리케이션 전체 구조 정의 위젯
화면 이동, 테마, 라우팅 등을 관리하는 위젯
MaterialApp: Google의 Material Design(Android)을 따르는 애플리케이션에 사용CupertinoApp: Apple의 iOS 스타일 디자인을 따르는 애플리케이션에 사용
기본 레이아웃 구조를 제공하는 위젯
앱바, 바텀 내비게이션 바, 플로팅 액션 버튼 등 기본적인 화면 구성 요소들을 쉽게 설정할 수 있도록 도와주는 위젯
Scaffold
코드 기타 요소
BuildContext : 위젯 트리 내에서 특정 위젯의 위치를 나타내는 객체. 위젯이 다른 위젯들과 어떻게 상호작용하는지를 정의할 수 있다.
여러 화면 관리•이동
RouteNavigator: 스택 구조를 사용하여 화면 간의 이동을 관리. 특정 화면을 푸시하거나 팝할 수 있다.
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondPage()),
);State Management
위젯의 상태 변화에 따라 UI가 업데이트됨에 따라 필요한 관리.
간단한 애플리케이션에서는 StatefulWidget의 setState() 메서드를, 규모가 큰 애플리케이션에서는 Provider, Bloc, Riverpod 같은 상태 관리 패턴이나 라이브러리를 사용한다.
Flutter의 언어, Dart
Dart는 Google에서 개발한 객체 지향 프로그래밍 언어로, Flutter 애플리케이션을 개발하는 데 사용된다. JavaScript와 유사한 문법을 가지고 있다.
기본 데이터 타입
int age = 30;
double height = 1.67;
String name = 'Gaeddong Lee';
bool isStudent = false;
List<int> numbers = [1, 2, 3];
Map<String, int> scores = {'math': 100, 'english': 100};변수 선언
var, final, const를 사용
var cityName = 'Seoul';
// 타입을 명시하지 않고 변수를 선언.
// Dart가 자동으로 String 타입으로 추론
final String country = 'Korea';
// 이후 변경 불가
const int year = 2024;
// 컴파일 시점에 값을 설정해야 함.
// 값이 변경되지 않는 상수를 선언함수 선언
return 타입을 명시할 수 있으며, 인자를 받을 수도 있다.
int add(int a, int b) {
return a + b;
}
void printMessage(String message) {
print(message);
}람다식(익명 함수)도 지원한다.
var multiply = (int a, int b) => a * b;⌊ 익명함수: 이름이 없는 함수로, 나중에 다시 부를 일이 없으므로 프로그램 안에서 일시적으로 한 번만 사용되고 버려져도 되는 객체일 때 사용한다. (메모리 관리에 효과적)
조건문
C 계열 언어와 유사하다.
int score = 85;
if (score >= 90) {
print('A');
} else if (score >= 80) {
print('B');
} else {
print('C');
}반복문
for, while, do-while 반복문을 사용할 수 있다.
for (int i = 0; i < 5; i++) {
print(i);
}
int i = 0;
while (i < 5) {
print(i);
i++;
}
int j = 0;
do {
print(j);
j++;
} while (j < 5);클래스와 객체
Dart는 객체 지향 언어이기 때문에 사용 가능하다.
class Person {
String name;
int age;
Person(this.name, this.age); // 생성자
void introduce() {
print('Hello, my name is $name and I am $age years old.');
}
}
void main() {
Person person = Person('Alice', 30);
person.introduce();
}상속과 다형성
class Animal {
void makeSound() {
print('Some sound');
}
}
class Dog extends Animal {
@override
void makeSound() {
print('Bark');
}
}
void main() {
Animal animal = Animal();
animal.makeSound(); // 출력: Some sound
Dog dog = Dog();
dog.makeSound(); // 출력: Bark
}예외 처리
try, catch, finally
void main() {
try {
int result = 10 ~/ 0; // ~/ 연산자는 정수 나누기 연산자
} catch (e) {
print('Exception caught: $e');
} finally {
print('This will always execute');
}
}