#1 Architecture (아키텍처)

 

https://ch5c.tistory.com/145

 

[한국어 번역] How Flutter Works: Architecture #DecodingFlutter (1/6)

Flutter란 무엇인가

Flutter는 선언형(declarative)이며 멀티 플랫폼을 지원하는 UI 프레임워크라고 설명하고 있는데 여기서 선언형이라는 것이 무엇일까? 선언형에 대해서 아래와 같이 설명하고 있다.

여러분은 애플리케이션의 상태를 기반으로 동작하는 코드를 작성하고, 그 상태에 해당하는 UI를 한 프레임 단위로 반환합니다. 애플리케이션 상태가 변경되면, Flutter는 해당 코드를 다시 실행하여 UI가 자동으로 반응하고 상태와 동기화되도록 합니다.

즉, 코드를 함수처럼 작성하면 그 함수의 결과로 UI를 그려준다는 것임. 그리고 상태가 바뀐 다면 이 함수를 다시 실행해서 새로운 UI를 자동 생성한다는 뜻.

그렇다면 멀티 플랫폼이란 무엇일까?

“멀티 플랫폼”이란 Flutter가 iOS, Android뿐만 아니라 macOS, Windows, Linux 데스크톱, 그리고 웹까지 아주 다양한 환경에서 실행된다는 의미입니다.

Dart란 무엇인가

플러터의 기반이 되는 언어인 Dart는 클라이언트 최적화 언어로, 런타임 인터프리터 없이 곧바로 네이티브 머신 코드로 컴파일 되게 되므로 저사양 기기에서도 성능이 잘 나옴.

런타임 인터프리터(Runtime Interpreter)란?
프로그램이 실행될 때, 소스 코드나 바이트코드를 한 줄씩 읽고 해석해서 실행하는 방식

Dart는 객체 지향적이고 타입 시스템을 가지고 있어서 Kotlin이나 C#과 유사함. 근데 또 비동기 처리를 위한 단일 스레드 이벤트 루프 모델은 JS와 유사함

단일 스레드 이벤트 루프 모델(Single-Threaded event loop model)이란?
한 개의 스레드로 프로그램을 실행하면서도, 비동기 작업(예: 네트워크 요청, 파일 읽기 등) 을 효율적으로 처리하기 위한 구조

그렇다면 여기서 단일 스레드라는 것은 무엇일까?

바로 프로그램이 한 번에 한 작업만 실행한다는 뜻임. Dart나 JS는 기본적으로 메인 스레드 하나로 동작하는데 멀티 스레드를 쓰지 않아도 되게 만들어, 동시성 이슈를 줄이고 코드를 간단하게 유지할 수 있다고 함.

그리고 이벤트 루프라는 것은 또 무엇일까? 아래 코드를 봐보자.

void main() {
  print('A');

  Future.delayed(Duration(seconds: 1), () {
    print('B');
  });

  print('C');
}

결과는 아래와 같이 나온다.

A
C
B

코드 중간에 비공기 함수(Future)가 호출이 되면 그 작업은 나중으로 미뤄지게 되는데 Dart는 메인 코드가 다 끝날 때까지 실행하고 이후에 이벤트 큐에 쌓인 비동기 작업들을 하나씩 꺼내서 처리함.

즉, 비동기 작업을 큐에 쌓았다가 하나씩 처리하는 구조라고 볼 수 있음.

Widget과 Build 메서드

위젯은 필요한 매개변수를 받아 중요한 렌더 메서드를 실행하는데, 이를 build Method 라고 부름.

일반적인 위젯은 필수 매개변수를 위한 선택적 생성자를 가지고 있으며 BuildContext라는 중요한 매개변수를 받는 build 메서드를 포함함.

BuildContext는 화면의 크기, 방향, 글꼴 크기 조정, 텍스트 방향과 같은 접근성 정보 등 중요한 런타임 정보에 접근 할 수 있게 해줌.

빌드 메서드는 항상 하나의 위젯을 반환해야 하며 부작용이 없는 순수 함수여야만 함.

빌드 메서드 내부에서 다양한 계산을 수행할 순 있지만 결국에는 반드시 위젯을 반환 시켜야 함.

Hot reload와 내부 트리 구조

각 위젯의 빌드 메서드를 재귀적으로 호출(탐색)하여 자연스럽게 트리 구조를 형성하게 됨.

Flutter 프레임워크는 상태와 렌더링을 분리하는 명확한 추상화 계층을 가지고 있어서 이를 통해 상태 유지 핫 리로드(stateful hot reload)가 가능해짐.

핫 리로드란 실행 중인 앱을 멈추지 않고 비즈니스 로직이나 UI 코드를 1초도 안 되는 시간 안에 다시 렌더링할 수 있게 해주는 기능으로 앱의 현재 상태는 그대로 유지되게 됨.

이러한 추상화는 작성한 위젯 뒤에서 생성되는 다른 트리 구조들로 나타나게 되는데 세 가지 주요 트리 구조가 있음.

• 위젯 트리 (Widget Tree)
• 엘리먼트 트리 (Element Tree)
• 렌더 트리 (Render Tree)

Flutter 프로젝트의 구성 요소

Flutter 프로젝트는 세 가지 핵심 요소로 구성됨.

1. 네이티브 프로젝트 (Native project)
   (ex: iOS의 XCode 프로젝트, 웹의 HTML)
2. Flutter 프레임워크와 작성한 Dart 코드
   (사용자 이벤트 처리 및 프레임 렌더링 담당)
3. Dart 코드를 실행하기 위한 플랫폼별 연결 코드

또한 플러터의 렌더링 엔진은 Skia, Impeller 이렇게 두 가지가 있는데 일부 플랫폼은 여전히 Skia를 사용하고 있으며 일부는 이미 Impeller로 전환되어 있는 상황임.

Skia 렌더링 엔진이란?
Google Chrome, Android 등 수많은 제품에서 사용되는 오픈소스 2D 그래픽 엔진

Flutter 레이어 케이크

여기에는 앞으로 다룰 다양한 주제들이 포함되어 있음.

플랫폼별 임베더, 그래픽과 운영체제 통신을 담당하는 엔진, 그리고 Dart로 작성된 Flutter 프레임워크까지