Go-Router-라우팅관리

Date:     Updated:

카테고리:

태그:

go_router는 Flutter에서 라우팅을 관리하기 위한 패키지입니다. 이 패키지는 Flutter 애플리케이션에서 화면 간의 탐색을 효율적으로 처리하고, 선언적인 방식으로 경로를 설정할 수 있게 해줍니다. 주요 기능과 특징을 아래에 설명하겠습니다.

주요 기능Permalink

  1. 선언적 라우팅: go_router는 선언적 라우팅을 지원하여, 앱의 라우팅 구성을 명확하고 간결하게 정의할 수 있습니다. 이는 상태 기반 네비게이션과 비슷한 방식으로 경로를 설정할 수 있게 합니다.

  2. 경로 및 네비게이션 설정: GoRouter 클래스를 사용하여 애플리케이션의 경로와 네비게이션을 설정합니다. 각 경로는 화면과 관련된 GoRoute 객체로 정의됩니다.

  3. 중첩 경로 지원: 중첩된 네비게이션을 쉽게 구현할 수 있어, 복잡한 UI 구조를 관리하는 데 유리합니다.

  4. 다양한 네비게이션 방식 지원: go_router는 네비게이션, 푸시 및 팝 같은 다양한 방식의 네비게이션을 지원합니다. 또한, 네비게이션 상태를 저장하고 복원하는 기능도 제공합니다.

  5. 애니메이션 및 전환 효과: 화면 전환 시 애니메이션과 전환 효과를 커스터마이즈할 수 있어, 사용자 경험을 향상시킬 수 있습니다.

  6. 기본 경로 설정: 기본 경로를 설정하여, 앱이 시작될 때 어떤 화면이 기본적으로 나타날지를 정의할 수 있습니다.

사용 예시Permalink

  1. 패키지 설치: pubspec.yaml 파일에 go_router 패키지를 추가합니다.
    dependencies:
      go_router: ^x.y.z
    
  2. 라우터 설정: GoRouter 객체를 생성하고 경로를 정의합니다.
    import 'package:go_router/go_router.dart';
       
    final GoRouter _router = GoRouter(
      routes: [
        GoRoute(
          path: '/',
          builder: (context, state) => HomeScreen(),
          routes: [
            GoRoute(
              path: 'details/:id',
              builder: (context, state) {
                final id = state.params['id'];
                return DetailsScreen(id: id);
              },
            ),
          ],
        ),
      ],
    );
    
  3. 라우터 적용: MaterialApp.router 또는 CupertinoApp.router를 사용하여 라우터를 적용합니다.
    import 'package:flutter/material.dart';
    import 'package:go_router/go_router.dart';
       
    void main() {
      runApp(
        MaterialApp.router(
          routerDelegate: _router.routerDelegate,
          routeInformationParser: _router.routeInformationParser,
        ),
      );
    }
    

MaterialPageRoutergo_router는 Flutter 애플리케이션에서 라우팅을 처리하기 위한 방법입니다. 이 두 가지 접근 방식의 주요 차이점은 다음과 같습니다:

# 기본적인 라우팅과 go_router와의 차이점#Permalink

1. 기본 라우팅 방식Permalink

  • MaterialPageRouter:
    • MaterialPageRouter는 Flutter의 내장 라우팅 시스템에서 제공하는 기능 중 하나로, Navigator 위젯을 사용하여 페이지 전환을 관리합니다.
    • MaterialPageRouter는 일반적으로 Navigator 위젯과 함께 사용되며, 명령형 방식으로 라우팅을 처리합니다. 즉, 명시적으로 Navigator.push 또는 Navigator.pop을 호출하여 화면 전환을 제어합니다.
    • MaterialPageRouter는 화면의 전환을 직접적으로 다루며, 상태를 저장하고 복원하는 기능이 제한적일 수 있습니다.
  • go_router:
    • go_router는 Flutter에서 선언적 라우팅을 지원하는 패키지입니다. 라우팅을 정의하는 데 GoRouter 클래스를 사용하며, 경로와 화면을 명확히 분리하여 설정합니다.
    • go_router는 선언적 방식으로 라우팅을 처리합니다. 즉, 라우트와 화면을 선언적으로 정의하며, 라우팅 상태를 쉽게 관리할 수 있습니다.
    • go_router는 경로 기반 네비게이션을 지원하며, 중첩 라우트와 복잡한 네비게이션 구조를 쉽게 설정할 수 있습니다.

