Flutter의 아키텍처와 BuildContext

 

Flutter에서 BuildContext를 이용해 조상 widget에 접근할 수 있다. React 사용자라면 Recoil과 같은 상태 관리툴에 익숙할 것이다. 마치 React의 Recoil처럼, Flutter애서는 BuildContext를 통해 아주 편리하게 상위 컨텍스트에 접근가능하다. 이번 포스팅을 통해 Flutter의 아키텍처와 동작원리를 간략히 살펴보고, BuildContext에 대해 좀 더 확실히 살펴보자.

---

1. Flutter framework의 Layers

Flutter는 모든 것이 widget이다. 단 한 개의 단어부터 한 페이지에 이르기까지 플러터의 모든 것은 위젯이다. 위젯이란 정확히 무엇일까?

 

By Mesotes

플러터는 위와 같은 구조로 추상화되어 있다. 보통 개발자들은 최상위 단의 Material, Cupertino, 혹은 그 바로 아래 Widgets으로 서비스를 제작한다. 이들, 즉 widget은 쉽게 말해 dart언어의 class다. 이들을 활용하면 단 몇 줄의 코드로 강력한 기능들을 구현할 수 있다.

 

위젯 아래 단에는 Rendering layer가 존재한다. Rendering layer는 layout과 painting process를 단순화시킨 또다른 추상화 layer로, widget과 dart:ui를 이어주는 가교 역할을 한다. dart:ui는 Dart언어로 이루어진 마지막 layer로, Flutter framework와 C++로 이루어진 Flutter engine 사이의 커뮤니케이션을 담당한다. 사실 위젯 없이도 플러터 어플리케이션 개발은 가능하다. 개발자는 단 하나의 위젯도 이용하지 않은 채 dart:ui의 class들만을 이용해서 어플리케이션 개발을 할 수 있다. 물론 이는 엄청나게 많은 시간과 노력을 잡아먹는 시도가 될 것이다.

 

2. Flutter의 화면 제작 과정

플러터가 화면을 그리는 과정은 다음과 같다.

1. runApp() 실행
2. 그려야할 위젯들이 포함된 Widget tree 생성
3. Widget tree에 대응하는 Element tree 생성
4. Element tree에 대응하는 Render tree 생성
5. 화면 생성

 

Render tree는 실제 화면을 그리는데 사용되며, Widget tree는 개발자(혹은 유저)와 Flutter의 가교이며 Element tree는 Widget tree와 Render tree를 이어주는 역할을 한다. Render tree는 화면을 그리는데 필요한 모든 로직이 들어있다. 때문에 Render tree의 요소들을 인스턴스화하는데는 많은 비용이 든다. 반면 Widget tree의 요소들은 가볍고 빠르다.

 

만약 어떤 변경으로 인해 UI가 바뀌어야할 경우, Flutter는 재빠르게 새로운 Widget tree를 생성한다. 이렇게 생성된 Widget tree와 기존의 Element tree를 비교하며 변경 요소에 대한 Element만 다시 생성한다. 결국 전체 Render tree가 아닌 변경 사항에 대해서만  수정이 가해지기 때문에 Flutter는 효율적으로 그리고 비교적 빠르게 변경된 UI를 유저에게 보여줄 수 있디. React에 익숙한 사람이라면, Flutter의 동작원리가 마치 React의 가상 돔과 유사함을 눈치챌 수 있겠다.

 

3. BuildContext란?

Widget은 서로 다른 Widget간의 정보를 보관하지 않는다. 즉, 서로 관련성이 없다. 그러나 Widget은 각각에 대응하는 Element들을 통해 서로간의 위계를 알 수 있다. Widget은 build될 때 createElement라는 함수를 호출하게 된다. 이는 해당 Widget에게 대응하는 Element를 만드는 함수다. 그리고 모든 Element는 BuildContext라는 인터페이스를 implement한다. 때문에 각 Widget은 BuildContext를 통해 또다른 Widget의 위치를 추적할 수 있고, 개발자는 이를 활용해 놀라운 기능들을 손쉽게 구현할 수 있다.

 

BuildContext 관련 개발자가 자주 사용하는 기능으로는 of(context)가 있다. [위젯 A].of(context)를 하게 되면, Flutter는 현재 위젯으로부터 위젯 트리를 거슬러 올라가며 [위젯 A]를 찾는다. 그리고 가장 가까이 위치한 [위젯 A]를 찾아 그 곳의 값을 가져온다. 예를 들어 MaterialApp이 빌드됨과 동시에 생성되는 MediaQuery를 MediaQuery.of(context)를 통해 찾고 화면 전체의 너비와 높이 등을 손쉽게 얻을 수 있다.

---

더 자세히 알아보기

관련서적: Why Every Flutter Dev Should Care About BuildContext

 

 

 

 

-학습을 진행하며 남기는 지식 포스팅-

 

-부족한 설명이 있다면 부디 조언 부탁드립니다-

 

 

 

 

이 포스팅은 쿠팡 파트너스 활동의 일환으로,

이에 따른 일정액의 수수료를 제공받습니다