[Flutter] Widget 구조 - ( week 2 )

Widget, Element

Flutter는 내부적으로 모든 위젯마다 Element를 생성한다.

위젯이 트리 구조로 만들어지는 것처럼 Element 또한 트리 구조로 생성된다. Element 트리는 골격으로 Flutter 앱의 구조를 볼 수 있지만 자세한 정보는 원본 위젯의 참조를 통해 볼 수 있다.

 

앱이 실행되면 위젯은 자식 위젯으로 이동하며 검사가 수행된다. 이때 Element는 대응되는 위젯의 Type과 Key가 이전의 위젯과 동일한지 확인하는데 동일한 경우 위젯의 참조를 경신한다.

 

StatelessWidget의 경우 Key를 가지지 않기 때문에 Type만 확인한다. 반면에 StatefulWidget은 트리 구조에 추가로 State Object가 존재하는데 위젯의 정보를 저장하게 된다.

 

위젯이 변화가 발생할 때 Flutter는 Element 트리를 검사한다. 위젯의 타입을 비교하고 동일하면 값을 경신한다. 그리고 StatefulWidget은 Key 값을 비교하며 만약 위젯에 변경사항이 있다면 키값이 이 변경된 것을 발견하고 해당 Element는 삭제되며 위젯을 탐색하면서 동일한 Key의 Element를 찾기 시작하고 일치하게 되면 해당 위젯으로 참조를 업데이트하게 된다.

 

Key의 위치는 해당 Stateful 위젯에 키를 추가하게 되면 예측되지 않은 문제가 발생될 수 있기 때문에 유지해야 하는 상태 정보가 있는 위젯 트리의 최상단에 추가해 주어야 한다.

 

Keys

Flutter에는 다양한 Key 클래스들이 제공된다. 사용 방식에 따라 Key의 적절한 유형도 달라지게 된다.

 

ValueKey

일정 목록처럼 리스트에서 중복되지 않는 고유한 상수의 값이 사용되는 경우 이 값을 Key로 사용할 수 있다.

 

ObjectKey

사용자의 정보를 출력하는 목록 같은 경우 각 개별적인 정보들의 일부는 다른 것들과 중복이 될 수 있지만 이 정보들을 조합하게 되면 고유한 값을 만들 수 있다.

 

UniqueKey

각 위젯들이 중복된 정보를 가지고 있거나 위젯마다 고유한 Key를 직접 부여해야 하는 경우에 사용한다.

 

PageStorageKey

사용자의 스크롤 위치를 저장하는데 특화된 키이다. 앱이 스크롤을 기억하도록 한다.

 

GlobalKey

위젯이 상태를 잃지 않으면서 부모를 바꾸거나 특정 위젯의 정보를 전혀 다른 위젯 트리에서 접근가능하게 할 수 있다.

즉 서로 다른 2개의 화면에서 동일한 위젯을 동일한 상태를 유지하면서 보여주어야 할 때 나 상태 정보를 다른 트리의 위젯과 공유하고 싶지 않은 경우 사용한다.