플러터 엘리먼트 트리의 상태 변화 관리와 Inherited Widget

 

 

 

엘리먼트 트리의 상태 변화 관리

플러터는 위젯 트리를 만들고, 모든 위젯에 대해 엘리먼트 오브젝트를 만든다. 이 때 이 엘리먼트는 StatefulElement이며, 아래 그림처럼 state object를 관리한다.

 

AuthorCard라는 stateful widget이 있고, Icon이라는 자식 위젯을 갖고 있다.

 

사용자가 Icon(하트 버튼)을 탭하면, setState가 실행되고 _isFavorited를 true로 토글한다. 내부적으로 state object는 이 엘리먼트를 dirty로 마크한다. 이는 build가 호출되게 한다.
element object는 old widget을 제거하고 heart icon의 색이 채워진 새로운 아이콘으로 대체한다.

 

전체 트리를 재건축하기보다는, 플러터는 바뀌어야하는 위젯만 업데이트한다. 이것은 트리의 구조를 내려가며 무엇이 바뀌었는지를 체크한다. 그 밖에 모든 것은 재사용한다.

 

Inherited Widget

Inherited Widget은 트리 구조에서 부모 엘리먼트로부터 상태 정보를 접근할 수 있도록 해준다.

 

트리에서 원하는 데이터에 접근하고 싶을 때, 데이터를 각 nested widget마다 파라미터로 넘겨주는 것은 매우 번잡할 것이다. 그 대신, inherited widget을 트리에 추가하면, 위 그림처럼 inherited widget의 모든 자식 노드로부터 데이터를 참조할 수 있다. 이것은 '상태 끌어올리기'로도 알려져 있다.