getX를 사용하면 얼마나 편리해질까?
지난 포스팅에서, getX의 세 가지 주요기능 중 하나로 라우팅 관리를 소개했었다.
주요 기능의 효과를 직접 코드를 통해 확인해 보자.
아래는 getX를 사용하지 않고 다른 페이지로 이동시키는 코드다.
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const RegisterPage(
title: '플러터',
)));Navigator를 사용해서 작성하므로, 짧게는 3줄부터 길게는 6줄까지 나온다.
getX는 이런 비효율적인 코드를 단 한 줄로 바꿀 수 있다.
Get.to(RegisterPage()); // Import getX는 필수나는 맨 처음에 단 한 줄로 네비게이션을 끝낼 수 있다는 사실에 적잖이 충격을 받았었다.
그렇지만 getX는 이에 그치지 않고 현재 페이지 상태가 어떤 상태인지를 로그로 출력해준다.
지난 반년 프로바이더를 사용해 코드를 작성하며 낭비한 코드가 몇 줄이나 될지 되도록이면 생각도 하고 싶지 않다.
프로바이더를 사용하며 상태관리에 대해 더 확실히 알아갈 수 있었던 것은 맞으나, getX를 접한 이상 앞으로 프로바이더를 사용하진 않을 것 같다.
혹여 이 글을 보고 계신 분들 중 처음 상태 관리를 접하신 분들에겐 Provider 사용을, 상태 관리를 제대로 해본 적이 있는 분들에겐 getX 사용을 적극 추천드린다.
그렇다면 Navigator의 pop은 어떻게 바뀔까?
이건 더 간단하다.
Get.back();정말 쉽다. 이건 그냥 pop의 기능이라 어디로 이동할지 언급조차 하지 않아도 된다.
context로 접근하지 않고 그냥 back 해주면 끝이다.
back을 사용하면 처음 화면이 아닌 라우팅 하기 직전의 페이지로 이동하게 된다.
이렇게 되면 내가 계정 등록 페이지를 들렀다가 로그인 페이지로 이동해서, 앱을 나가기 위해 뒤로 가기를 눌렀는데 홈이 나와야 될 화면에 계정 등록 페이지가 있는 거다. 계정 등록은 아까 했는데, 사용자 입장에서 참 당황스럽지 않은가?
이 현상을 해결하기 위해 Navigator에서는 pushAndRemoveUntil이라는 기능을 사용했는데, getX는 아래와 같이 해주면 된다.
Get.offAll(HomePage());마지막으로 named 라우팅 방식에 대해서 알아보고 마무리하겠다.
initialRoute: "/",
routes: {
"/": (context) => HomePage(),
"/mypage": (context) => MyPage(),기존에는 위와 같은 형식으로 설정해주었다면, getX에서는 배열 형태로 선언해주면 된다.
getPages: [
GetPage(name:"/", page: ()=> HomePage()),
GetPage(name:"/mypage", page: ()=> MyPage()),
],이렇게 선언된 named 라우트를 사용하려면
Get.toNamed("/mypage");위와 같이 toNamed를 사용해주면 된다.
현재 페이지를 없애고 다음 페이지로 이동하려면
Get.offNamed("/");위와 같이 선언해주면 된다. 이렇게 되면 직전의 페이지는 사라지고, 원하는 페이지로 이동 가능하여 화면이 쌓이지 않는다.
오늘은 아주 간단하게 GetX의 라우팅 관리 기능에 대하여 알아보았는데, 다음 게시물에서는 상태 관리에 대해 알아보겠다.
