ValueListenableBuilder<T> class
ValueListenable 과 동기화된 콘텐츠를 제공하는 위젯입니다.
ValueListenable<T> 와 구체적인 값에서 위젯을 빌드하는 빌더가 주어지면, 이 클래스는 자동으로 ValueListenableT 의 리스너로 등록되고 값이 변경될 때 업데이트된 값으로 빌더를 호출합니다.
빌더 함수에 ValueListenable 값에 의존하지 않는 하위 트리가 포함된 경우 애니메이션 틱마다 다시 빌드하는 대신 해당 하위 트리를 한 번 빌드하는 것이 더 효율적입니다.
미리 작성된 하위 트리를 자식 매개변수 로 전달하면 ValueListenableBuilder 가 이를 빌더 함수 로 다시 전달하여 빌드에 통합할 수 있습니다.
미리 만들어진 자식 요소를 사용하는 것은 전적으로 선택 사항이지만, 어떤 경우에는 성능을 크게 향상할 수 있으므로 좋은 방법입니다.
공식 문서 코드
ValueListenableBuilder 는 간단한 값이 바뀌는걸 리슨하고 그때마다 UI 를 다시 그려주는 위젯이다. ValueNotifier 로 '감시할 값'을 만들고 ValueListenableBuilder 로 그걸 감시하면서 그 값이 바뀌면 UI 를 다시 그려주는 구조가 되겠다. 한번 알아보자.
하위 속성
| 속성명 | 타입 | 기본값 | 설명 |
| valueListenable | ValueListenable<T> | – | 값이 변경될 때마다 builder를 호출하게 만드는 리스너 객체 |
| builder | ValueWidgetBuilder<T> | – | value와 child를 기반으로 위젯을 빌드하는 함수 |
| child | Widget? | null | builder 함수에 전달되며, 값 변화에 영향을 받지 않는 하위 위젯 |
일단 그럼 ValueNotifier 를 이해하고 넘어가야 할 것이다. 굉장히 쉬운 위젯이라고 할 수 있겠는데 바로 특정한 값을 가지고 있고 그 값이 바뀌면 알림을 보내는 기능을 하는 위젯이다. 그니까 값 바뀌면 알림 보내주는 위젯이다.
기본적인 사용법은 이렇게 된다.
ValueNotifier<int> counter = ValueNotifier<int>(0);
뭔가 거창하다만 그냥 별거 없다. int 타입인 0을 가진 counter 라는 변수 하나 만든 거다. 근데 이제 상태를 리슨 할 수 있는.
이 값에 접근해서 사용하기 위해선 .value 를 사용해야 한다. ex) counter.value
ValueNotifier 는 Listenable 이라는 기능을 가지고 있는데 이것 때문에 이걸로 선언한 변수를 리슨하고 있으면 (addListener 혹은 ValueListenableBuilder) 값이 바뀔 때 자동으로 알림이 보내지는 구조이다.
이거 하나면 확실하게 이해가 될 것이다. 코드는 정말 짧지만 직빵으로 이해가 되어버릴 것이다.
final counter = ValueNotifier<int>(0);
counter.addListener(() {
print('새로운 값: ${counter.value}');
});
counter.value++;
counter.value = 5;지금 이 코드에서 뭐 print 를 두 번 호출하고 그런 것이 전혀 없다. 하지만 Run 시킨 결과물이 어떠한가?
새로운 값: 1
새로운 값: 5놀랍게도 프린트가 두 번이 되어버린 모습이다. 그렇다. counter.addListener 가 counter 의 값을 듣고 있다가 변경되니 곧바로 반응을 하면서 프린트를 해버린 모습이 되겠다. 이렇게 ValueNotifier 는 복잡한 상태 관리 없이도 간단하게 반응하는 위젯을 만들어 줄 수 있는 것이다. 여기까지가 ValueNotifier 를 쉽게 설명한 것이고 이제 다시 본론으로 가보자면
ValueListenableBuilder 는 바뀐 값을 UI 에 다시 반영, 그려주는 위젯이 되겠다. 엄청 쉽다고 느낄 거다. 실제로 그러하니까.
ValueListenableBuilder(
valueListenable: valueListenable, // 리슨할 값 넣어주기
builder: builder,
)이제 이 필수 속성에 무엇이 들어가야 할지 감이 잡히는가? 그렇다.
valueListenable 에는 ValueNotifier 을 타입으로 갖고 있는 변수(값)를 넣어주면 되는 것이다.
이제 그 값이 변경되면 알아서 ValueListenableBuilder 가 반응하면서 UI 를 다시 그려줄 것이고. 엄청나게 간단하면서 유용하다.
이제 언제 써야 할지 감이 올 것이다.
- setState 쓰기 귀찮을 때
- 특정값 하나만 리빌드 시키고 싶을 때
- 복잡한 관리 필요 없는 간단한 상태일 때
이제 이러면 완벽히 이해한 것이다. 이런 빌더들은 볼 때마다 이번엔 또 뭐지... 하는 의문이 들기 마련인데 그중에서 쓸모없는 것은 역시 없는 모양이다. 구글 개발자들이 만든 것에 역시 의문을 품어서는 안 되는 게 아닐까 싶다. 암튼 도움이 되었길 바라며 마치겠다.
