GoRouter 13.0 버젼 기능연구

고랭지참치·2025년 4월 9일

flutter go_router

Flutter

목록 보기

15/24

GoRouter 속속 분석하기

💡 Flutter 팀에서 적극적으로 밀고 있는 라우트 툴인 GoRouter에 대해 심도 있게 분석하고 우리 제품에 적용할 때 반영할 수 있는 내용을 중심으로 공유한다.

대부분의 내용은 깃헙 레포에 올려둠

개발에서의 Route란?

생활코딩 블로그

Routing 주요 개념

💡 ***라우팅***은 URI(또는 경로) 및 특정한 HTTP 요청 메소드(GET, POST 등)인 특정 엔드포인트에 대한 클라이언트 요청에 애플리케이션이 응답하는 방법을 결정하는 것을 말합니다.

(Express 공식문서)

정적 라우팅 / 동적라우팅
- /profile/:userID
- 동적 라우팅은 path안에 데이터를 넣어 해당 값에 따라 라우팅을 다르게 처리하는 것
애플리케이션 내에서 다른 페이지나 뷰로 이동시키는 과정.
특히 단일 페이지 애플리케이션(SPA)을 만들 때 중요.
- 클라이언트 측 대 서버 측 라우팅:
  - 클라이언트 측 라우팅: SPA에서는 주로 브라우저가 자바스크립트를 사용해 라우팅을 처리. (ex : React, Angular, Vue)
  - 서버 측 라우팅: 전통적인 웹 애플리케이션은 서버 측 라우팅을 사용. 여기서는 각 URL 요청이 서버에서 처리되고, 새로운 페이지가 브라우저로 전송
    - SPA와 MPA
      SPA와 MPA
      - SPA
        
        동적인 컨텐츠 로딩: SPA는 사용자의 요청에 따라 필요한 부분만을 동적으로 로딩하고 갱신
        
        클라이언트 측 라우팅: SPA는 주로 클라이언트 측에서 라우팅을 처리. 이는 URL 변경에 따른 페이지 전체의 새로고침 없이, 브라우저 상에서 페이지 부분을 교체
        
        향상된 사용자 경험: SPA는 빠른 페이지 전환과 부드러운 사용자 인터페이스 상호작용을 제공
        
        SEO최적화에 어려움 (브라우저가 데이터 크롤링 하는데 제한있으며, 브라우저 호환성 이슈 존재)
        
        최초 로딩에 시간이 오래 걸림, 이후 로딩에는 빠름

Routing 주요 기능

중첩 라우팅: 특정 라우트가 하위 라우트를 가지는 것을 의미
리다이렉트 및 가드: 라우팅 시스템은 사용자를 리다이렉트하는 방법(예: /에서 /home으로)과 사용자 인증과 같은 조건에 따라 특정 라우트에 대한 접근을 허용하거나 방지하는 가드를 제공

Flutter에서의 라우트는?

Flutter는 복잡하지 않은 앱에서 화면 간 이동을 제어하는 완성된 시스템을 제공하고 있다. DeepLink를 사용하지 않는다면 Navigator로 제어 가능
- Flutter 공식문서 원문 💡 Flutter provides a complete system for navigating between screens and handling deep links. Small applications without complex deep linking can use [`Navigator`](https://api.flutter.dev/flutter/widgets/Navigator-class.html), while apps with specific deep linking and navigation requirements should also use the [`Router`](https://api.flutter.dev/flutter/widgets/Router-class.html) to correctly handle deep links on Android and iOS, and to stay in sync with the address bar when the app is running on the web.

하지만 고급 탐색 기능, 각 화면에 대한 고유의 링크를 사용하는 등의 기능을 사용하려면 go_router와 같은 라우팅 패키지를 사용해야 한다.
- Flutter 공식문서 원문 💡 Flutter applications with advanced navigation and routing requirements (such as a web app that uses direct links to each screen, or an app with multiple `Navigator` widgets) should use a routing package such as [go_router](https://pub.dev/packages/go_router) that can parse the route path and configure the `Navigator` whenever the app receives a new deep link.

Router와 Navigator는 함께 동작하도록 설계되어있다.
- 라우팅은 "앱의 네비게이션 구조를 설정하는 것"
- 네비게이팅은 "사용자가 그 구조 내에서 실제로 이동하는 행위”
- 명시적 라우트 링크를 통해 만들어진 Page route들은 page-backed.
- Navigator.push, showDialog() 등의 함수를 통해 만들어진 route들은 pageless .
  - pageless route들은 deeplink를 지원하지 않는다.
  - page-backed route가 stack에서 제거됐을때, 해당 page-bakced 이후에 생성된pageless 들은 모두 제거된다.

go_router 실습 코드

https://github.com/MinwooRowan/go_router_study

함께 의논해볼점

Redirect - refreshListenable은 여러 상태를 notify받을 수 있는 구조이며, goRouter는 GoRoute클래스 단위마다 Redirect를 세부적으로 설정할 수 있게 해두었다.
- 사용자 상태가 업데이트 됐을때, 페이지 별로 다른 Redirect를 적용해줄 수 있는 상황에는 어떤 것이 있을까?
- 페이지 별 다른 적용이 가능하다면 더 좋은 UX를 개발할 때 도움이 될 수 있을 듯.
ShellRoute를 통한 BottomNavigationBar와 IndexedStack을 통해서 생성한 BottomNavigationBar 중에 우리팀은 어떤 방식을 사용할 것인가
- ShellRoute는 라우팅을 시키는 것이기 때문에, Local State 사라짐
- IndexedStack은 모든 페이지 Local State 살아있게 됨.