Flutter Study-4주차2(Internals)

Three Tress

1. Widget Tree -> 코드에 존재하는 위젯의 조합

• build() 를 간헐적으로 호출하여 업데이트 상황을 확인

2. Element Tree

• 플러터는 위젯트리를 요소트리로 번역(메모리 안에서의 표시형태로의 번역)

3. Render Tree

• 사용자의 눈에 보이는 UI 빌딩 블록

=> 다 교체하는 것이 아닌, 필요한 부분만 교체하는 것이 UI Update의 핵심

Key

그렇다면, 어떤 데이터를 넘겨줄것인가? 또한 위젯의 구별은 어떻게 할 것인가의 문제점

Elememt 트리가 바뀌었을때, Widget의 키와 Elememt의 키가 일치하는 지의 여부를 따지는 과정을 통해서 요소 업데이트시 데이터 손실 방지 및 위젯 구별을 더 효율적으로 진행.

즉, Key를 추가하여, 위젯과 element의 키값을 비교하고 이 element에 묶인 State가 변화하면서 UI Update가 진행

Mutating

final

final university = ['HUFS']
// ❌ final은 재할당이 불가한 자료형, 재할당시 새로운 메모리 주소를 사용 -> 비효율적
university = ['HUFS', 'KHU"]
// ✅︎ 동일 메모리 주소값에 있는 리스트에 object를 추가
university.add('KHU')