[Flutter][번역] Flutter internals (1)

출처 : 오리고기님

목적

코드를 복사붙여넣기 하는 코더가 되는것 같아 내부적으로 플러터가 어떻게 돌아가는지에 대한 갈망이 항상 있었는데 좋은 글이 있어 읽어보면서 정리하려고 한다.

내용

플러터 내부구조

플러터는 내부적으로 어떻게 작동할까?
위젯, 엘리멘트, 빌드컨텍스트, 랜더오브젝트, 바인딩이란 무엇일까?

1부:사전지식

디바이스에서 앱을 실행하면 화면이 표시된다.
화면은 픽셀들이 모여있는것이고, 디바이스는 화면을 통해 터치한 손가락의 위치를 인식한다.
이러한 상호작용으로 디바이스는 사용자에게 시각적인 효과를 제공한다.

• 사용자 이벤트
• 네트워크
• 애니메이션
• 다른 외부 센서

화면의 이미지랜더링은 디스플레이 하드웨어가 담당한다.
하드웨어는 초당60회 간격으로 디스플레이를 새로 고침합니다.
단위는 Hz 입니다.

디스플레이 장치는 GPU(Graphics Processing Unit)로부터 화면에 표시할 데이터를 수신받고,
일부 모델(도형,글자)를 신속하게 영상으로 생성하도록 최적화 및 설계되어 있습니다.
GPU가 표시할 이미지(Frame Buffer)를 성성하여 하드웨어에 전송할 수 있는 초당 횟수를 Frame Rate라고 합니다. 단위는 fps입니다.

이 article에서 GPU/하드웨어와 화면에 의해 랜더링된 2차원 평면 이미지의 개념을 왜 다루는지?
플러터 위젯과의 관계는 무엇일까?

플러터 애플리케이션의 주 목적은 2차원 평면 이미지를 구성하고 상호작용하는것이기 때문에 작동원리를 이해하는것이 더 쉽다고 한다.

코드와 물리적 장치 사이의 인터페이스
플러터에 관심있는사람이라면 아래에 플러터 High-Level-Architecture를 묘사한 그림을 본 적이 있을 것입니다.

Dart를 사용하여 플러터 앱을 작성할때 플러터 프레임워크(녹색) 수준으로 유지됩니다.

플러터 프레임워크는 윈도우라는 추상화 계층을 통해 플러터 앤진(파랑색)과 상호작용합니다.
추상화 계층(윈도우)은 일련의 API를 노출하여 장치와 간접통신합니다.

아래 경우에 대해서 플러터 앤진은 플러터 프레임워크로 추상화 계층을 통해 이벤트를 전달한다.

1. 디바이스 레벨에서 특정 이벤트 발생(방향, 설정, 메모리, 앱 실행상태)
2. 화면 레벨에서 일부 이벤트가 발생(Gesture)
3. 플랫폼 채널에서 일부 데이터 전송
4. 플러터 앤진이 새프레임을 랜더링할 준비가 되었을때

플러터 프레임워크는 플러터 앤진 프레임 렌더링에 의해 구동됨

아래의 경우를 제외하고 플러터 앤진 프레임 랜더링에 의해 트리거되지 않고 플러터 프레임워크 코드가 실행되지 않습니다.

• 화면
• 플랫폼 메시지(GPS)
• 디바이스 메시지(진동, 메모리, 백그라운드, 장치셋팅)
• Future or http 응답

플러터 프레임워크는 플러터 앤진 프레임 랜더링의 요청이 없으면 시각적 변화를 적용하지 않습니다.

(플러터 앤진에 의해 트리거되지 않고 화면,애니매이션을 동작시키는게 가능하지만 그렇게 하지 않는게 좋다)

Gesture에 의해 코드가 내부적으로 어떻게 동작할까?

만약 시각적 변경을 원할경우 플러터 앤진에 무언가를 랜더링해야한다고 알려주어야 한다.
그다음 Refresh할때 플러터 앤진은 플러터 프레임워크가 코드를 실행하도록 요청하고 랜더링할 새로운 장면을 제공합니다.

가장 큰 문제는 플러터 앤진이 랜더링을 기반으로 전체 애플리케이션 동작을 어떻게 조정하는가 입니다

1. 일부 외부 이벤트(Gesture, http response)또는 Future도 랜더링 업데이트 하기 위한 몇가지 작업을 시작할 수 있다. 메시지를 플러터 앤진에 전송하여 알려준다/(Schedule Frame)
2. 플러터 앤진이 랜더링 업데이트를 진행할 준비가 되면 비긴 프레임 요청을 보낸다
3. 플러터 프레임워크는 비긴프레임 요청을 가로채서 티커와 관련된 작업(애니메이션)을 실행합니다. 이 작업 이후 프레임 랜더링에 대한 요청을 다시 전송할 수 있습니다.
4. 플러터 앤진에서 드로우 프레임을 내보냅니다.
5. 드로우 프레임은 플러터 프레임워크에서 가로채서 구조, 크기 측면에서 레이아웃 업데이트와 관련된 작업을 찾습니다.
6. 이 작업이 완료되면 페인팅 측면에서 레이아웃 업데이트와 관련된 작업을 진행한다.
7. 화면에 그려야 할 것이 있으면 새 스크린을 플러터 앤진으로 랜더링하여 화면을 업데이트 합니다.
8. 플러터 프레임워크는 랜더링이 완료된 후 랜더링과 관련없는 다른 후속작업이 실행된 후 실행할 모든 작업들을 실행합니다.

