[Flutter] GetX와 Provider의 차이

1. Provider

플러터에는 Stateless와 Stateful 위젯이 존재하는데 Stateful위젯을 사용하여 상태가 변경된다면, 이를 화면에 반영을 해주어야 하는데 이때 setstate(){}를 사용하여 변경된 화면을 업데이트를 시켜줄 수가 있다.

[인프런][코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출! - 이미지 참고

1. Stateless는 Constructor이 생성되고 생성되자마자 build 함수를 실행한다.

그리고 라이프 사이클동안 한번만 실행된다 -> 그 후 변경이 불가능

 

2. Stateful 위젯은 Constructor이 실행되고 난 후 createState가 불리게 된다.

[인프런][코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출! - 이미지 참고

만약 파라미터가 변경이 된다면 호출순서는 1 -> didUpdateWidget -> 5 -> 6 -> 7

하지만 setState는 state내부에서 진행되기 때문에 호출순서는 setState -> 5 -> 6 -> 7

위 사진만 본다면 내부에서 돌아가는 구조는 쉽게 이해가 가능할 것이다.

 

그래도 이해가 안된다면 코딩셰프님의 stateful 위젯 강의를 참고

https://www.youtube.com/watch?v=StvbitxUKSo&t=5s

코딩셰프

 

그러면 만약에 위와같이 setState를 사용하게 된다면 필요없는 부분까지 전부 Rebuild가 될 것이다.

그러므로 빌드가 필요없는 부분을 제외한 특정부분만 업데이트를 한다면 매우 효율적이게 운영이 가능하게 될 것이다.

이를 위한 것이

Provider 와 GetX이다.

[유튜브] 코딩셰프님 강의 자료 참고

위와 같이 재귀적으로 계속해서 불리는 위젯이 존재한다고 가정해보자!

그렇다면 이와 같은 위젯이 100개가 넘게 된다면 하나의 클래스의 값을 변경하기 위해 하위 위젯 99개가 전부 재빌드가 되어야 한다.

그러므로 이럴때 setState를 사용하는 것 보다 Provider를 사용하여 특정 부분의 값만 변경되게 할 수 있다.

 

Provider를 사용하기 위해서는 위 와 같이 Model을 만들어 주어야 한다.

changeFIshNumber() -> number의 값을 +1 증가시켜주고

notifyListeners() -> 만약 값이 변경되면 이를 알려주는 함수

(notifyListeners가 없다면 값이 변경되었다고 알려주지 않기 때문에 값이 반영이 안된다)

 

 

이제 View부분으로 돌아와서 MultiProvider()를 통해서 여러개의 Provider를 설정할 수 가 있다.

이를 통해 서로 다른 Model를 통해 각기 다른 업데이트 값을 전달해 줄 수 있게 된다.

 

Model에 값을 불러오는 방법은 매우 쉽다.

Provider.of<model>(context).[value or function] 을 넣으면 된다.

이때 (context, listen : false)로 설정하는 이유는 계속해서 모니터링이 필요없는 부분을 처리해 줄 수 있다.

 

이러한 방식으로 Provider를 통하여 setState보다 더 효율적인 상태관리를 사용할 수 있게 된다.

 

2. GetX

---

그렇다면 GetX란 무엇일까?

Provider랑 무엇이 다르길래 왜 Provider보다 GetX의 다운로드수가 더 많을까?

 

GetX에는 2가지의 상태가 존재한다.

1. 단순 상태 관리자 (GetBuild)
2. 반응형 상태 관리자 (GetX / obs)

 

단순 상태 관리자는 Provider의 ChangeNotifierProvider와 비슷하다.

 

<Provider>

//controller 상태관리 이후 brodcast 방법
class ChangeNotifierController extends ChangeNotifier{
	int count=0;
    void increment(){
    	count++
        notifyListeners();
    }
}
//변경된 상태값을 전달받는 ui 쪽 소스
Consumer<ChangeNotifierController>( 
  builder: (context, controller, child) { 
  	return Text( '${controller.count}');
  }
)

<GetX>

//controller 상태관리 이후 brodcast 방법
class CounterController extends GetxController{
	int count=0;
    void increment(){
    	count++
        update();
    }
}
//변경된 상태값을 전달받는 ui 쪽 소스
Getbuilder<CounterController>( 
  builder: (controller) { 
  	return Text( '${controller.count}');
  }
),

 

GetX의 좋은점으로는 만약 선언한 변수의 값이 "Person"이라는 String 값이 있고,

사용자가 똑같이 "Person"의 값을 다시 넣고 수정하게 된다면 GetX에서는 리소스를 아끼기 위해

똑같은 값이 들어오게 되면 새 값을 무시하고 기존값을 그대로 유지한다.

 

GetX의 반응형 상태관리를 사용하는법을 알아보자

위와 같이 모델을 설정해주고

컨트롤러를 설정해 준다.

위와 같이 변수에 .obs를 지정해주면 이 변수를 값이 변경될때마다 계속해서 모니터링을 받게 된다. (obs의 뜻은 Observable)

 

-> View 설정

final Controller controller = Get.put(Controller()) 를 통해 컨트롤러를 생성한다.

GetX의 좋은점 하나가 Provider처럼 context에 의존하지 않기 때문에 최상위에 Provider를 묶어줘서 관리해주지 않기 때문에
원하는 부분에만 Controller를 사용한다는 점에서 매우 편리하다.

-> 이 말이 이해가 안가도 나중에 둘다 사용해보게 되면 자연스럽게 이해가 된다.

 

이제 GetX를 적용하는 방법은 2가지 방법이 있다. -> 둘중 어느것을 사용해도 똑같음

위와 같이

GetX<> 로 묶어주어도 되고

Obx()로 묶어서 사용해도 된다.

 

마지막으로 버튼을 통해서 액션을 실행해서 특정 변수의 값만 업데이트를 반영하여 화면에 반영하도록 할 수 있다.

 

개인적으로 GetX의 사용성이 Provider보다 몇배는 더 편리하고 코드길이 단축에도 더 좋다고 생각한다.

둘다 해본 느낌으로는 초보자라면 Provider를 반드시 짚고 넘어간 뒤에 GetX를 사용하는게 좋다고 생각하는 이유로는

GetX는 어떻게 값이 변경되어 어떠한 과정을 거쳐서 값이 변화되는지 코드로만 봐서는 감을 잡기 힘든데

Provider는 상태 흐름을 하나씩 보면서 공부해서 그런지 기본적으로 코드가 어떻게 흘러가는지 감을 잡을 수 있었다.

막상 타이핑 치면서 생각해보니깐 그냥 비슷한거 같기도 하고...? 아닌가??

 

+ GetX의 라우터 기능

Navigator.of(context).push(
  MaterialPageRoute(
 	 builder: (BuildContext context) => HomePage(),
  ),
);

원래 플러터 기본 기능은 MaterialPageRoute를 사용하면 코드가 길어지는데 GetX를 사용한 라우터는

`Get.to(HomePage());`

이렇게 간결하게 코드 작성이 가능하고

`Get.to(SamplePage(), transition: Transition.downToUp);`

위 처럼 페이지가 이동할때 효과를 줄 수 있다.