위젯에 Key 를 사용해야하는 이유

Statless 위젯의 경우

Stateless 위젯의 경우 위와 같이 같은 타입이라도 다른 데이터로 인식하지만 이러한 위젯트리를 정말로 그리는 Element Tree 에서는 같은 타입은 모두 똑같이 인식해버린다.  만약 위젯트리에서 Red와 Blue의 context를 바꾸더라도 둘은 같은 타입이기 때문에 Element Tree는 이를 전혀 알 수 없다.

Stateful 위젯의 경우

Stateful 위젯의 경우 State는 위젯이 가지고 있는 것이 아닌 Element Tree가 소유하고 있다. 만약 위젯트리에서 Red, Blue 가 바뀐다면 Element Tree 에서는 Red WidgetTree에 Blue State를 넣게 된다. 

 

이렇게 같은 타입이여도 Element Tree에서 다른 위젯으로 인식할 수 있는 방법으로는 Widget Tree에게 다른 Key값을 부여해줌으로써 해결할 수 있다. Element Tree 는 Context 가 바뀌어도 알맞은 키값을 통해 State를 넣어줄 수 있기 때문이다 . 

---

Where to put keys

Element tree가 key를 검사하고 올바른 context로 위치시킬 때는 같은 계층에 있는 위젯끼리 바꿔치기를 한다. 예를들어 처음 padding 위젯은 통과하고 패딩 하위 위젯에서 키값이 틀릴경우 해당 패딩 하위 위젯은 바꿔치지할 위젯이 없기 때문에 새로운 상태를 만들어버린다.

 

따라서 위와 같이 바꿔치기할 뭉탱이의 상위 위젯에, 여기서는 패딩위젯에 키값을 부여해야한다. 

---

Which Keys you should use

Key 는 총 5가지가 존재한다. -> Global Key, Value Key, Unique Key, Object Key, Page Storage Key

 

Global Key

글로벌 키는 전역으로 선언되는 키이다. 프로젝트 어디서나 접근할 수 있고 인식된다. 

당연히 전역으로 선언되기 때문에 최대한 사용을 하지말아야한다. 

 

Value Key

ValueKey는 특정 값에 기반한 키이다. 동일한 값이 주어지면 동일한 키로 간주된다. 주로 특정 데이터와 관련된 위젯의 상태를 보존할 때 사용된다(텍스트 값이라든가..)

 

Unique Key

UniqueKey는 항상 고유한 키를 생성한다. 매번 새로운 인스턴스를 생성할 때마다 고유한 값이 부여된다.

 

Object Key

ObjectKey는 객체를 기반으로 하는 키이다. 동일한 객체에 대해 동일한 키를 생성한다

 

Page Storage Key

PageStorageKey는 페이지 스토리지에 상태를 저장하기 위한 키이다. 스크롤 위치나 폼 상태 같은 것을 유지할 때 사용된다.

---

https://www.youtube.com/watch?v=kn0EOS-ZiIc