Navigate with named routes

인턴이지만 내가 일하게 된곳에는 flutter를 메인으로 하는 곳이 아니였다. 그래서 바로 flutter 프로젝트에 참여하게 되었다. 인원이 부족했기 때문에 나의 부족한 지식으로도 곧바로 도움을 줄 수 있어서 좋았다.

참여하게된 프로젝트에서 가장 처음으로 눈에 띄는게 Route 방식이였다. Navigator, GoRouter만을 사용해보았었고, GoRouter가 워낙 좋았어서 다른 Route 방식을 찾아보지 않았었다. 그런데 회사 프로젝트에서는 처음 보는 Route방식을 사용하고 있었다. 

Named Router

Named Route는 페이지의 이름을 정의해서 navigator에 이름으로 화면으로 전환하는 방법입니다.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '간단 네임드 라우트',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      routes: {
        '/': (context) => const HomeScreen(),
        '/detail': (context) => const DetailScreen(),
      },
      initialRoute: '/',
    );
  }
}

Navigator.pushNamed(context, '/detail');

Navigator.pop(context);

이렇게 main에 정의한 Named Routes를 routes로 연결합니다.(파일로 따로 빼서 관리할 수 있음) initialRoute에 맨처음 보여지는 화면을 정의 해서 /로 정의 하면 맨처음 보여지는 화면으로 자동으로 연결됩니다. 그리고 Navigator에 push가 아닌 pushNamed를 이용해서 화면을 정의한 이름을 경로로 입력하면 화면이 전환됩니다. 다시 돌아오기 위해서는 기존과 같은 pop을 이용하면 됩니다.

이 방식은 Navigator.push를 이용하는 기본적인 route 방식과 유사합니다. 그렇지만 MaterialPageRoute를 이용하지 않아서 코드가 매우 간소화 됩니다. 또한 전환되는 화면이 변경될 때는 모든 코드를 바꾸지 않고 경로만 수정하면 되어서 유지보수에도 장점이 있습니다. 이렇게 처음 보았을때는 꽤나 효과적인 방법인 것처럼 보였습니다.

 

아래는 flutter 공식 사이트에서 named Routes에 설명하는 페이지입니다.

https://docs.flutter.dev/cookbook/navigation/named-routes

Navigate with named routes

보시면 가장 위에 경고 문구가 있습니다.

Named routes are no longer recommended for most applications. For more information, see Limitations in the navigation overview page.

간단하게 설명해보자면 Named routes 방식은 더이상 추천되는 방식이 아니라고 합니다.

https://docs.flutter.dev/ui/navigation#limitations

Navigation and routing

다음의 페이지를 보게 되면 '딥 링크를 처리할 수 있지만, 동작이 항상 같고 커스터마이징할 수 없다', 플러터는 네임드 라우트를 사용하는 애플리케이션에서 브라우저의 '앞으로/뒤로' 버튼을 지원하지 않는다' 이런 이유로 추천하지 않는다고 설명하고 있습니다.

그러면서 이를 해결하기 위해서는 Go_Router와 같은 패키지를 이용해서 앱을 만들어야한다고 나와있습니다.

그래서 인턴 프로젝트에서도 go_router로 바꿀까 생각을 해보았지만 이미 규모가 크게 틀이 잡혀있는상태서 router 기술을 바꾸는것에 어려움을 느껴서 바꾸지는 못했습니다. named 방식이 추천이 되지 않는다지만 특정 상황에서의 문제이기 때문에 규모가 작거나 딥링크/ 웹앱이 아니라면 여전히 사용해도 좋은 기술이라고 생각이 됩니다.

Go_Router같은 외부 라이브러리를 사용하면 좋지만 그러려면 새로 공부를 해야하기 때문에 코드를 간소화하고 Routes를 한눈에 보면서 유지보수 할 수 있다는 점에서는 초보자들은 충분히 사용할만한 기술이라고 생각합니다.