Flutter | 플러터 상태관리 패키지 사용해보기 - bloc - 3. 알아두면 좋은 위젯

지난번에는 Bloc에서 필수로 알아둬야 할 위젯을 알아봤습니다. 이번에는 알아두면 좋은 위젯들인 BlocSelector, BlocListener, MultiBlocListener, BlocConsumer에 대해서 알아보겠습니다.

---

1. BlocSelector

bloc에 등록된 상태들중에 필요한 부분만 선택해서 화면을 갱신해주는 위젯입니다. 3가지 generic을 BlocSelector<1, 2, 3>의 형태로 사용합니다. 1번에는 bloc이나 cubit이 사용하는 부분이고, 2번은 상태값을 등록해주는 부분입니다. 3번째는 반환 타입을 지정해 줍니다. 그리고 옵션으로 selector을 필수로 사용해야 하고, 3번째로 사용한 타입으로 지정해 줘야 합니다. 그리고 지금 코드에서 설명하자면 changeState가 변경되면 builder가 호출이 되는 형태입니다. 코드를 통해서 알아 보시겠습니다.

---

실습 - 1

우선 실행된 화면을 보자면 더하기만 누르면 화면은 변하지 않지만 상태를 변경하면 현재까지 더하기한 값으로 변경되는 것을 볼 수 있습니다. 상태변경 버튼만을 필터링해서 화면을 갱신해주는것을 알 수 있습니다. bloc_selector_bloc.dart 파일을 보면 상태를 변경 시켜주는 부분과 더하기부분을 누르면 +1씩 추가되는것을 확인할 수 있습니다. 다시 selector를 확인해 보자면 BlocSelector과 BlocBuilder를 보시면 blocbuilder의 buildwhen을 추석처리한 상태에서 처음에 상태변경을 누르면 selector과 bloc가 같이 print 되는것을 볼 수 있습니다. 값은 변하지 않았지만 화면을 다시 그렸다는 것입니다. 하지만 하트만 변경시키는 selector도 같이 변하는 상태라 불필요 한것을 볼수 있습니다. 그리고 이 상태에서 더하기만 누르면 숫자를 나타내는 부분인 blocbuilder만 새로 갱신하는것을 볼 수 있습니다. buildWhen을 주석을 제거해주면 꺼줄때는 selector만 켜주면 둘다 켜줘서 원할때에 필요한 부분만 갱신해 줄 수 있다는것을 확인할 수 있습니다. 쉽게 말해 selector옵션은 지금은 bool이지만 어떤값이든 상관없이 그 값을 확인하겠다는 필터의 의이고 blocbuilder의 buildWhen은 그 값이 true일때만 값을 변경시키도록 하겠다는 조건의 의미로 생각하시면 되겠습니다.

---

2. BlocListener, MultiBlocListener

상태의 변화에 따른 화면 갱신이 아닌 이벤트만 처리하는 위젯입니다. 다른 bloc와 마찬가지로 2가지 generic을 BlocListener<1, 2>로 사용합니다. 1번은 bloc 나 cubit의 클래스이고, 2번은 관리하는 상태값을 넣어주시면 됩니다. listener은 builder이 아니라 child를 씁니다. child의 내용은 갱신 되지 않습니다. 대신 listener옵션이 있는데 상태값이 변하면 이 부분을 호출해 줍니다. 메시지를 띄우거나 bloc간 통신에 사용합니다. 그리고 listenWhen 옵션이 있는데 호출 조건을 넣어주시면 됩니다. 현재 코드에서 보면 현재 current 값이 5 이상이 되어야 메시지를 보여준다는걸 간단히 알 수 있습니다. multibloclistener는 다른 multi처럼 여러개의 조건을 사용할때 씁니다. 코드로 한번 봐보겠습니다.

---

실습 - 2

SampleBloc를 우선 보면 기본 값을 0으로 초기화 하고 시작하는 것을 볼 수 있습니다. 그리고 bloc_listener_page.dart의 하단을 보시면 bloclistener에서 5가 넘으면 메시지를 띄워주고 그 아래에 blocbuilder를 넣어서 5가 넘으면 화면의 숫자를 변경해주는 것을 확인 할 수 있습니다.이제 Center으 child 를 주석해주고 하단에 주석되어 있는 부분을 주석을 해제하고 실행해 보면 알림창은 뜨지만 화면의 0은 6으로 갱신되지 않는것을 볼 수 있습니다. 메시지도 띄우고 화면도 갱신하기 위해서는 위처럼 사용하시면 됩니다.. 그리고 메시지를 띄우는 부분을 보면 원래는 context를 공유하지 않아서 숫자가 공유되지 않지만 bloc 옵션에 별도로 지정해줘서 공유된다는것을 다시 확인 할 수 있습니다.

---

3. BlocConsumer

BlocBuilder와 BlocListener을 합친 위젯이라 생각하시면 됩니다. 이벤트 처리와 화면 갱신을 동시에 해줘야 할때 사용합니다. buildWhen과 listenWhen 조건을 통해 적절한 갱신과 이벤트 처리를 할 수 있는 위젯입니다. 바로 코드로 알아 보겠습니다.

---

실습 - 3

사용을 보시면 위에서 봤던 BlocListener과 BlocBuilder을 트리구조로 만들었던 구조가 BlocCunsumer의 한 위젯안에 담겨 있는 것을 볼 수 있습니다  listenWhen에 이벤트 조건과 listener에 이벤트 호출이 있고, buildWhen에 화면 갱신 조건과 builder에 갱신할 화면을 보여주고 있습니다. 이제 화면에서 버튼을 눌러보시면 2의 배수마다 화면이 변경되고 5를 넘어가게 되면 dialog가 출력되는 것을 볼 수 있습니다. 기능이나 성능에 큰 영향은 없지만 가독성을 위해서 사용하시는걸 추천드립니다.

---

지금까지 bloc위젯 9가지를 알아봤는데 필요한곳에 적절히 사용하시면 좋을 것 같습니다.