[036] 플러터 (Flutter) 배우기 - 상태 관리6 (GetX 사용 - Reactive State Manager & RxList 사용)

안녕하세요~ totally 개발자입니다.

 

GetX - Reactive State Manager

 

저번 시간에는 Simple State Manager에 대해 살펴보았고, 이번 시간에는 Reactive State Manager에 대해 살펴보도록 하겠습니다. Simple State Manager에서는 GetBuilder와 update 메소드를 통해 UI를 업데이트해주었던 반면, Reactive State Manager에서는 Data Stream처럼 데이터를 주기적으로 관찰(Observe)하여 데이터가 변경된 경우에 UI를 실시간으로 업데이트해줍니다. 여기서 알아야 할 몇 가지 키워드가 있는데 Rx는 ReactiveX이고, Obs는 Observable입니다. 이 GetX Reactive State Manager의 실습으로 Student 리스트 배열을 만들고 리스트의 각 요소가 수정됬을 때, 바로 실시간으로 상태를 업데이트해보도록 하겠습니다. 

 

Step 1: pubspec.yaml에 get를 추가해줍니다.

 

 

 

Step 2: Student 모델을 만들어줍니다 (MVC 패턴 적용)

 

 

 

Step 3: Controller를 작성해줍니다. 여기에서 복잡한 부분은 RxList<Rx<Student>> 형태로 들어가게 됩니다(5번째 줄 참고). Rx는 ReactiveX의 줄임말로 obs(observable) 즉 계속 관찰하겠다는 의미이며 Rx 변수 형태는 데이터의 변화를 감지해서 그 데이터를 실시간으로 반영하기 위해서 사용합니다. 그래서 뒤에 .obs를 붙여주어야 합니다. 저는 mock data를 3개 정도 넣었고 간단한 테스트를 위해 11, 12번째 리스트를 새로 만들어서 새롭게 변경할 데이터들을 리스트로 넣어주었습니다. 그리고 14~18번째, 20~24번째 각각 updateStudentName, updateStudentGrade 메소드를 선언하여 name과 grade를 각각 업데이트해줄 수 있도록 지정하였습니다. 여기에 있는 update는 저번 simple state manager에 배웠던 update하고는 다르며 여기에서는 value parameter를 이용해서 상태에 접근하여 상태의 변수들을 업데이트해줄 수 있습니다. 

 

 

 

Step 4: UI를 그릴 main.dart 부분에 먼저 다음처럼 import 해줍니다.

 

 

 

Step 5: 12번째 줄처럼 Dependency Injection(의존성 주입)을 위해 StudentController를 Get.put으로 인스턴스를 등록해줍니다. 만약 추후 GetX 위젯을 쓴다면 굳이 이 방법 말고 추후 init 속성으로 인스턴스를 초기화한 뒤에 Get.find로 사용하실 수도 있습니다.

 

 

 

Step 6: 내용 UI를 구성해줍니다. 저는 ListView.builder를 사용하였으며 GetX 위젯을 통해 실시간으로 데이터가 변경되었을 때 업데이트해줄 수 있도록 다음처럼 구성하였습니다. 41~45, 46~50번째 TextButton를 각각 눌렀을 때 위에 지정된 새로운 데이터로 대체될 수 있도록 메소드를 호출하였습니다. 여기에서 중요한 것은 34-35번째에서 builder: (_) 이렇게 사용하시고 _con.studentList() 괄호로 사용해서 호출하셔야 한다는 것입니다. 이렇게 해야 RxList<Rx<Student>> studentList 요소 각각에 접근하여 데이터를 받아올 수 있습니다. 코드는 제가 아래에 모두 첨부하였으니 참고하시기 바랍니다.

 

 

 

Step 7: 결과는 아래와 같습니다.

 

 

 

[전체 소스 코드]

 

studentModel.dart

 

 

studentController.dart

 

 

main.dart

 

 

References

 

https://pub.dev/packages/get

get | Flutter Package

 

[유튜브 강좌 영상]

 

https://youtu.be/VBmLhBvjHnI