2. 라우팅 정의 및 관리Permalink

  • MaterialPageRouter:
    • 라우팅을 정의하기 위해 Navigator 위젯을 사용하며, 라우팅 관리를 위해 PageRoute 또는 Page 클래스를 사용합니다.
    • 라우트를 관리하기 위해 명령형 API를 사용하여, 경로를 수동으로 푸시하거나 팝합니다.
  • go_router:
    • 라우팅을 선언적으로 정의하며, GoRouter 객체를 사용하여 경로를 설정합니다.
    • 각 경로는 GoRoute 객체로 정의되고, 중첩된 경로와 하위 라우트를 쉽게 설정할 수 있습니다.

3. 상태 및 네비게이션 관리Permalink

  • MaterialPageRouter:
    • 네비게이션 상태를 직접적으로 관리해야 하며, 화면의 전환과 상태 복원을 수동으로 처리합니다.
    • 화면 전환에 대한 애니메이션과 전환 효과를 직접 설정할 수 있지만, 복잡한 상태 관리는 추가적인 코드가 필요합니다.
  • go_router:
    • 네비게이션 상태를 자동으로 관리하며, 선언적인 방식으로 경로와 상태를 설정합니다.
    • 복잡한 네비게이션 구조와 상태를 선언적으로 관리할 수 있어, 코드가 더 간결하고 유지보수가 용이합니다.

4. 사용 예시Permalink

  • MaterialPageRouter:
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => DetailsScreen(id: '123')),
    );
    
  • go_router:
    GoRouter(
      routes: [
        GoRoute(
          path: '/',
          builder: (context, state) => HomeScreen(),
          routes: [
            GoRoute(
              path: 'details/:id',
              builder: (context, state) {
                final id = state.params['id'];
                return DetailsScreen(id: id!);
              },
            ),
          ],
        ),
      ],
    );
    

연습Permalink

go_router 를사용하여 A페이지에서 B페이지로이동하고 B페이지에서 C페이지로이도하고 다시 A페이지로 이동하거나 B페이지로 이동하는 코드를 작성해 봅시다.

go_router를 사용하여 A 페이지에서 B 페이지로 이동하고, B 페이지에서 C 페이지로 이동한 후, 다시 A 페이지 또는 B 페이지로 돌아오는 예시 코드를 작성하겠습니다. 이 코드는 go_router의 기본적인 사용 방법을 보여줍니다.

pubspec.yaml 설정Permalink

먼저, go_router 패키지를 pubspec.yaml에 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  go_router: ^6.0.0  # 최신 버전으로 업데이트해주세요

main.dart 파일Permalink

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final GoRouter _router = GoRouter(
      routes: [
        // A 페이지의 라우트 정의
        GoRoute(
          path: '/',
          builder: (context, state) => PageA(),
          routes: [
            // B 페이지의 라우트 정의
            GoRoute(
              path: 'b',
              builder: (context, state) => PageB(),
              routes: [
                // C 페이지의 라우트 정의
                GoRoute(
                  path: 'c',
                  builder: (context, state) => PageC(),
                ),
              ],
            ),
          ],
        ),
      ],
    );

    return MaterialApp.router(
      routerDelegate: _router.routerDelegate,
      routeInformationParser: _router.routeInformationParser,
    );
  }
}

// A 페이지 정의
class PageA extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Page A')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('This is Page A'),
            ElevatedButton(
              onPressed: () {
                // B 페이지로 이동
                context.go('/b');
              },
              child: Text('Go to Page B'),
            ),
          ],
        ),
      ),
    );
  }
}

// B 페이지 정의
class PageB extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Page B')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('This is Page B'),
            ElevatedButton(
              onPressed: () {
                // C 페이지로 이동
                context.go('/b/c');
              },
              child: Text('Go to Page C'),
            ),
            ElevatedButton(
              onPressed: () {
                // A 페이지로 돌아가기
                context.go('/');
              },
              child: Text('Back to Page A'),
            ),
          ],
        ),
      ),
    );
  }
}

