Flutter 개발 상자

[Flutter] GoRouter에서 같은 화면을 재활용할때 더이상 파라미터로 변수를 전달하지 마세요. 본문

Flutter/간단팁

[Flutter] GoRouter에서 같은 화면을 재활용할때 더이상 파라미터로 변수를 전달하지 마세요.

망고상자 2024. 1. 23. 17:43
728x90

글 작성 vs 글 수정

 

대표적인 화면 재활용 사례입니다.

 

글 작성과 글 수정은 그 특성상 UI구성이 거의 같습니다.

하지만 작성 완료 후 누르는 버튼이

 

작성이냐 수정이냐 를 판단하기 위해서는

지금 내가 작성모드인지, 수정모드인지 판단하는 스위치 변수가 반드시 필요합니다.

 

하지만 GoRouter를 이용할때 Screen위젯쪽에 파라미터를 전달해주는건 의외로 좀 까다로운 부분이 있습니다.

 

GoRouter는 웹과 같은 경로를 따르기 때문에

직전화면에서 다음화면으로 queryParameter를 통해서 무언가를 전달해줄 수 있습니다.

 

예를 들면

https://www.exam.com?index=1

 

이런식으로요.

 

하지만 저 위치에 update냐 write냐를 전달해주는건 좀 어색합니다.

 

그래서 extra를 통해서 전달해주는 방법도 있습니다.

 

하지만 extra는 빌드단계에서 오류를 잡아주는 기능이 좀 부실합니다.

내가 전달받고 싶은게 어떤 데이터인데 이 타입이 아니면 빌드전에 오류를 발생시켜줘! <<< 이게 안됩니다.

따라서 extra를 남용하다가는 휴먼에러를 겪을 가능성이 높죠.

 

그리고 extra는 주로 데이터Object 1개를 주고 받는데 적합합니다. 이미 전달해야할 extra가 있는데 여기에 플러스로 bool변수를 추가로 전달해주어야 할 경우 Map으로 전달해주어야 하는데 이건 진짜 너무 코드가 지저분하고 오류 가능성이 큽니다.

 

 

결론은 그냥 경로를 2개 만들면 됩니다.

 

사실 처음부터 이렇게 하셨던 분들이라면 이새x 뭔데 당연한걸 설명하고 있었던거야? 라고 하실수도 있겠습니다.

 

GoRoute(
        path: '/write',
        builder: (context, state) {
          return PostFormScreen(isRegister: true);
        },
      ),
GoRoute(
    	path: '/update',
        builder: (context, state) {
          return PostFormScreen(isRegister: false);
        },
      ),

 

2개의 라우트경로를 만들고

글작성시에는 /write로 보내면서 isRegister 속성을 활성화 시켜주고

수정시에는 /update로 보내면서 속성을 비활성화 해줍니다.

 

이러면 라우트 이동시 스위치 변수를 어떻게 전달해야할지 복잡하게 생각하지 않아도 되고 코드도 직관적입니다.

원래부터 웹을 하시던 분들이라면 좀 다를 수 있겠지만 모바일로 개발을 시작했다면 저런 경로의 개념으로 화면을 재구성한다기 보다 그 화면에 매개변수를 어떻게든 전달해야한다는 고정관념에 박혀서 더 어려운길을 돌아가는 경우가 많습니다.

 

이제 손쉽게 그냥 경로를 2개 만드세요.

728x90