요약하면 디바이스에서 이벤트를 플러터 앤진에 넘기고(스케쥴프레임) 앤진은 프레임워크에 요청넘기고(비긴프레임) 프레임워크는 비긴프레임 요청받아서 애니메이션 실행 그리고 랜더링에 대한 요청을 다시 전송, 플러터 앤진에서 레이아웃 랜더링요청 보냄(드로우 프레임) 프레임워크에서 구조, 크기 그림 다그리면 랜더링과 상관없는 후속작업 함 인것같음.

랜더뷰, 랜더오브젝트
랜더링트리란?

화면은 픽셀이고 플러터 프레임워크는 위젯을 화면에 랜더링한다.
화면에 랜더링되는것을 랜더링오브젝트라고 하며 다음과 같은 경우에 사용한다.

• 화면의 일부 영역을 치수, 위치, 기하학적 측면뿐만 아니라 랜더된컨텐츠 측면에서도 정의한다.
• 제스쳐에 의해 영향을 받는 화면의 영역을 식별한다.
  모든 랜더 오브젝트의 집합은 랜더 트리라고 불리는 트리를 형성한다.
  그 트리의 루트에서 랜더뷰가 있다.
  랜더뷰는 랜더트리의 전체 출력되는 표면을 나타내고 그 자체가 랜더오브젝트의 특수버전이다.

위젯과 랜더 오브젝트의 관계는 나중에 설명한다.

1. 바인딩의 초기화
   플러터 앱을 시작할때 시스템은 runApp매서드를 호출

runApp 메서드를 호출중에 플러터 프레임워크는 플러터 프레임워크와 플러터 앤진 사이의 인터페이스를 초기화합니다. 이러한 인터페이스를 바인딩 이라고 합니다.

바인딩 - 소개
바인딩은 플러터 엔진과 플러터 프레임워크 사이에 접착제 같은것이다. 바인딩을 통해서만 앤진과 프레임워크간 데이터 교환이 가능하다. 랜더뷰는 예외

각 바인딩은 활동카테고리 별로 재 그룹화 된 업무,액션,이벤트 집합을 처리한다.

플러터 프레임워크는 8개의 바인딩을 계산한다.
1. 스케쥴러바인딩
2. 제스쳐바인딩
3. 랜더러바인딩
4. 위젯바인딩
===== 이글에선 4개까지만 다룸
5. 서비스바인딩: 플랫폼 채널에서 보낸 메세지 처리
6. 페인팅바인딩: 이미지 캐시를 처리
7. 시멘틱바인딩: 시멘틱과 관련된 모든것을 구현하기 위해 예약됨
8. 테스트위젯플러터바인딩 : 위젯테스트라이브러리에 사용
또한 위젯플러터바인딩을 언급할 수 있지만 실제로는 바인딩아니라 바인딩 초기화입니다.

바인딩에대해 알아보자
바인딩은 두개의 주요한 역할을 수행한다.
1. 플러터 앤진한테 바쁘지않을때 무엇을 랜더링할지, 언제다시 모닝콜 할지 알려돌라고 한다.
2. 콜을 리슨하고 반응한다.
그러면 스케쥴러바인딩은 언제 모닝콜을 요청할까?

스케쥴러바인딩

애니메이션이 있다고 가정했을때 티커에 의해 통제되고 틱으로 콜백을 실행하기 위해 호출됩니다. 이러한 콜백을 실행하려면 플러터 앤진에 다음 리프레시(비긴프레임)시에 깨우도록 지시해야한다. 그리고 티커에 의해 콜백을 호출하여 작업수행, 해당 작업이 끝날때 티커가 여전히 진행되어야 하는 경우 다른 프레임을 예약하기 위해 스케쥴러바인딩을 호출한다.

레이아웃적용을 변경할때 스케쥴러바인딩을 호출하여 플러터 엔진한테 플러터 프레임워크가 다른 프레임을 예약합니다.

제스쳐바인딩

이 바인딩은 손가락의 관점에서 상호작용을 수신한다. 특히 손가락과 관련된 데이터를 받아들이고 제스쳐의 영향을 받는 화면의 부분을 결정한다. 그다음 화면의 부분에 대해 알린다.

랜더러바인딩

바인딩은 플러터 엔진과 랜더러 트리 사이의 접착제 입니다. 두가지 역할이 있다.
1. 엔진에서 발생하는 에벤트를 듣고 장치 설정을 통해 사용자가 적용한 변경 사항을 시각적/의미적 으로 나타내는것
2. 엔진 디스플레이에 적용 할 변경 항목을 제공하는것
화면에 랜더링할 변경사항을 제공하기 위해 이 바인딩은 파이프라인오너를 구동하고 RenderView를 초기화합니다.
위젯 구조 변경 처리는 빌드오너를 통해 수행됩니다.
빌드오너는 리빌드가 필요한 위젯을 추적하고 위젯 구조 전체에 적용되는 또 다른 작업을 처리한다.

결론

디바이스 <=> 플러터앤진 <=> 플러터 프레임워크
(제스쳐) (바인딩)
(비긴프레임,스케쥴러프레임,드로우프레임)