// C 페이지 정의
class PageC extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Page C')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('This is Page C'),
            ElevatedButton(
              onPressed: () {
                // B 페이지로 돌아가기
                context.go('/b');
              },
              child: Text('Back to Page B'),
            ),
            ElevatedButton(
              onPressed: () {
                // A 페이지로 돌아가기
                context.go('/');
              },
              child: Text('Back to Page A'),
            ),
          ],
        ),
      ),
    );
  }
}

코드 설명Permalink

  1. MyApp 클래스:
    • GoRouter 인스턴스를 생성하고 라우트를 정의합니다.
    • / 경로에 PageA를, /b 경로에 PageB를, /b/c 경로에 PageC를 연결합니다.
    • MaterialApp.router를 사용하여 GoRouter와 연결합니다.
  2. PageA 클래스:
    • A 페이지를 정의합니다.
    • 버튼 클릭 시 context.go('/b')를 사용하여 B 페이지로 이동합니다.
  3. PageB 클래스:
    • B 페이지를 정의합니다.
    • 버튼 클릭 시 context.go('/b/c')를 사용하여 C 페이지로 이동하거나, context.go('/')를 사용하여 A 페이지로 이동합니다.
  4. PageC 클래스:
    • C 페이지를 정의합니다.
    • 버튼 클릭 시 context.go('/b')를 사용하여 B 페이지로 돌아가거나, context.go('/')를 사용하여 A 페이지로 돌아갑니다.

기타 다른 라우팅 및 getx 라우팅…Permalink

Flutter에서 라우팅을 처리하는 방법은 여러 가지가 있으며, 각각의 방법은 사용자의 요구 사항과 애플리케이션의 복잡성에 따라 다르게 선택할 수 있습니다. 주요 라우팅 방법과 그 설명은 다음과 같습니다:

1. 명령형 라우팅 (Imperative Routing)Permalink

  • 설명: Flutter의 기본 네비게이션 API를 사용하여 페이지 간의 이동을 직접 제어하는 방법입니다. Navigator 클래스를 사용하여 화면을 푸시하거나 팝합니다.
  • 사용 방법:
    // 페이지를 푸시
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => NewPage()),
    );
    
    // 페이지를 팝
    Navigator.pop(context);
    
  • 장점: 간단하고 직접적인 제어가 가능하며, 작은 규모의 애플리케이션에 적합합니다.
  • 단점: 라우팅 상태를 명시적으로 관리해야 하며, 복잡한 네비게이션 구조를 관리하기 어려울 수 있습니다.

2. 선언적 라우팅 (Declarative Routing)Permalink

  • 설명: 라우팅을 선언적으로 정의하여, 경로와 화면을 명확히 분리하는 방법입니다. Flutter 2.0부터 도입된 Navigator 2.0 API와 함께 사용됩니다.
  • 사용 방법:
    // Navigator 2.0 설정
    final GoRouter _router = GoRouter(
      routes: [
        GoRoute(
          path: '/',
          builder: (context, state) => HomePage(),
          routes: [
            GoRoute(
              path: 'details/:id',
              builder: (context, state) {
                final id = state.params['id'];
                return DetailsPage(id: id!);
              },
            ),
          ],
        ),
      ],
    );
    
    // MaterialApp.router 사용
    return MaterialApp.router(
      routerDelegate: _router.routerDelegate,
      routeInformationParser: _router.routeInformationParser,
    );
    
  • 장점: 경로와 화면을 명확히 분리하여 관리할 수 있으며, 중첩된 라우트와 복잡한 네비게이션 구조를 쉽게 처리할 수 있습니다.
  • 단점: 초기 설정이 복잡할 수 있으며, 새로운 API에 대한 학습이 필요합니다.

3. 기본 라우팅 (Basic Routing)Permalink

  • 설명: Flutter의 기본 NavigatorMaterialPageRoute를 사용하여 간단한 페이지 전환을 구현하는 방법입니다.
  • 사용 방법:
    // 페이지 전환 예시
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => NewPage()),
    );
    
  • 장점: 간단하고 빠르게 사용할 수 있으며, 기본적인 페이지 전환에 적합합니다.
  • 단점: 복잡한 네비게이션 시나리오를 처리하기에는 한계가 있습니다.

