GoRouter에서 ShellRoute와 여러 NavigatorKey를 사용하는 방식은 복잡한 네비게이션 흐름을 관리하는 데 도움이 되며, 특히 바텀 네비게이션이나 사이드 네비게이션을 사용하여 여러 탭이 있는 앱에서 유용합니다. 아래에 ShellRoute와 NavigatorKey의 역할과, 기존의 단순한 GoRoute 구조와 비교했을 때의 차이점을 설명하겠습니다.
1. NavigatorKey의 역할
NavigatorKey는 네비게이터의 상태를 추적하거나 특정 네비게이터 인스턴스에 대해 명시적으로 접근할 때 사용됩니다. GoRouter 설정에서 rootNavigatorKey와 shellNavigatorKey를 설정하면 다음과 같은 효과가 있습니다:
- _rootNavigatorKey: 앱의 최상위 네비게이터를 참조합니다. 이 키를 사용하여 최상위 네비게이터에서 페이지를 띄우면 바텀 네비게이션과 같은 다른 스택의 영향을 받지 않는 독립적인 페이지로 열립니다. 예를 들어, 최상위에서 push하여 모달 페이지를 열거나 ShellRoute를 무시하고 독립적으로 페이지를 띄우는 데 사용됩니다.
- _shellNavigatorKey: ShellRoute 내부의 네비게이터를 참조하며, 바텀 네비게이션 또는 탭 네비게이션처럼 앱 내부의 고정된 네비게이션 흐름을 유지할 때 사용됩니다. ShellRoute 내의 페이지 전환은 이 키를 사용해 스택을 관리하므로, 네비게이션 바가 유지된 상태에서 페이지 전환이 가능합니다.
2. ShellRoute의 역할
ShellRoute는 여러 하위 경로에서 공통적인 네비게이션 바(바텀 네비게이션이나 사이드 네비게이션)를 유지하며 여러 페이지를 관리할 때 사용됩니다. 주요 기능은 다음과 같습니다:
- 공통 UI 유지: ShellRoute 내부에 배치된 하위 GoRoute들은 공통적인 네비게이션 UI를 유지합니다. 예를 들어, 바텀 네비게이션 바가 ShellRoute의 builder 함수에 정의되어 있다면, ShellRoute 내부의 하위 페이지들은 항상 동일한 바텀 네비게이션을 유지하며 전환됩니다.
- 독립적인 페이지 전환: ShellRoute 내에서 rootNavigatorKey를 사용하여 특정 페이지를 독립적으로 띄울 수 있습니다. 이렇게 하면 특정 페이지가 ShellRoute의 영향을 받지 않고 최상위 네비게이터에 새로운 스택을 쌓는 방식으로 동작하게 됩니다.
기존의 단순한 GoRoute 구조와의 차이
기존의 단순한 GoRoute 구조는 기본적인 네비게이션 흐름을 관리하는 데 적합하지만, 복잡한 상태 유지와 다중 네비게이터가 필요한 경우에는 다음과 같은 한계가 있습니다:
- 공통 UI 유지가 어려움: 바텀 네비게이션 바와 같은 공통 UI를 유지하려면 모든 페이지마다 동일한 네비게이션 바를 반복해서 정의해야 합니다. ShellRoute는 이를 해결해줍니다.
- 다중 네비게이션 스택 관리 부족: 단순한 GoRoute는 페이지 전환 시 각 페이지가 새롭게 스택을 쌓는 방식으로 작동하기 때문에, rootNavigatorKey나 shellNavigatorKey를 사용하여 독립적인 네비게이터 스택을 만들기 어렵습니다.
요약
- **ShellRoute**는 여러 페이지가 공통 네비게이션 UI를 유지할 수 있도록 도와주며, 네비게이션 바나 탭 바가 있는 앱에 적합합니다.
- **NavigatorKey**를 사용하여 rootNavigator와 shellNavigator를 명시하면, 네비게이터 스택을 구분해 필요한 페이지에서 독립적인 전환을 할 수 있습니다.
기존의 단순한 GoRoute 구조는 페이지가 많지 않거나 공통 네비게이션 UI 유지가 필요하지 않은 경우 유용하지만, 복잡한 네비게이션 흐름에서는 ShellRoute와 NavigatorKey를 사용하는 방식이 훨씬 유연하고 관리하기 쉽습니다.
댓글