15일

92강. 상태관리기법

State management

1. 규모가 커질 경우 데이터 전달이 부모-자식 관계만으로 힘들어진다.
2. 최상위 위젯에서 만든 데이터인 숫자 8을 자식에 자식에 자식을 전달하면, 다음과 같이 코드가 만들어져야 함
3. 데이터만을 저장하고, 프로그램 내에서 필요하는 데이터를 따로 모아두고 관리할 수 없을까?
   • State management의 등장(상태관리)

상태관리기법 종류

새로운 프로젝트에 어떤 상태관리기법을 적용할 것인가?

1. MboX

• https://pub.dev/packages/mobx

mobx | Dart Package

2. bloc

• https://pub.dev/packages/bloc
• 대규모프로젝트에서 사용
• 코드를 이해하기 어렵다(생각보다 많은 코드를 작성해야함)

bloc | Dart Package

3. Provider

• https://pub.dev/packages/provider
• 초기에 많이 사용, 적절한 난이도
• 업데이트가 느림

provider | Flutter Package

4. Riverpod

• https://pub.dev/packages/riverpod
• Provider 제작자가 만든 더 나은 나은 버전의 Provider

riverpod | Dart Package

5. GetX

• https://pub.dev/packages/get
• 쉬운 코딩, 간단한 상태 관리
• 깊게 사용할수록 잔버그 발생, 업데이트 속도가 느림

get | Flutter Package

93강. GetX

Get을 사용하기 전

1. MaterialApp X/GetMaterialApp O

2. 페이지 라우팅은 이제부터

Navigator.push(context, MaterialPageRoute((context=>NewPage())

Get.to(()=>NewPage())

3. 스낵바는 아래와 같이

ScaffoldMessenger.of((context).showSnackBar(SnackBar(content: Text('내용 표기')));

Get.snackbar('내용표시','내용 상세내용');

4. 디바이스 화면 사이즈는 아래와 같이

Mediaquery.of(context).size.width     //디바이스 가로 사이즈
Mediaquery.of(context).size.height    //디바이스 세로 사이즈

Get.width
Get.height

5. 너무 의존하지 말 것

94강. GetX- Controller, put, find

GetxController

• 상태를 관리할 수 있는 컨트롤러
• 앱 내에서 따로 데이터를 관리하는 공간
• 컨트롤러를 생성하고 언제든 불러와서 사용가능

컨트롤러 정의

• 사용할 컨트롤러를 미리 정의
• 단순 class로 제작하게 되면 상태 관리 기능을 사용하지 못하므로 GetxController라는 부모를 설정해주어 기능들을 사용할 수 있게 해줌

class 컨트롤러명 extends GetxController {
    //멤버 변수
    int a;
    
    //생성자
    컨트롤러명({required this.a});
}

Get.put

• 정의된 컨트롤러를 생성해서 전역으로 사용될 수 있도록 함
• 앱 내에서 언제든 호출하여 데이터 접근가능
• 컨트롤러명() 부분은 생성자(필수값을 넣어야 시작가능, 클래스라서)

var controller = Get.put(컨트롤러명());

Get.find

• 한 번 put된 컨트롤러를 찾아서 사용할 수 있게 함
• 컨트롤러에 접근하여 데이터를 언제든 가져오고 저장할 수 있음

var controller = Get.find<컨트롤러명>();

95강. GetX - Rx, Obx

Getx의 특별한 데이터 타입

• Rx(Reactive), Observable
• 일반 변수를 만들면, 그냥 불러와서 사용하기만 함
• 만약 즉각적으로 데이터가 변하는 것을 바뀌도록 하는 걸 원하면?관측 가능한 변수를 만들어주자
• 내가 사용할 데이터를 Observable하게 만들어주기 위함
• 변수선언 방법 세가지
  1. var myLevel=1.obs;
  2. var myLevel=RxInt(1);
  3. RxInt myLevel = 1.obs; <= 주로 사용하는 방식
• 기존의 데이터 타입의 앞에 Rx만 붙여주고 대문자로 바꿔주면 됨
• 커스텀 클래스의 경우 : Rx<User>, RxList<Memo>
• null이 가능한 클래스의 경우 : Rxn<User>, RxList<Memo>
• 관측가능한 변수가 변동되면 관측하고 있던 위젯들에게 새로운 값이 보여짐
• Rx로 감싼 데이터는 .value를 통해서 데이터를 획득

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

본 후기는 유데미-스나이퍼팩토리 9주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.