About “Key”
위젯의 크기 구하기 그런데 이제 키를 곁들인…
위젯의 크기(높이, 너비) 를 알고, 사용하고 싶을 때가 있습니다. 이번에는 어떻게 하면 해당 컨텍스트에서 위젯의 크기를 알 수 있을지를 알아봅시다.
위젯트리는 3가지로 구성되어 있다는 것을 기억하세요?
- 위젯 트리
- 요소 트리
- 렌더 객체 트리
입니다.
위젯트리에서는, 키 를 사용하여, 위젯과 요소가 위젯트리의 어느 위치에 있는지를 확인한다고 했었습니다. 우리는 위젯이 존재하는 컨텍스트에서 위젯의 크기를 알기위해, ‘키’를 통해 현재 위젯의 정보를 참조할 수 있습니다.
키
Compare widgets with “Key”
키는 위젯 트리와 요소 트리에서, 어떤 요소가 어떤 위젯을 렌더링해야하는지를 알려줍니다. 만약 키가 지정되지 않았다면, 위젯트리에서 같은 레벨의 위젯이 서로 바뀌어도, 바뀐 위젯과 요소의 키 값을 비교하지 않고 타입만 을 비교합니다. 만약 위젯의 타입만 그대로고, 렌더링해야하는 것은 다른 경우에도, 타입은 바뀌지 않았기 때문에 새로운 상태가 제대로 렌더링되지 않습니다.
하지만 ‘키’를 사용하면, 만약 위젯의 위치가 바뀌어도, 새롭게 렌더링하기 전에, 일치하지 않는 키에 대한 참조를 일치하는 키를 가진 위젯으로 업데이트 합니다. 따라서 제대로된 정보를 렌더링하게 되죠.
On the same “level”
하지만 키를 지정할 때도 주의할 점이 있습니다. 우리가 키를 부여해서 위젯들을 식별하고 싶을 때는, 이 식별 가능한 ‘키’를 반드시 위젯 트리에서 형제 위젯들에게 부여해야합니다. 만약 형제 위젯이 아닌 위젯들에게 부여하게 되면, 요소 트리에서 렌더링 하기 위해 같은 키를 가진 위젯에 대한 참조를 변경할 때, 일치하는 키를 찾을 수 없습니다.
Types of Key
‘키’에도 타입이 있습니다. 키를 필요할 때 사용하는 것은 좋지만, 키가 대표하는 값에 맞는 키를 사용하는 것도 중요합니다. 이에는 다음과 같은 상황이 있을 수 있습니다.
키가 대표하는 값이
- 단일한 값인 경우 → ValueKey
- 복잡한 객체인 경우 → ObjectKey
- 같은 위젯끼리도 서로 다른 고유값인 경우 → UniqueKey
인 대표적인 경우가 있을 수 있습니다.
하지만, 절대로!!! 랜덤한 값을 가지는 키는 사용하지 마세요! 위젯이 생성될 때마다 새로운 값의 랜덤 키가 생성되면, 일치하는 요소를 절대 찾을 수 없기 때문에 키를 사용하는 의미가 퇴색됩니다.
Useful Keys
- 페이지 저장 키: 페이지의 스크롤 위치를 보존할 수 있도록 저장해 줍니다.
- 글로벌 키:
- 위젯 트리 어디에서나 위젯의 상태를 잃어버리지 않고 위젯과 관련된 요소를 바꾸는 것을 가능하게 하고,
- 해당 위젯과 전혀 상관 없는 곳에서 해당 위젯의 정보에 접근할 수 있도록 합니다.
글로벌 키의 첫번째 사례는,
두 개의 다른 스크린에 같은 위젯을 띄우고 싶지만, 두 위젯이 같은 상태를 유지해야하는 경우입니다.
글로벌 키의 두번째 사례는,
비밀번호를 인증하고 싶은데, 그 정보를 형제 위젯과는 공유하고 싶지 않은 경우입니다.
글로벌 키는 마치 글로벌 변수 같습니다. 보통은 상속된 위젯을 가지고 해당 상태를 찾을 수 있는 방법이 있거나, Redux, BLoC과 같은 패턴이 있을 수 있습니다.
마치며
위젯의 ‘크기’로 시작해서 ‘키’로 끝납니다. 결국에는, 위젯 트리 내에서 상태를 보존하고 싶은 곳에 ‘키’를 사용하면 됩니다. 이는 보통, 리스트와 같이 동일 타입의 위젯 컬렉션을 수정하고자 할 때가 일반적입니다. 그리고, 식별하고자 하는 위젯 트리의 루트에 키를 부여하고, 이 키가 무엇을 대표하는지에 따라 적절한 키 값을 선택하세요.
