GoRouter 사용시 꼭 활용해야 하는 아키텍처 패턴

이번 글에서는 GoRoute 패키지로 네비게이션 기능 구현할 때 꼭 활용해야 하는 아키텍처 패턴을 살펴보도록 하겠습니다.

아키텍처 패턴:

파일 시스템 구조는 다음과 같이 구성해 줍니다.

• lib → common → navigation → router.dart / routes.dart
• routes에는 우리가 만들 route 명을 enum으로 정의해준다.
• Router에는 실제 route를 구현하는 GoRouter를 정리한다.

routes.dart

enum AppRoute {
  home,
  settings,
}

• 우리가 작성할 route의 목록을 enum 값으로 만들어 줍니다.
• 해당 Enum값은 후술할 router.dart파일 값에 Navigation name으로 사용됩니다.

// 실제 사용 예시
context.goNamed(AppRoute.home.name);

router.dart

final router = GoRouter(
  routes: [
    GoRoute(
        path: '/',
        name: AppRoute.home.name,
        builder: (context, state) => const QuizPage()),
    GoRoute(
        path: '/settings',
        name: AppRoute.settings.name,
        builder: (context, state) => SettingsPage()),
  ],
  errorBuilder: (context, state) => Scaffold(
    body: Center(
      child: Text(state.error.toString()),
    ),
  ),
);

• Router.dart에는 앞서 routes.dart에 정의한 Enum값을 매개로 실제 route를 구현합니다.

왜 Enum을 사용할까?

앞서 Enum 값을 이용하여 GoRoute를 만들었습니다. 하지만 이는 반드시 필요한 부분은 아닙니다. Enum값 대신에 기본적인 String을 이용하여 route를 만들 수도 있습니다. 예시를 한번 보겟습니다.

final router = GoRouter(
  routes: [
    GoRoute(
        path: '/',
        name: 'home',
        builder: (context, state) => const QuizPage()),
    GoRoute(
        path: '/settings',
        name: 'settings',
        builder: (context, state) => SettingsPage()),
  ],
  errorBuilder: (context, state) => Scaffold(
    body: Center(
      child: Text(state.error.toString()),
    ),
  ),
);

해당 코드는 앞서 설명한 GoRouter와 동일하지만 Enum 대신 String을 사용했습니다. 해당 방식은 장점과 단점을 가지고 있습니다

****장점****

• 하나의 파일에 router 관련 내용을 전무 정의할 수 있다

**단점**

• Enum 값을 사용하지 않으므로 오타가 나기 쉽다
• 코딩 작성 중에 route명을 확인하기 쉽지 않다. Enum을 사용할 경우 AppRoute. 이후에 가능한 선택지를 자동으로 보여주는데, 해당 기능을 사용할 경우 route명을 외우지 않아도 된다.
  

• Enum 값을 이용하면 전체 페이지 수 확인 등 추가적인 기능을 구현하기 쉽다.

따라서 Route를 만들 때 Enum값을 따로 설정해 주는 것이 여러모로 장점이 많습니다. Route만들 때는 해당 route명을 꼭 Enum값으로 구성해 주시길 바랍니다.

감사합니다