4. 패키지를 이용한 라우팅 (Package-based Routing)Permalink

  • 설명: 외부 패키지를 사용하여 라우팅을 처리하는 방법입니다. go_router와 같은 패키지를 활용하여 더 강력하고 유연한 라우팅을 제공합니다.
  • 사용 방법:
    import 'package:go_router/go_router.dart';
    
    final GoRouter _router = GoRouter(
      routes: [
        GoRoute(
          path: '/',
          builder: (context, state) => HomePage(),
          routes: [
            GoRoute(
              path: 'details/:id',
              builder: (context, state) {
                final id = state.params['id'];
                return DetailsPage(id: id!);
              },
            ),
          ],
        ),
      ],
    );
    
    return MaterialApp.router(
      routerDelegate: _router.routerDelegate,
      routeInformationParser: _router.routeInformationParser,
    );
    
  • 장점: 복잡한 네비게이션 구조를 쉽게 관리할 수 있으며, 상태 관리와 라우팅을 통합하여 효율적인 개발이 가능합니다.
  • 단점: 외부 패키지에 의존하게 되며, 패키지의 업데이트나 유지보수에 신경 써야 할 수 있습니다.

5. Named RoutesPermalink

  • 설명: Flutter에서 라우트 이름을 사용하여 페이지를 전환하는 방법입니다. 라우트를 미리 정의해 놓고, 이름을 사용하여 페이지를 푸시하거나 팝합니다.
  • 사용 방법:
    // 라우트 설정
    final routes = {
      '/': (context) => HomePage(),
      '/details': (context) => DetailsPage(),
    };
    
    return MaterialApp(
      initialRoute: '/',
      routes: routes,
    );
    
    // 라우트 이동
    Navigator.pushNamed(context, '/details');
    
  • 장점: 라우트를 미리 정의해 놓고 사용하기 때문에, 코드가 명확하고 일관성 있게 유지됩니다.
  • 단점: 라우트의 복잡성이 증가할 수 있으며, 코드가 길어질 수 있습니다.

GetX 라우팅 기본 개념Permalink

GetX는 Flutter에서 상태 관리, 의존성 주입, 라우팅을 통합적으로 지원하는 패키지입니다. GetX의 라우팅 기능은 간편하고 직관적인 네비게이션을 제공하며, 애플리케이션의 상태와 라우팅을 함께 관리할 수 있는 장점이 있습니다. 여기서는 GetX의 라우팅 기능을 소개하고, 기본 사용법과 예제를 제공하겠습니다.

  1. 라우트 설정: GetX를 사용하여 라우트를 설정할 때는 GetMaterialApp 위젯을 사용하여 애플리케이션의 루트 라우트를 설정합니다. GetPage 객체를 사용하여 각 라우트를 정의합니다.

  2. 네비게이션: GetX는 네비게이션을 매우 간편하게 처리할 수 있도록 돕습니다. Get.to(), Get.off(), Get.back() 등의 메서드를 사용하여 화면 전환과 네비게이션을 쉽게 구현할 수 있습니다.

  3. 상태 관리 통합: GetX는 라우팅과 상태 관리를 통합하여, 네비게이션을 하면서 상태를 유지하거나 변경하는 작업을 간단하게 처리할 수 있습니다.

GetX 라우팅 사용 예제Permalink

다음은 GetX를 사용하여 A 페이지에서 B 페이지로 이동하고, B 페이지에서 C 페이지로 이동한 후 다시 A 페이지나 B 페이지로 돌아오는 예제입니다.

pubspec.yaml 파일 설정Permalink

먼저, GetX 패키지를 pubspec.yaml 파일에 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  get: ^4.6.5  # 최신 버전으로 업데이트해주세요

main.dart 파일Permalink

아래 코드는 GetX를 사용하여 라우팅을 설정하는 방법을 보여줍니다.

