Go-Router-라우팅관리
카테고리: Package
go_router
는 Flutter에서 라우팅을 관리하기 위한 패키지입니다. 이 패키지는 Flutter 애플리케이션에서 화면 간의 탐색을 효율적으로 처리하고, 선언적인 방식으로 경로를 설정할 수 있게 해줍니다. 주요 기능과 특징을 아래에 설명하겠습니다.
주요 기능Permalink
-
선언적 라우팅:
go_router
는 선언적 라우팅을 지원하여, 앱의 라우팅 구성을 명확하고 간결하게 정의할 수 있습니다. 이는 상태 기반 네비게이션과 비슷한 방식으로 경로를 설정할 수 있게 합니다. -
경로 및 네비게이션 설정:
GoRouter
클래스를 사용하여 애플리케이션의 경로와 네비게이션을 설정합니다. 각 경로는 화면과 관련된GoRoute
객체로 정의됩니다. -
중첩 경로 지원: 중첩된 네비게이션을 쉽게 구현할 수 있어, 복잡한 UI 구조를 관리하는 데 유리합니다.
-
다양한 네비게이션 방식 지원:
go_router
는 네비게이션, 푸시 및 팝 같은 다양한 방식의 네비게이션을 지원합니다. 또한, 네비게이션 상태를 저장하고 복원하는 기능도 제공합니다. -
애니메이션 및 전환 효과: 화면 전환 시 애니메이션과 전환 효과를 커스터마이즈할 수 있어, 사용자 경험을 향상시킬 수 있습니다.
-
기본 경로 설정: 기본 경로를 설정하여, 앱이 시작될 때 어떤 화면이 기본적으로 나타날지를 정의할 수 있습니다.
사용 예시Permalink
- 패키지 설치:
pubspec.yaml
파일에go_router
패키지를 추가합니다.dependencies: go_router: ^x.y.z
- 라우터 설정:
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); }, ), ], ), ], );
- 라우터 적용:
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, ), ); }
MaterialPageRouter
와 go_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
MyApp
클래스:GoRouter
인스턴스를 생성하고 라우트를 정의합니다./
경로에PageA
를,/b
경로에PageB
를,/b/c
경로에PageC
를 연결합니다.MaterialApp.router
를 사용하여GoRouter
와 연결합니다.
PageA
클래스:- A 페이지를 정의합니다.
- 버튼 클릭 시
context.go('/b')
를 사용하여 B 페이지로 이동합니다.
PageB
클래스:- B 페이지를 정의합니다.
- 버튼 클릭 시
context.go('/b/c')
를 사용하여 C 페이지로 이동하거나,context.go('/')
를 사용하여 A 페이지로 이동합니다.
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의 기본
Navigator
와MaterialPageRoute
를 사용하여 간단한 페이지 전환을 구현하는 방법입니다. - 사용 방법:
// 페이지 전환 예시 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
의 라우팅 기능을 소개하고, 기본 사용법과 예제를 제공하겠습니다.
-
라우트 설정:
GetX
를 사용하여 라우트를 설정할 때는GetMaterialApp
위젯을 사용하여 애플리케이션의 루트 라우트를 설정합니다.GetPage
객체를 사용하여 각 라우트를 정의합니다. -
네비게이션:
GetX
는 네비게이션을 매우 간편하게 처리할 수 있도록 돕습니다.Get.to()
,Get.off()
,Get.back()
등의 메서드를 사용하여 화면 전환과 네비게이션을 쉽게 구현할 수 있습니다. -
상태 관리 통합:
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
MyApp
클래스:GetMaterialApp
을 사용하여 애플리케이션을 설정하고,initialRoute
를/
로 지정합니다.getPages
속성에 라우트를 정의하여, 각 페이지에 대한 경로와 페이지 위젯을 매핑합니다.
PageA
클래스:- A 페이지를 정의하며, 버튼 클릭 시
Get.toNamed('/b')
를 사용하여 B 페이지로 이동합니다.
- A 페이지를 정의하며, 버튼 클릭 시
PageB
클래스:- B 페이지를 정의하며, 버튼 클릭 시
Get.toNamed('/b/c')
를 사용하여 C 페이지로 이동하거나,Get.offAllNamed('/')
를 사용하여 A 페이지로 돌아갑니다.
- B 페이지를 정의하며, 버튼 클릭 시
PageC
클래스:- C 페이지를 정의하며, 버튼 클릭 시
Get.back()
을 사용하여 B 페이지로 돌아가거나,Get.offAllNamed('/')
를 사용하여 A 페이지로 돌아갑니다.
- C 페이지를 정의하며, 버튼 클릭 시
장점 및 고려사항Permalink
- 장점:
- 간편한 네비게이션:
Get.toNamed()
,Get.back()
,Get.offAllNamed()
등의 메서드를 사용하여 쉽게 네비게이션을 처리할 수 있습니다. - 통합 관리: 상태 관리와 네비게이션을 통합적으로 관리할 수 있어, 코드의 일관성과 유지보수성을 높일 수 있습니다.
- 간편한 네비게이션:
- 고려사항:
- 패키지 의존성:
GetX
패키지를 사용하는 만큼, 해당 패키지의 기능에 의존하게 되며, 패키지의 업데이트나 변경에 주의해야 합니다.
- 패키지 의존성:
GetX
는 간단한 네비게이션과 상태 관리를 통합적으로 지원하며, 복잡한 네비게이션 구조를 관리하는 데 유용한 패키지입니다. GetX
를 사용하여 애플리케이션의 네비게이션을 효율적으로 구현할 수 있습니다.
결론Permalink
- 단순한 애플리케이션: 기본
Navigator
와MaterialPageRoute
를 사용하는 명령형 라우팅이 적합할 수 있습니다. - 복잡한 네비게이션 요구:
go_router
와 같은 패키지를 사용하여 선언적 라우팅을 구현하면 복잡한 네비게이션 구조를 쉽게 관리할 수 있습니다. - 다양한 네비게이션 시나리오:
Navigator 2.0
API를 활용한 선언적 라우팅은 네비게이션 상태와 경로를 명확히 정의할 수 있습니다.
댓글 남기기