Flutter 빠르게 파헤치기

Flutter란?

• 앱 개발하는 방식에는 네이티브 앱 개발 방식과 크로스 플랫폼 앱 개발 방식 이렇게 2가지로 나뉩니다. 플러터는 이 중에서 크로스 플랫폼 앱 개발 방식에 속합니다.

  • 네이티브 앱 개발 방식은 각 운영체제에 종속적으로 개발하는 방식으로, 각 운영체제의 모든 기능에 대해 공식 지원과 문서화가 잘 되어 있습니다.
  • 크로스 플랫폼 앱 개발 방식은 말 그대로 여러 플랫폼에 동시에 사용될 수 있는 방식입니다. 대신 단점으로 느린 속도와 UI 커스터마이징 제한을 가지고 있다는 단점을 가지고 있습니다.

• 구글에서 개발한 크로스 플랫폼 프레임워크로 Dart언어를 사용합니다.

• Flutter 3.0버전부터는 윈도우, 맥, 리눅스, iOS, Andrioid, Web 까지 총 6개의 플랫폼을 모두 공식적으로 지원합니다.

즉 플러터는 하나의 언어로 모바일앱, 테스크톱 앱, 웹사이트, 임베디드 시스템까지 개발이 가능합니다! :o

어떤 특징을 가지고 있나요?

1. UI와 비즈니스 로직을 모두 Dart언어로 작성합니다, 반면 Reative Native는 UI는 JSX로 작성하고, 로직은 Javascript로 작성합니다.

2. 픽셀 단위로 직접 화면을 그립니다. 시스템 UI 라이브러리에 의존하지 않고, Material & Cupertino 등의 내장 위젯을 픽셀 단위로 직접 그립니다. Dart 코드는 SKia에 의해 렌더링되는 네이티브 코드로 변환됩니다.

3. Hot Reload 앱을 재시작하지 않고, 코드 변경사항을 반영할 수 있습니다. 즉 매번 UI 수정시마다 App을 재시작할 필요 없습니다.

Flutter와 Dart

Flutter는 프로그래밍 언어가 아닙니다, 자바의 Spring 처럼 Dart의 프레임워크입니다.

Dart 문법 빠르기 훑기

기본 내용은 스킵하고, 독특한 점만 담았습니다. class, 상속, 반복문, 조건문 등등 기초적인 내용은 Java와 매우 유사합니다.

• dynamic Flutter는 기본적으로 Type-Safe한 언어지만 dynamic변수를 쓰면 javascript처럼 Type-Safe하지 않게 돌 수도 있습니다.

dynamic x = 1;
x = "abc";

또한 Kotlin처럼 기본적으로 타입은 Not Nullable 타입이며, Nullable인 경우는 ?키워드를 붙여야 합니다.

String? nickname = null;

var언어를 사용하면 처음 할당되는 변수가 그 변수의 타입이 됩니다.

• record type

tuple 자료형입니다. record 타입은 불변입니다. 즉 크기와 변수 타입을 생성 후에는 변경할 수 없습니다. 또한 record type은 하나의 변수에 여러 타입의 값을 할당 할 수 있습니다.

(String, bool, {int a, int b}) record = ("first", a: 2, b: 2, true);

print(record.$1); // first
print(record.a); // 2

특이하게 $1,$2등의 번호로 호출하거나, 구조분해할당 문법도 사용 가능합니다.

• class type

클래스 생성시 특이한점은 생성자 문법이 Java에 비해 휠씬 간결하며, 직관적입니다. 예를 들어 id 타입 변수를 초기화하려면 생성자에 동일한 이름의 매개변수를 넣어주면 됩니다.

class Cat {
  final String id;

  Cat({
    required this.id,
  });
}

Flutter의 UI 단위, Widget!

Widget은 Flutter에서 UI를 구성하는 기본 단위입니다, 개발자가 UI를 세부적으로 직접 변경하기보다 Widget을 마치 레고처럼 조립해서 만들어내고, 변경될 수 있는 변수는 상태를 사용해서 표현합니다. 이를 Flutter에서는 선언형 UI(Declarative UI)라고 합니다.

React와 비교해보면 Flutter Widget은 다음과 같은 특징을 가집니다.

특징	React 컴포넌트	Flutter 위젯
프레임워크	React	Flutter
언어	JavaScript/TypeScript	Dart
UI 구조	가상 DOM을 사용하여 UI를 업데이트	위젯 트리 구조로 UI를 구성
상태 관리	useState, useEffect 등 Hook을 사용	setState(), Provider 등 사용
렌더링 방식	가상 DOM에서 실제 DOM으로 변환 후 렌더링	직접 화면에 그려서 렌더링 (Skia 엔진 사용)
플랫폼 지원	웹, 모바일 (React Native), 데스크톱	웹, 모바일(Android, iOS), 데스크톱, 임베디드
컴포넌트 분리	클래스형/함수형 컴포넌트로 분리	모든 것이 위젯으로 분리 (Stateful, Stateless)
성능	성능은 가상 DOM과 브라우저 성능에 의존	네이티브 성능에 가까운 렌더링 제공
스타일링	CSS 또는 스타일 객체를 사용하여 스타일링	위젯 기반으로 스타일링 (예: Container)

Flutter 에서 Widget은 두 종류가 있습니다.

특징	Stateful 위젯	Stateless 위젯
상태 관리	내부 상태를 가질 수 있으며, 상태 변경 가능	상태를 가질 수 없고, 불변 데이터만 렌더링
라이프사이클	위젯의 상태에 따라 라이프사이클이 변화	라이프사이클이 단순, 한 번만 렌더링 됨
사용 목적	동적인 UI를 구현할 때 사용	고정된 UI, 상태가 변하지 않는 UI에 사용
상태 변경 방법	setState()를 호출하여 상태를 변경 및 재렌더링	상태 변경 불가, 재렌더링은 데이터가 변할 때만
예시	폼 입력, 애니메이션, 카운터 등	텍스트, 아이콘, 단순 레이아웃 등
성능	상태 변경 시마다 다시 렌더링되어 성능 부담 있음	한 번만 렌더링되어 성능에 유리

Flutter에서 상태관리, Stateful Widget

앱 내에는 고정된 텍스트 뿐 만 아니라 사용자와 상호작용에 의해 변화하는 텍스트도 있습니다. 데이터가 변경됨에 따라 화면을 갱신하게 되는 데이터를 상태(State)라고 부르고, 말 그대로 상태 값을 관리하는 것을 상태 관리라고 합니다.

Flutter에서는 변수를 상태로 관리하려면 2가지 조건을 만족해야 합니다.

1. State 를 상속받은 클래스 내부에서 선언되어야 합니다.
2. 변수의 값을 변경할때, Flutter에서 제공하는 방식으로 변경해야 합니다.

class _DetailScreenState extends State<DetailScreen> {
  bool isLiked = false; // 1. state 상속받은 클래스 내부에서 선언
  @override
  Widget build(BuildContext context) {
    //...
      IconButton(
          onPressed: () {
            setState(() {
              isLiked = !isLiked; // 2. 상태값을 갱신
            });
          }    
    //...
      )

Flutter에서 라이브러리

플러터에서 사용되는 라이브러리들은 pub.dev 에서 확인이 가능하며, 독특한점은 라이브러리에 점수를 매깁니다.

별도로 인증받은 라이브러리는 인증 마크까지 별도로 표기하고 있습니다.