플러터
- 플러터는 구글에서 만들어 오픈 소스로 공개한 모바일 SDK다.
- 렌더링 엔진, UI 컴포넌트, 테스트 프레임워크 도구, 라우터 등 앱을 만드는 데 필요한 모든 기능을 제공하는 플랫폼이다.
- 플러터를 활용하면 개발자는 앱 특유의 도메인 기능에만 집중할 수 있다.
플러터와 다트
- 다트는 플러터를 위한 프로그래밍 언어로 생산성이 좋고 예측 가능하다.
- 다트는 객체지향이므로 마크업 언어를 사용하지 않고, 다트 언어만으로 사용자 경험을 구현할 수 있다.
- 다트는 JIT(just-in-time) 컴파일과 AOT(ahead-of-time) 컴파일을 모두 지원한다.
- AOT 컴파일러
- 다트 코드를 효율적인 네이티브 코드로 전환
- 대부분의 기능을 커스터마이즈
- JIT 컴파일러
- 핫 리로드 지원
- 빠른 개발 속도와 반복을 지원
누가 플러터를 사용할까?
- 개인 개발자
- MVP를 빠르게 개발하고, 반복 과정을 빨리 진행하는 프로젝트에 좋다.
- 오픈 소스 개발자
- 플러터와 다트, 관련 도구와 라이브러리 모두 오픈 소스로 활용될 수 있다.
- 머티리얼 디자인, 내비게이션 드로어를 활용한 시간을 절약할 수 있다.
- 에어비앤비, 페이스북, 트위터 같은 큰 회사는 핵심 제품에 리액티브 네이티브를 적용한다.
- 이는 자바스크립트 다리, 즉 선능 문제에서 문제가 발생한다.
- 이를 해결하기 위해 플러터를 활용할 수 있다.
플러터의 장점
- 지속적인 버전 출시로 호환성 안정적이며, 다트 언어 역시 충분히 안정화 되었다.
- JIT 컴파일러를 통한 핫 리로드 덕에 빠른 컴파일 시간을 보장한다.
- 다양한 테스팅 위젯 라이브러리를 제공한다.
플러터의 위젯
- 모든 것이 위젯으로 구성되며, 위젯은 앱 뷰의 모든 정보를 정의한다.
- 플러터는 상속보다 조합을 우선시하며, 이를 활용하여 고유한 위젯을 만들 수 있다.
- 각 위젯은 build() 메서드를 통해 정의된다.
- 위젯은 StatefulWidget, StatelessWidget으로 구성된다.
StatelessWidget
- 위젯의 생명이 외부의 힘으로 결졍되며, 상태가 없는 위젯이다.
- StatelessWidget은 언제 파괴되어도 괜찮은 위젯이다.
언제 위젯을 트리에서 제거할지, 언제 리빌드할지 프레임워크에 알리지 않으며, 프레임워크가 위젯을 언제 리빌드해야 하는지 알려주어야 한다.
- StatelessWidget은 새로운 정보에 반응(react)한다.
- 위젯을 빌드하고 갱신하는 과정을 생명주기라고 한다.
StatefulWidget
- StatefulWidget은 State 객체를 가지는 위젯이다.
- setState라는 특별한 메서드를 제공하며, 위젯을 다시 그려야 함을 플러터에 알린다.
- StatefulWidget은 위젯을 빌드하고 갱신하는 과정인 생명주기를 가진다.
플러터 렌더링
내부 동작 원리
- 플러터는 거대한 위젯 트리를 빌드한다.
- 플러터의 위젯은 리액티브며, 외부에서 새 정보를 얻어 반응한다.
- 정보에 따라 위젯을 다시 그리는 동작을 반복한다.
렌더링 과정
- 애니메이션 티커가 동작하면서 그리기 작업을 반복한다.
리스트를 아래로 스크롤하는 등 위젯을 다시 그려야 하는 상황에서, 최종 위치까지 조금씩 이동하여 애니메이션이 부드럽게 일어난다. 이 과정은 요소가 움직여야 하는 시간을 결정하는 애니메이션 티커가 제어한다.
- 애니메이션이 일어나는 동안 플러터는 프레임마다 위젯을 리빌드하고 그린다.
위젯 트리와 레이아웃 조립
- 플러터는 모든 위젯을 빌드하고, 위젯 트리를 만든다.
- 위젯이란 화면에 나타날 요소를 결정하는 데이터와 설정을 말한다.
- 트리를 탐색하면서 위젯의 위치 정보를 수집한다.
- 플러터에서 레이아웃과 크기 제약은 부모에서 자식 위젯 순으로 작성된다.
vs 브라우저
- 부라우저에서는 DOM, CSS 규칙으로 레이아웃을 결정한다.
- CSS의 중첩 특성상 요소의 크기와 위치는 본인이나 부모가 결정하며, 모든 요소의 위치를 결정하려면 DOM 트리를 여러 번 탐색해야 한다.
- 이는 성능 병목 현상을 발생시킨다.
조립 과정
- 플러터는 위젯을 레스터라이징하거나 물리적으로 화면에 픽셀을 칠하지 않고, 조립 과정을 진행한다.
- 리스트의 모든 항목을 다시 빌드할 필요 없이 기존에 빌드하고 그렸던 위젯은 필요한 곳에서 재사용한다.
화면에 그리기
- 위젯이 준비되었다면 엔진은 전체 트리를 그릴 수 있는 뷰로 모은 후, 운영체제를 통해 화면에 그리도록 요청한다.
- 이를 래스터라이징이라고 한다.
요약
- 플러터는 리액티브이다.
- 모든 것을 위젯으로 표현한다.
- State 객체는 오래 살아남으며, 재사용된다.
- 위젯의 제약은 부모가 서술한다.