import 'package:flutter/material.dart';
import 'package:get/get.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      initialRoute: '/',
      getPages: [
        // A 페이지의 라우트 정의
        GetPage(
          name: '/',
          page: () => PageA(),
        ),
        // B 페이지의 라우트 정의
        GetPage(
          name: '/b',
          page: () => PageB(),
        ),
        // C 페이지의 라우트 정의
        GetPage(
          name: '/b/c',
          page: () => PageC(),
        ),
      ],
    );
  }
}

// A 페이지 정의
class PageA extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Page A')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('This is Page A'),
            ElevatedButton(
              onPressed: () {
                // B 페이지로 이동
                Get.toNamed('/b');
              },
              child: Text('Go to Page B'),
            ),
          ],
        ),
      ),
    );
  }
}

// B 페이지 정의
class PageB extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Page B')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('This is Page B'),
            ElevatedButton(
              onPressed: () {
                // C 페이지로 이동
                Get.toNamed('/b/c');
              },
              child: Text('Go to Page C'),
            ),
            ElevatedButton(
              onPressed: () {
                // A 페이지로 돌아가기
                Get.offAllNamed('/');
              },
              child: Text('Back to Page A'),
            ),
          ],
        ),
      ),
    );
  }
}

// C 페이지 정의
class PageC extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Page C')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('This is Page C'),
            ElevatedButton(
              onPressed: () {
                // B 페이지로 돌아가기
                Get.back();
              },
              child: Text('Back to Page B'),
            ),
            ElevatedButton(
              onPressed: () {
                // A 페이지로 돌아가기
                Get.offAllNamed('/');
              },
              child: Text('Back to Page A'),
            ),
          ],
        ),
      ),
    );
  }
}

코드 설명Permalink

  1. MyApp 클래스:
    • GetMaterialApp을 사용하여 애플리케이션을 설정하고, initialRoute/로 지정합니다.
    • getPages 속성에 라우트를 정의하여, 각 페이지에 대한 경로와 페이지 위젯을 매핑합니다.
  2. PageA 클래스:
    • A 페이지를 정의하며, 버튼 클릭 시 Get.toNamed('/b')를 사용하여 B 페이지로 이동합니다.
  3. PageB 클래스:
    • B 페이지를 정의하며, 버튼 클릭 시 Get.toNamed('/b/c')를 사용하여 C 페이지로 이동하거나, Get.offAllNamed('/')를 사용하여 A 페이지로 돌아갑니다.
  4. PageC 클래스:
    • C 페이지를 정의하며, 버튼 클릭 시 Get.back()을 사용하여 B 페이지로 돌아가거나, Get.offAllNamed('/')를 사용하여 A 페이지로 돌아갑니다.

장점 및 고려사항Permalink

  • 장점:
    • 간편한 네비게이션: Get.toNamed(), Get.back(), Get.offAllNamed() 등의 메서드를 사용하여 쉽게 네비게이션을 처리할 수 있습니다.
    • 통합 관리: 상태 관리와 네비게이션을 통합적으로 관리할 수 있어, 코드의 일관성과 유지보수성을 높일 수 있습니다.
  • 고려사항:
    • 패키지 의존성: GetX 패키지를 사용하는 만큼, 해당 패키지의 기능에 의존하게 되며, 패키지의 업데이트나 변경에 주의해야 합니다.

GetX는 간단한 네비게이션과 상태 관리를 통합적으로 지원하며, 복잡한 네비게이션 구조를 관리하는 데 유용한 패키지입니다. GetX를 사용하여 애플리케이션의 네비게이션을 효율적으로 구현할 수 있습니다.

결론Permalink

  • 단순한 애플리케이션: 기본 NavigatorMaterialPageRoute를 사용하는 명령형 라우팅이 적합할 수 있습니다.
  • 복잡한 네비게이션 요구: go_router와 같은 패키지를 사용하여 선언적 라우팅을 구현하면 복잡한 네비게이션 구조를 쉽게 관리할 수 있습니다.
  • 다양한 네비게이션 시나리오: Navigator 2.0 API를 활용한 선언적 라우팅은 네비게이션 상태와 경로를 명확히 정의할 수 있습니다.

Package 카테고리 내 다른 글 보러가기

댓글 남기기