[Flutter] 상태관리 패키지 GetX 장단점 및 라우터 관리 정리

최근까지 회사 프로젝트에서 구글에서 추천하는 provider를 사용해서 상태관리를 하고 있었다.

점점 프로젝트 규모가 확장되가면서 리팩터링을 한번 할 기회가 생겼고 이참에 사람들이 많이 쓰고 매우 편하다는 GetX로 넘어가기로 했다.

 

GetX 링크 https://pub.dev/packages/get

get | Flutter Package

 

패키지 설치 및 사용법은 간단하기 때문에 해당 글에선 따로 다루지 않겠습니다.

 

---

GetX 의 장점

1. context로부터 자유로워진다.

- flutter로 UI를 그리다보면 context로 인해 불편한 경우가 많이 생깁니다. 큰 단점은 아니지만 은근 귀찮죠. GetX는 context를 알아서 관리해주기 때문에 신경 쓸 필요가 없습니다.

 

2. 코드량이 매우 줄어든다.

- 코드량이 줄어든다고 해서 그게 좋은 프로그램으로 직결되는건 아닙니다. 하지만 코드가 적으면 개발자가 개발하기 매우 쉽고 직관적인 코드는 개발속도를 향상 시켜주며 협업에 매우 좋습니다.

 

3. 공식문서가 매우 잘 되어있다.

- 사실 이 글을 볼 필요도 없이 공식문서만 잘 읽어봐도 GetX를 배우는건 그리 어렵지 않을겁니다. 심지어 한글 번역도 되어있습니다.

 

GetX 의 단점

1. 패키지에 의존성이 커진다.

- GetX가 많은 부분을 편하게 해주는 만큼 그만큼 GetX에 의존성이 커지게 되겠죠. 당장에 큰 문제가 되지는 않겠지만 정말 극단적인 예로 어느날 GetX를 사용할 수 없게 된다면 GetX로 작성한 수만은 코드베이스들을 걷어내게 되는 대참사가 일어날겁니다. 

 

2. 너무 많은 기능이 들어있다.

- 이게 왜 단점이냐고 할 수 있을겁니다. 하지만 정말 기능이 너무 많습니다. 꼭 필요로 하지 않는 기능들도 GetX패키지에 들어있어 라이브러리가 무거워집니다.

 

---

장단점을 알아보았으니 이제 GetX를 같이 공부해봅시다.

 

주요기능들, 자주쓰는 기술들 위주로 작성해보겠습니다.

import 'package:get/get.dart';

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

get 패키지를 import 한 후 MaterialApp을 GetMaterialApp으로 감싸면 GetX를 시작할 준비는 끝입니다.

provider는 여러가지 provider를 계속 선언하는 것과는 달리 매우 깔끔합니다.

 

Navigator

 

기존 네비게이터 방법입니다.

Navigator.push(context, MaterialPageRoute(builder: (context) => SecondRoute()));

Navigator.pop(context);

아직도 이건 외우기가 힘들어서 복붙해서 쓴다.

 

하지만 GetX 에서의 화면 간 이동은!?

Get.to(NextScreen());
Get.back();

끝이다. 말도 안되게 짧고 간편하며 context를 굳이 불러와서 쓸 필요도 없다.

 

nameRoute로 사용하고 싶다면

return GetMaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: "/",
      routes: {
        "/": (context) => MainPage(),
        "/next": (context) => NextPage(),
      },
 home: MyHomePage(title: 'Flutter Demo Home Page'),

이렇게 GetMaterialApp에 initialRoute와 routes를 정의 한 후에

Get.toNamed('/next');

끝이다. 엄청 간편하다.

 

아래 off, offAll도 자주 사용되므로 알아두자. 전 페이지를 스택내에서 제거해야 할 때 사용한다.

Get.off(NextPage()); // 바로 전 페이지 제거 후 이동
Get.offAll(NextPage()); // 스택되어 있는 모든 페이지 제거 후 이동